Cards

The card is a flexible container used to group related content in a bounded section. It supports media, headers, body text, footers, and interactive states.

Examples

Basic Card

Use .ro-card with .ro-card-content, .ro-card-header, .ro-card-body, and .ro-card-footer to structure content.

<article class="ro-card">
  <div class="ro-card-content">
    <header class="ro-card-header">
      <div class="ro-card-header-content">
        <h4 class="ro-card-title">Card Title</h4>
        <p class="ro-card-subtitle">Card Subtitle</p>
      </div>
    </header>
    <p class="ro-card-body">
      This is the card body. It contains the main content.
    </p>
    <footer class="ro-card-footer">
      <button class="ro-btn ro-color-scheme-product">Action</button>
    </footer>
  </div>
</article>

Preview

Card Title

Card Subtitle

This is the card body. It contains the main content.

Action

Card with Media

Wrap images in .ro-card-media. Set size with .ro-size-sm, .ro-size-md, or .ro-size-lg.

<article class="ro-card">
  <div class="ro-card-media ro-size-md">
    <img src="https://placehold.co/600x400" alt="Sample" />
  </div>
  <div class="ro-card-content">
    <header class="ro-card-header">
      <div class="ro-card-header-content">
        <h4 class="ro-card-title">Card with Image</h4>
      </div>
    </header>
    <p class="ro-card-body">Media adapts to vertical or horizontal layout.</p>
  </div>
</article>

Preview

Card with Image

Media adapts to vertical or horizontal layout.

Horizontal Layout

Add .ro-dir-horizontal to place media beside content. On narrow viewports the layout stacks automatically.

<article class="ro-card ro-dir-horizontal">
  <div class="ro-card-media ro-size-sm">
    <img src="https://placehold.co/200x300" alt="Sample" />
  </div>
  <div class="ro-card-content">
    <header class="ro-card-header">
      <div class="ro-card-header-content">
        <h4 class="ro-card-title">Horizontal Card</h4>
        <p class="ro-card-subtitle">Side-by-side media</p>
      </div>
    </header>
    <p class="ro-card-body">Content flows next to the media column.</p>
  </div>
</article>

Preview

Horizontal Card

Side-by-side media

Content flows next to the media column.

Ghost Variant

Use .ro-variant-ghost for a transparent border and a light hover background.

<article class="ro-card ro-variant-ghost">
  <div class="ro-card-content">
    <h4 class="ro-card-title">Ghost Card</h4>
    <p class="ro-card-body">Subtle container on busy backgrounds.</p>
  </div>
</article>

Preview

Ghost Card

Subtle container on busy backgrounds.

Clickable and Active States

Add .ro-clickable for hover feedback (shadow, background, border change, and reveals .ro-card-show-button). Add .active to mark a selected card (accent border).

<article class="ro-card ro-clickable">
  <div class="ro-card-content">
    <h4 class="ro-card-title">Clickable</h4>
    <p class="ro-card-body">Hover to see the shadow effect.</p>
  </div>
</article>

<article class="ro-card active">
  <div class="ro-card-content">
    <h4 class="ro-card-title">Active</h4>
    <p class="ro-card-body">Selected state with accent border.</p>
  </div>
</article>

Preview

Clickable

Hover to see the shadow effect.

Active

Selected state with accent border.

---

Deprecated Variants

The card API was redesigned in @ringover/styles v3.20.0. The following modifiers are no longer shipped and should be removed from markup:

• Colored shadows: .ro-shadow-product, .ro-shadow-info, .ro-shadow-success, .ro-shadow-warning, .ro-shadow-danger
• Background utilities: .ro-bg-* on cards
• Colored borders: .ro-border-product, .ro-border-danger, and other semantic border colors
• Floating action: .ro-card-btn

See the Migration guide for before/after patterns.

Properties

Class	Default	Description
.ro-card	—	Root container with border, radius, and padding.
.ro-card-media	—	Media slot; .ro-size-sm (140px), .ro-size-md (200px), .ro-size-lg (260px).
.ro-card-content	—	Main content column (header, body, footer).
.ro-card-top-header, .ro-card-top-header-content, .ro-card-top-header-trailing	—	Top bar spanning the content column in horizontal layout.
.ro-card-header, .ro-card-header-content, .ro-card-header-leading, .ro-card-header-trailing	—	In-content header row and side slots.
.ro-card-footer	—	Footer row.
.ro-card-title, .ro-card-subtitle, .ro-card-body	—	Semantic typography regions (no dedicated title styles on .ro-card-title).
.ro-dir-horizontal, .ro-dir-vertical	vertical	Grid layout; horizontal stacks below 600px.
.ro-variant-ghost	default	Transparent border; light hover background; no shadow on hover.
.ro-clickable	(none)	Pointer cursor, hover shadow/bg/border; reveals .ro-card-show-button.
.ro-card-show-button	hidden	Centered overlay button; visible on .ro-clickable:hover.
.active	(none)	Selected state with accent border.
.ro-card-img	—	Legacy image helper inside media; prefer .ro-card-media.