Layout

Section

Heading, optional description and action, and content, separated from neighbouring sections by space instead of a box.

import { Section } from '@lostgradient/cinder';
sectionheadinglayout
01

Overview

Reference usage

Section groups content under a heading with no box. It takes a heading, an optional description, an optional action aligned with the heading, and the content. Space, not a surface or a border, separates one section from the next. The content is a block, so its children never shrink inside a flex or scroll parent.

Usage

svelte 
<script lang="ts">
  import { Button, Section } from '@lostgradient/cinder';
</script>

{#snippet actions()}
  <Button size="sm" variant="secondary">See all</Button>
{/snippet}

<Section title="Upcoming" description="Next seven days" {actions}>
  <p>Nothing scheduled.</p>
</Section>
Live preview

A heading, an action and content

Upcoming

The next seven days

Two bars and a rooftop are open late on Friday.

Saved

Nothing saved yet.

02

When to use

Use when
  • Grouping content under a heading on a page or in a panel without drawing a boxed surface around it.
  • Pairing a heading with an action such as "Add" or "See all" above a list.
Avoid when
  • The content needs its own raised surface or an edge — use card.
  • Introducing a whole page with eyebrow label and tabs — use section-heading.
03

Examples

A heading, an action and content

A section is a heading with an optional description and action, then its content. Space separates it from the next section; nothing is boxed.

A tall section keeps every child

The content is a block, so children that clip their overflow are never squeezed inside a flex or scroll parent.

04

Props

Props for section
Name
Type
Default
Description
title required text The section's heading text.
description text Supporting line under the heading, in muted text.
level 23456 2 Heading level of the title. Pick the level that fits the page outline.
actions snippet Controls aligned with the heading, such as an "Add" or "See all" button. They never make the header taller than its title.
children snippet The section's content. Children never shrink inside a flex or scroll parent.