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>

      
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">
      <Heroicons.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 -