Cards

The card is a flexible container used to group related content in a bounded section. It can hold text, images, and actions.

Examples

Basic Card

Use the .ro-card class as the main container. You can nest elements like .ro-card-header, .ro-card-body, and .ro-card-footer to structure your content.

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

Preview

Card Title

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

Action

Clickable Card

Add the .ro-clickable class to provide visual feedback on hover, indicating the card can be interacted with.

<div class="ro-card ro-clickable">
<div class="ro-card-body">
  <h4>Clickable Card</h4>
  <p>
    Hover over me to see the shadow effect.
  </p>
</div>
</div>

Preview

Clickable Card

Hover over me to see the shadow effect.

Action Button

Use the .ro-card-btn class to place a floating action button at the top-right corner of the card. This is typically used for contextual actions.

<div class="ro-card ro-clickable ro-border">
<button class="ro-btn ro-card-btn ro-shape-icon ro-size-sm">
  <i class="ro-icon ro-icon-dot-vertical"></i>
</button>
<div class="ro-card-body">
  <h4>Card with Action</h4>
  <p>
    This card has a floating action button.
  </p>
</div>
</div>

Preview

Card with Action

This card has a floating action button.

Border Variants

Combine .ro-border with a color class like .ro-border-product to add a colored border.

<div class="ro-stack">
  <div class="ro-card ro-border ro-border-product">
    <div class="ro-card-body">
      Card with a product border
    </div>
  </div>
  <div class="ro-card ro-border ro-border-danger">
    <div class="ro-card-body">
      Card with a danger border
    </div>
  </div>
</div>

Preview

Card with a product border

Card with a danger border

Shadow Variants

Apply a colored shadow effect using .ro-shadow-* classes. These are often used on clickable cards to enhance the hover effect.

<div class="ro-stack">
  <div class="ro-card ro-clickable ro-shadow-product">
    <div class="ro-card-body">
      Card with a product shadow
    </div>
  </div>
  <div class="ro-card ro-clickable ro-shadow-info">
    <div class="ro-card-body">
      Card with a info shadow
    </div>
  </div>
  <div class="ro-card ro-clickable ro-shadow-success">
    <div class="ro-card-body">
      Card with a success shadow
    </div>
  </div>
  <div class="ro-card ro-clickable ro-shadow-warning">
    <div class="ro-card-body">
      Card with a warning shadow
    </div>
  </div>
  <div class="ro-card ro-clickable ro-shadow-danger">
    <div class="ro-card-body">
      Card with a danger shadow
    </div>
  </div>
</div>

Preview

Card with a product shadow

Card with a info shadow

Card with a success shadow

Card with a warning shadow

Card with a danger shadow

Cards with Images

Images can be added using the .ro-card-img class. The image will automatically adapt its dimensions based on the card’s orientation.

<div class="ro-card ro-border">
<img
  class="ro-card-img"
  src="https://placehold.co/200x100"
  alt="Sample image"
  width="200"
  height="100"
/>
<div class="ro-card-body">
  <h4>Card with Image</h4>
  <p>Images automatically adapt to the card layout.</p>
</div>
</div>

<div class="ro-card ro-border ro-dir-horizontal">
<img
  class="ro-card-img"
  src="https://placehold.co/200x100"
  alt="Sample image"
  width="200"
  height="100"
/>
<div class="ro-card-body">
  <h4>Horizontal Card with Image</h4>
  <p>The image adjusts its height to match the card when in horizontal layout.</p>
</div>
</div>

Preview

Card with Image

Images automatically adapt to the card layout.

Horizontal Card with Image

The image adjusts its height to match the card when in horizontal layout.

Properties

Card variants are controlled via utility classes.

Modifier Class	Default Value	Description
.ro-dir-horizontal	column	Aligns the card’s children on a horizontal axis (row).
.ro-padding-*	md (--ro-size-5)	Modifies the internal spacing (padding). Options: 0, xs, sm, lg, xl.
.ro-gap-*	4 (--ro-size-4)	Adjusts the gap between child elements. Options: 0 to 6.
.ro-clickable	(none)	Adds a “pointer” cursor and a hover shadow to indicate the card is clickable.
.ro-card-btn	(none)	Styles a button as a top-right floating action inside the card.
.ro-border	none	Adds a 1px border to the card.
.ro-border-*	(none)	Modifies the border color. Options: product, product-light, danger. Deprecated: info, success, warning.
.ro-shadow-*	none	Applies a predefined shadow. Options: product, info, success, warning, danger.
.ro-bg-*	(none)	Changes the background color. Options: product, info, success, warning, danger, grey-light, grey-dark, translucent.
.ro-radius-*	md	Modifies border radius. Options: sm, lg, xl.
.ro-align-*	initial	Aligns card content. Options: start, center, end.
.ro-nowrap	wrap	Prevents card content from wrapping.

Header and Footer Properties

The .ro-card-header and .ro-card-footer sections support additional alignment classes:

Modifier Class	Default Value	Description
.ro-justify-*	space-between	Controls horizontal alignment. Options: start, center, end.
.ro-align-*	center	Controls vertical alignment. Options: start, center, end.

Image Properties

When using images in cards:

Modifier Class	Default Value	Description
.ro-card-img	(none)	Base class for card images.
.ro-img-radius-0	Inherits card radius	Removes border radius from the image.