- 1.5.0

Card

Renders a card in an article tag, typically used repetitively in a grid or flex box layout.

Read more Read less

Maturity: Developing

Usage

<.card>
  <:image>
    <img src="image.png" alt="Picture of a dog dressed in a poncho." />
  </:image>
  <:header><h2>Dog Fashion Show</h2></:header>
  <:body>
    The next dog fashion show is coming up quickly. Here's what you need
    to look out for.
  </:body>
  <:footer>
    <span>2023-11-15 12:24</span>
    <span>Events</span>
  </:footer>
</.card>
Default
Open in playground
A gray-muzzled dog in a camouflage coat and harness.

Dog Fashion Show

The next dog fashion show is coming up quickly. Here's what you need to look out for.
2023-11-15 12:24 Events 
<div style="inline-size: 20rem">
  <.card>
    <:image>
      <img
        src="https://github.com/woylie/doggo/blob/main/assets/images/dog_1.webp?raw=true"
        alt="A gray-muzzled dog in a camouflage coat and harness."
      />
    </:image>
    <:header><h2>Dog Fashion Show</h2></:header>
    <:body>
      The next dog fashion show is coming up quickly. Here's what you need
      to look out for.
    </:body>
    <:footer>
      <span>2023-11-15 12:24</span>
      <span>Events</span>
    </:footer>
  </.card>
</div>
Without image
Open in playground

Dog Fashion Show

The next dog fashion show is coming up quickly. Here's what you need to look out for.
2023-11-15 12:24 Events 
<div style="inline-size: 20rem">
  <.card>
    <:header><h2>Dog Fashion Show</h2></:header>
    <:body>
      The next dog fashion show is coming up quickly. Here's what you need
      to look out for.
    </:body>
    <:footer>
      <span>2023-11-15 12:24</span>
      <span>Events</span>
    </:footer>
  </.card>
</div>
Body only
Open in playground
The next dog fashion show is coming up quickly. Here's what you need to look out for. 
<div style="inline-size: 20rem">
  <.card>
    <:body>
      The next dog fashion show is coming up quickly. Here's what you need
      to look out for.
    </:body>
  </.card>
</div>