Layout

Section gives a page section its vertical rhythm (space-16 on desktop, space-12 on phones), an optional surface and a container. Container caps content at container-max (1160px) with the space-5 gutter (space-4 on phones), or at text-measure for running text.

A dark section followed by a light sectionDark · Grafite

Como trabalhamos

Uma seção escura

Seções alternam entre escuro e claro para separar assuntos, sem caixas em volta.

Conteúdo com até 65 caracteres por linha, alinhado à esquerda, dentro do container.

Serviços

Uma seção clara

A mesma estrutura sobre a superfície clara (theme-light), com largura de texto (width="text").

Usage

Do

• Alternate dark and light sections to separate topics.
• Left-align text; center only short calls to action.
• Cap running text at text-measure (width="text" or mb-prose).
• Name each section with aria-labelledby pointing at its heading.

Don't

• Draw boxes around sections to separate them.
• Make the light theme the main look of a page.

Helpers

Class	Use
mb-container, mb-container--text	Content width and page gutter
mb-section	Section padding
mb-prose	Long-form text from Markdown: headings from the type scale, list markers in symbol, links in link
mb-stack	Vertical stack with space-4 gaps
mb-row	Wrapping row with space-3 gaps
mb-measure	Max width text-measure
mb-root	Brand typography for a region (put it on <body>)
mb-skip-link, mb-sr-only	Skip link and visually hidden text

Astro

---
import Container from '@monk-business/astro/Container.astro';
import Section from '@monk-business/astro/Section.astro';
---

<Section aria-labelledby="processo">…</Section>
<Section tone="light" width="text" aria-labelledby="servicos">…</Section>
<Container as="main" width="text" class="mb-prose">…</Container>

HTML

<section class="mb-section theme-light" aria-labelledby="servicos">
  <div class="mb-container">…</div>
</section>

Props

Section props · also accepts the attributes of <section>

Prop	Type	Default	Description
tone	'dark'| 'light'	—	Surface: light adds theme-light, dark adds theme-dark. Leave unset to inherit (dark by default).
width	'container'| 'text'| 'full'	'container'	Content width: container (container-max), text (text-measure) or full (no container).
as	'section'| 'div'| 'aside'| 'article'	'section'	Element to render. Give a section an accessible name with aria-labelledby.

* required.

Container props · also accepts the attributes of <div>

Prop	Type	Default	Description
as	'div'| 'main'| 'header'| 'footer'| 'article'| 'section'	'div'	Element to render.
width	'container'| 'text'	'container'	container caps at container-max (1160px); text caps at text-measure (65ch) for running text.

* required.