Components Card

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.
heex 
          <.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.
heex 
          <.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.
heex 
          <.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.
heex 
          <.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>
Card with review
Anne

Anne

@anne

I've never seen anything like this before. It's amazing.

heex 
          <.review_card
  name="Anne"
  username="@anne"
  body="I've never seen anything like this before. It's amazing."
  img="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
/>
Properties
elixir 
          # Card
attr(:class, :string, default: "", doc: "CSS class")
attr(:variant, :string, default: "basic", values: ["basic", "outline"])
attr(:rest, :global)
slot(:inner_block, required: false)

# Card media
attr(:aspect_ratio_class, :string, default: "aspect-video", doc: "aspect ratio class")
attr(:src, :string, default: nil, doc: "hosted image URL")
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)

# Card content
attr(:heading, :string, default: nil, doc: "creates a heading")
attr(:category, :string, default: nil, doc: "creates a category")

attr(:category_color_class, :string,
  default: "pc-card__category--primary",
  doc: "sets a category color class"
)

attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)

# Card footer
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)