COMPONENTS

Card patterns

Extend the existing card class with native header, figure and footer elements. No extra classes are needed for the card's structural sections.

Usage

Markup: .card with header, figure and footer

Behaviour: The components bundle includes the card surface and these patterns.

Use article for self-contained content or section with an appropriate heading for a page section. Heading levels should fit the surrounding document.
Header and footer separators follow shared borders and density. Native media keeps its responsive sizing and meaningful alternative text. Existing row and grid classes arrange actions or multiple cards.
Theme, shape, depth, density and optional glass material belong to the existing card. The new module adds structure without replacing its surface styling.

Component API and styling module · Inherited appearance settings

Header, content and actions

Native elements identify the structural sections of the card.

Project overview

New RevaCSS documentation

Start with inherited page defaults, then add only local exceptions.

<article class="card">
  <header>
    <h3>Project overview</h3>
    <p><span class="badge">New</span> RevaCSS documentation</p>
  </header>
  <p>Start with inherited page defaults, then add only local exceptions.</p>
  <footer class="row">
    <a class="button" href="/RevaCSS/guide/">Read the guide</a>
    <a href="/RevaCSS/attributes/">View defaults</a>
  </footer>
</article>

A media card

Intrinsic image dimensions reserve its natural space. The figure adds a visible caption.

Illustrated hills beneath a pale sky — A quiet landscape

Explore the possibilities

Native content and responsive media share the same surface.

<article class="card">
  <figure>
    <img src="/RevaCSS/images/example-landscape.svg" width="640" height="360"
         alt="Illustrated hills beneath a pale sky">
    <figcaption>A quiet landscape</figcaption>
  </figure>
  <h3>Explore the possibilities</h3>
  <p>Native content and responsive media share the same surface.</p>
  <footer><a href="/RevaCSS/components/media/">Explore media styling</a></footer>
</article>

Shared glass material

Only the enclosing section needs theme and material settings.

Frosted account summary

A native header and footer follow the inherited card surface.

<section data-theme="dark" data-material="glass" data-shape="rounded">
  <article class="card">
    <header><h3>Frosted account summary</h3></header>
    <p>A native header and footer follow the inherited card surface.</p>
    <footer><a href="/RevaCSS/themes/glass/">Explore glass material</a></footer>
  </article>
</section>