Acronis UIKit
Layouts

Section

A titled content block with header, description, and content.

Usage

import {
  Section,
  SectionHeader,
  SectionTitle,
  SectionDescription,
  SectionContent,
} from '@acronis-platform/ui-react';

Section is a titled content block — a <section> with an optional header (SectionTitle + SectionDescription) and a SectionContent body. The title is an <h2>; the description is muted.

Design-pending v1, ported 1:1 from the legacy shadcn-uikit section.

Examples

<Section>
  <SectionHeader>
    <SectionTitle>Backup plans</SectionTitle>
    <SectionDescription>Manage how your workloads are backed up.</SectionDescription>
  </SectionHeader>
  <SectionContent>{children}</SectionContent>
</Section>

API Reference

Section, SectionHeader, SectionTitle, SectionDescription, and SectionContent accept their native element attributes plus className.

Edit on GitHub

On this page