Components
Card
Cards provide a flexible and extensible content container with multiple variants and options.
Basic
A basic card containing a title, content and an extra corner content. Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated.
To create cards, simply add the `.card` class.
You can use `.card-content` class for the content, `.card-header` class for the header and the `<hr>` tag for the dividers.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Simple body
You can use `.card-content` class to create a simple body example with text.
Simple card
You can add others elements in the `.card-content` parent.
Card Title
Card Subtitle
This is some text within a card body.
Header / Footer
You can use `.card-header` and `<hr>` tag to create a header or footer.
Card Title
With supporting text below as a natural lead-in to additional content.
Card Title
With supporting text below as a natural lead-in to additional content.
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
To create a horizontal card, simply add `display: flex` in the `.card` parent.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
Card group
Use Layout Group to render cards as a single, attached element with equal width and height columns.
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago