component :: Card

Playground

<article class="card">
<header class="card_header">
  <div class="card_header_text">
    <h2 class="card_title">Card title</h2>
    <p>Category</p>
  </div>
</header>
<section class="card_content">
  <p>This is where the content goes!</p>
</section>
</article>

HTML

<ul class="tiles">
  <li>
    <article class="card">
      <figure class="card_media card_media-flush">
        <img class="card_image" src="cover.jpg" alt="" loading="lazy" />
      </figure>
      <nav aria-label="Tags">
        <ul class="tags tags-inline card_tags">
          <li><a href="/blog/tags/css">css</a></li>
        </ul>
      </nav>
      <header class="card_header">
        <div class="card_header_text">
          <h3 class="card_title">
            <a class="card_link" href="/blog/my-post"
              >Designing with cascade layers</a
            >
          </h3>
        </div>
      </header>
      <div class="card_content">
        <p>Why layer order beats specificity wars.</p>
      </div>
      <footer class="card_byline">
        <!-- avatar markup, see the Avatar docs -->
        <div>
          <span class="card_author">Sonny Rollins</span>
          <time datetime="2026-05-02">May 2, 2026</time>
        </div>
      </footer>
    </article>
  </li>
</ul>

Astro component

<Fragment slot="actions">
  <a class="bt bt-text" href="/home">Cancel</a>
  <button class="bt bt-primary">Add to Cart</button>
</Fragment>

<Card
  title="A card with too many badges"
  badges={[
    { label: "Way", color: "#a6b65a" },
    { label: "Too", color: "#86615c" },
    { label: "Many", color: "#81a598" },
    { label: "Badges", color: "#e3863d" },
  ]}
>
  <p>This is where the content goes. Unless you only want a bunch of badges!</p>
</Card>

Examples

• Blog-index pattern

  • 

    Designing with cascade layers

    Why layer order beats specificity wars, and how mCSS hands the final word to your unlayered CSS.

  • 

    Tokens all the way down

    One file of custom properties is the whole theming story.

  ---
  import Card from '../components/Card.astro';
  import Tiles from '../components/Tiles.astro';
  ---
  <Tiles>
    <li>
      <Card
        href="/blog/my-post"
        headingLevel={3}
        flushImage
        imageSrc={cover}
        title="Designing with cascade layers"
        tags={["css", "learn"]}
        author="Sonny Rollins"
        date={new Date("2026-05-02")}
      >
        <p>Why layer order beats specificity wars.</p>
      </Card>
    </li>
  </Tiles>

• Card with image and actions

  Product Name

  Category

  

  This is a extremely detailed description of the product.

  ---
  import placeholder from "../../assets/images/image.png";
  import Card from '../../components/Card.astro';
  ---
  <Card
    variant="raised"
    href="/product/123"
    title="Product Name"
    subtitle="Category"
    imageSrc={placeholder}
    imageAlt="Product image"
    aspectRatio="widescreen"
  >
    <p>This is a extremely detailed description of the product.</p>
    <Fragment slot="actions">
      <a class="bt bt-md bt-text " href="/details">
        View Details
      </a>
      <button class="bt bt-md bt-primary">Add to Cart</button>
    </Fragment>
  </Card>

• Loading state

  

  This is what the card looks like without the isLoading prop.

  ---
  import placeholder from "../../assets/images/image.png";
  import Card from '../../components/Card.astro';
  ---
  <Card imageSrc={placeholder} imageAlt="Product image" isLoading>
    <p>This is what the card looks like without the `isLoading` prop.</p>
  </Card>

• Disabled state

  

  With the isDisabled prop, the link doesn’t work anymore.

  

  Witout the isDisabled prop, the link is clickable.

  ---
  import placeholder from "../../assets/images/image.png";
  import Card from '../../components/Card.astro';
  ---
  <Card
    href="/product/123"
    imageSrc={placeholder}
    imageAlt="Product image"
    isDisabled
  >
    <p>With the `isDisabled` prop, the link doesn't work anymore.</p>
  </Card>

• HTML example

  Product Name

  Category

  new

  

  This is a extremely detailed description of the product.

  <article class="card card-raised" style="--card-aspect-ratio: var(--ar-golden)">
    <header class="card_header">
      <div class="card_header_text">
        <h2 class="card_title">
          <a class="card_link" href="/product/123">Product Name</a>
        </h2>
        <p>Category</p>
      </div>
      <div class="card_badges"><span class="badge card_badge">new</span></div>
    </header>
    <figure class="card_media">
      <img
        class="card_image"
        src="image.jpg"
        alt="Product image"
        loading="lazy"
        decoding="async"
      />
    </figure>
    <section class="card_content">
      <p>This is a extremely detailed description of the product.</p>
    </section>
    <footer class="card_actions">
      <a class="bt bt-text" href="/details">View Details</a>
      <button class="bt bt-primary">Add to Cart</button>
    </footer>
  </article>