Card
Cards provide a great way to present content and actions about a particular topic. Cards are full-width by default and by applying a grid class on the parent div, you can simply specify the number of columns you want and the cards will adjust perfectly.
Basic cards
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
<.card>
<.card_content category="Article" class="max-w-sm" heading="Enhance your Phoenix development">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
</.card_content>
</.card>
Outline cards
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
<.card class="max-w-sm" variant="outline">
<.card_content category="Article" heading="Enhance your Phoenix development">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
</.card_content>
</.card>
Cards with media
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
<.card class="max-w-sm">
<.card_media src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
<.card_content category="Article" heading="Enhance your Phoenix development">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
</.card_content>
</.card>
Cards with media and footer
Marketing
Tips for lightning fast development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
<.card>
<.card_media src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80" />
<.card_content category="Marketing" heading="Tips for lightning fast development">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
</.card_content>
<.card_footer>
<.button to="/" label="View">
<HeroiconsV1.Solid.eye class="w-4 h-4 mr-2" />View
</.button>
</.card_footer>
</.card>
Properties
Defaults are indicated in bold.
.card
| Name | Type | Options |
|---|---|---|
| variant | :string |
basic, `outline`
|
| inner_block | :slot | - |
| class | :string | - |
.card_media
| Name | Type | Options |
|---|---|---|
| src | :string | - |
| aspect_ratio_class | :string | aspect-video |
| class | :string | - |
.card_content
| Name | Type | Options |
|---|---|---|
| category | :string | - |
| Heading | :string | - |
| inner_block | :slot | - |
| class | :string | - |
.card_footer
| Name | Type | Options |
|---|---|---|
| inner_block | :slot | - |