Card

Cards are used to display content in a list-like format. They are often used to display a collection of items, such as blog posts, products, or other types of content.

Lorem ipsum dolor sit amet

Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.

Astro

<Card>
  <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
    <Fragment set:html={clock} />
  </div>
  <div class="flex flex-col gap-8">
    <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
    <p class="text-sm">Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.</p>
  </div>
</Card>

Compiled

<article class="flex flex-col gap-24 items-start">
  <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>
  </div>
  <div class="flex flex-col gap-8">
    <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
    <p class="text-sm">
      Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.
    </p>
  </div>
</article>

API Reference

This component is based on the <article> element and can take in any additional HTML attributes. The following are the custom props that can be passed to the component.

Prop	Type	Default
align The alignment of the content inside the card.	"left" | "center"	"left"

Examples

Centered

Lorem ipsum dolor sit amet

Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.

Astro

<Card align="center">
  <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
    <Fragment set:html={clock} />
  </div>
  <div class="flex flex-col gap-8">
    <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
    <p class="text-sm">Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.</p>
  </div>
</Card>

Compiled

<article class="flex flex-col gap-24 items-center text-center">
  <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>
  </div>
  <div class="flex flex-col gap-8">
    <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
    <p class="text-sm">
      Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.
    </p>
  </div>
</article>

Astro Component

Depending on the framework, it’s sometimes beneficial to use a component for generating the Card. In this case, we have put together the following Astro component to serve as a blueprint for how you could possibly set up a Card component, and what properties to consider.

Card.astro

---
import type { HTMLAttributes } from 'astro/types'

interface Props extends HTMLAttributes<'article'> {
  /**
    The alignment of the content inside the card.
  */
  align?: 'left' | 'center'
}

const { align = 'left', class: className, ...attrs } = Astro.props
---

<article
  class:list={[
    'flex flex-col gap-24',
    {
      'items-start': align === 'left',
      'items-center text-center': align === 'center',
    },
    className,
  ]}
  {...attrs}
>
  <slot />
</article>