x
1
2
3
4
5
6
7
<div class="max-w-xl space-y-4"> <p class="text-xl font-normal text-muted-foreground">Lead: an introduction that sets up the page in a sentence or two.</p> <div class="text-lg font-semibold text-foreground">Large: a line that needs a little more weight.</div> <p class="text-base font-normal text-foreground">Body text, for most of what a page says.</p> <p class="text-sm font-normal text-muted-foreground">Muted: secondary detail, like a caption or a hint.</p> <small class="text-xs font-medium text-foreground">Small: a label or fine print.</small></div>1
2
3
4
5
6
7
<div class="max-w-xl space-y-4"> <%= render(UI::Typography::Lead.new) { "Lead: an introduction that sets up the page in a sentence or two." } %> <%= render(UI::Typography::Large.new) { "Large: a line that needs a little more weight." } %> <%= render(UI::Text.new) { "Body text, for most of what a page says." } %> <%= render(UI::Typography::Muted.new) { "Muted: secondary detail, like a caption or a hint." } %> <%= render(UI::Typography::Small.new) { "Small: a label or fine print." } %></div>No notes provided.
No params configured.