• Card
  • outlined true/false

    This makes the card outlined.
• Card.Actions
  • full-bleed true/false

    This makes the action button end to end.
• Card.ActionButton
  • no specific props
• Card.ActionIcon
  • no specific props
• Card.ActionButtons
  • no specific props
• Card.ActionIcons
  • no specific props
• Card.Media
  • square true/false

    Makes Media aspect ratio 1:1.
  • sixteenByNine true/false

    Makes Media aspect ratio 16:9.
• Card.CardMediaContent
  • no specific props

import {h, Component} from 'preact';
import Card from 'preact-material-components/Card';
import 'preact-material-components/Card/style.css';
import 'preact-material-components/Button/style.css';

export default class CardsPage extends Component {
  render(){
    return (
      <div>
        <Card>
          <div class="card-header">
            <h2 class=" mdc-typography--title">Title</h2>
            <div class=" mdc-typography--caption">Caption</div>
          </div>
          <Card.Media className="card-media" />
          <Card.Actions>
            <Card.ActionButtons>
              <Card.ActionButton>OK</Card.ActionButton>
            </Card.ActionButtons>
            <Card.ActionIcons>
              <Card.ActionIcon>share</Card.ActionIcon>
            </Card.ActionIcons>
          </Card.Actions>
        </Card>
      </div>
    );
  }
}