Doggo Storybook 0.10.2

Card

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

Read more Read less

Usage

<.card>
  <:image>
    <img src="image.png" alt="Picture of a dog dressed in a poncho." />
  </:image>
  <:header><h2>Dog Fashion Show</h2></:header>
  <:main>
    The next dog fashion show is coming up quickly. Here's what you need
    to look out for.
  </:main>
  <:footer>
    <span>2023-11-15 12:24</span>
    <span>Events</span>
  </:footer>
</.card>
A dog wearing a colorful poncho walks down a fashion show runway.

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
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
rest :global

Any additional HTML attributes.
footer :slot

A footer of the card, typically containing controls, tags, or meta information.

 
<:footer>
  <span>2023-11-15 12:24</span>
  <span>Events</span>
</:footer>
header :slot

The header of the card. You typically want to wrap the header in a h2 or h3 tag, or another header level, depending on the hierarchy on the page.

 
<:header><h2>Dog Fashion Show</h2></:header>
image :slot

An optional image slot. The slot content will be rendered within a figure element.

 
<:image>
  <img
    src="https://github.com/woylie/doggo/blob/main/assets/dog_poncho.jpg?raw=true"
    alt="A dog wearing a colorful poncho walks down a fashion show runway."
  />
</:image>
main :slot

The main content of the card.

 
<:main>
  The next dog fashion show is coming up quickly. Here's what you need
  to look out for.
</:main>