Sections

A section groups a titled block of content with optional actions and metadata in a consistent header layout.

Examples

Basic Section

<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.</p>
  </div>
</section>

Preview

Section inside a container

Useful to check nested spacing and cascade

Body content nested in a section.

With Actions

Place primary controls in .ro-section-actions and secondary controls in .ro-section-header-options.

<section class="ro-section">
  <header class="ro-section-header">
    <div class="ro-section-header-main">
      <div class="ro-section-title">
        <span class="ro-title-leading">
          <i class="ro-icon ro-icon-rocket ro-size-lg" aria-hidden="true"></i>
        </span>
        <div class="ro-section-title-wrapper">
          <h3 class="ro-heading ro-level-3">With actions</h3>
          <div class="ro-section-subtitle"><span>Subtitle</span></div>
        </div>
      </div>
      <div class="ro-section-actions">
        <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="Info">
          <i class="ro-icon ro-icon-info-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
        </button>
        <div class="ro-chip ro-color-scheme-success ro-size-sm">
          <span class="ro-chip-text">4</span>
        </div>
        <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="Remove">
          <i class="ro-icon ro-icon-minus-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
        </button>
        <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="Add">
          <i class="ro-icon ro-icon-plus-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="ro-section-header-options">
      <button type="button" class="ro-btn ro-size-sm ro-shape-icon ro-color-scheme-neutral ro-variant-ghost" aria-label="More">
        <i class="ro-icon ro-icon-info-circle ro-style-regular ro-size-lg" aria-hidden="true"></i>
      </button>
    </div>
  </header>
  <div class="ro-section-body">
    <p class="ro-text">Section body content.</p>
  </div>
</section>

Preview

With actions

Subtitle

4

Section body content.

Structure

Class	Description
.ro-section	Outer vertical stack for the section.
.ro-section-header	Header row with main content and options.
.ro-section-header-main	Title block and primary actions.
.ro-section-body	Main content below the header.
.ro-section-title	Title row with optional leading icon.
.ro-section-title-wrapper	Title and subtitle stack (ellipsis on overflow).
.ro-section-subtitle	Secondary text below the title.
.ro-section-actions	Primary action buttons beside the title.
.ro-section-secondary-actions	Secondary actions below primary actions in the header.
.ro-section-header-options	Controls on the right side of the header.
.ro-title-leading	Optional icon/avatar slot before the title (semantic; styles come from child components).

.ro-section-body is a semantic content slot with no dedicated styles in section.scss.

The header wraps below 1199px viewport width.