menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • 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.Media
    • square true/false
      Makes Media aspect ratio 1:1.
    • sixteenByNine true/false
      Makes Media aspect ratio 16:9.
  • Card.CardMediaContent
    • no specific props
Sample code
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>
            <h2 class=" mdc-typography--title">Hi</h2>
            <div class=" mdc-typography--caption">Let me subtitle</div>
          </div>
          <Card.Media className="card-media" />
          <Card.Actions>
            <Card.ActionButton>OKAY</Card.ActionButton>
          </Card.Actions>
        </Card>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-card. You can refer to its documentation here.
Card with action button

Title

Caption
Card with full-bleed action area

Title

Caption