Containers

A container provides a bordered, padded surface for grouping related content.

Examples

Default

<div class="ro-container">
  <p>Free content inside a container. The component only provides radius, padding, background, and border.</p>
</div>

Preview

Free content inside a container. The component only provides radius, padding, background, and border.

With Shadow

<div class="ro-container ro-shadow">
  <p>Same container with the optional <code>ro-shadow</code> class, using the same shadow token as cards.</p>
</div>

Preview

Same container with the optional ro-shadow class, using the same shadow token as cards.

With Section

Nest a Section inside a container to check nested spacing and cascade.

<div class="ro-container">
  <section class="ro-section">
    <header class="ro-section-header">
      <div class="ro-section-header-main">
        <div class="ro-section-title">
          <div class="ro-section-title-wrapper">
            <h3 class="ro-heading ro-level-3">Section inside a container</h3>
            <div class="ro-section-subtitle">Useful to check nested spacing and cascade</div>
          </div>
        </div>
      </div>
    </header>
    <div class="ro-section-body">
      <p class="ro-text">Body content nested in a section, itself nested in a container.</p>
    </div>
  </section>
</div>

Preview

Section inside a container

Useful to check nested spacing and cascade

Body content nested in a section, itself nested in a container.

Properties

Class / variable	Default	Description
.ro-container		Bordered, padded surface.
.ro-shadow	(none)	Optional box shadow (same token as cards).
--ro-container-bg		Background color.
--ro-container-border		Border color.
--ro-container-radius		Border radius.
--ro-container-padding	--ro-size-4	Inner padding.
--ro-container-shadow		Shadow when using .ro-shadow.