Section · ui.voila.dev

Upcoming projects

Your workspace's projects this week.

Design review — Saturday, June 14, 3:00 pm

Usage

import { Section } from "@voila.dev/ui/section";

<Section.Root>
	<Section.Header>
		<Section.Heading>
			<Section.Title>Upcoming projects</Section.Title>
			<Section.Description>This week's projects.</Section.Description>
		</Section.Heading>
		<Section.Actions>
			<Button variant="ghost" size="sm">View all</Button>
		</Section.Actions>
	</Section.Header>
	<Card.Root>…</Card.Root>
</Section.Root>

The block a page is built out of: a heading, an optional line of explanation, the actions that belong to this block rather than to the page, and then the content. It is the layer above Card — a section usually contains cards, a table or a list, and a card that has grown a title bar and a "View all" button probably wanted to be a section.

This is the application-side section. Marketing pages have their own, wider one in ui-landing, with the vertical rhythm and container widths a landing page needs.

Recipes

A section inside a section

Workspace settings

Billing

Invoices are issued on the first of the month.

Pro — $49 per seat

Section.Title renders an h2, which is right for a top-level block on a page whose h1 is the page title. When sections nest, pass render={<h3 />} so the heading outline stays honest — screen-reader users navigate by that outline, and the visual size does not change with the tag.

Section.Header is a flex row: the heading takes the space and Section.Actions sits at the end. Leave Section.Actions out entirely when there are no actions rather than rendering it empty.

API

Section.Root

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <section> prop. Source: section/components/section-root.tsx.

Section.Actions

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: section/components/section-actions.tsx.

Section.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <p> prop. Source: section/components/section-description.tsx.

Section.Header

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: section/components/section-header.tsx.

Section.Heading

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: section/components/section-heading.tsx.

Section.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <h2> prop. Source: section/components/section-title.tsx.

Card · Separator · Landing Section