Box, Inline, Paragraph

Tiny structural primitives that replace raw `<div>`, `<span>`, and `<p>` in design-system code. Identical to the native tags at runtime — no default styling — they exist as a convention: a single, greppable way to compose layout across the package and its consumers.

Box

Block-level container — renders a `<div>`. Use for layout: flex / grid wrappers, padded cards, sections, anywhere you'd reach for `<div className=…>`.

Box A

Box B

Box C

Inline

Inline container — renders a `<span>`. Use for inline content: status pills, badge fragments, icon wrappers next to text, decorative spans inside a sentence.

Status atual: Disponível

Paragraph

Renders a `<p>`. Use for body copy, descriptions, helper text under inputs, captions.

Apartamento 302

Cobertura duplex com 3 suítes, varanda gourmet e duas vagas.

Composition example

A typical Morada card uses all three together.

Apartamento 302

Endereço: Rua Augusta, 1200 — São Paulo, SP

Disponível

Cobertura duplex com 3 suítes, varanda gourmet e duas vagas.

When to keep native HTML

These primitives are not a replacement for semantic HTML. Keep `<h1>`–`<h6>` (use `Heading` for typography), `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`, `<ul>` / `<li>`, `<table>`, `<form>`, `<button>` — they carry document-outline and landmark semantics that wrapping in `Box` would erase.