# VelvetKit

## Typography (`UI::Typography::*`)

Headings, lead, muted, code and blockquote text styles.

Add it: `bin/rails generate velvetkit:add typography`

Also adds: `text`

### Example: Headings

```erb
<div class="space-y-4">
  <%= render(UI::Typography::H1.new) { "Heading 1" } %>
  <%= render(UI::Typography::H2.new) { "Heading 2" } %>
  <%= render(UI::Typography::H3.new) { "Heading 3" } %>
  <%= render(UI::Typography::H4.new) { "Heading 4" } %>
</div>
```

### Example: Text styles

```erb
<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>
```

### Example: Code and quotes

```erb
<div class="max-w-xl space-y-6">
  <%= render(UI::Text.new) do %>
    Run <%= render(UI::Typography::Code.new) { "bin/rails generate velvetkit:add dialog" } %> to add a dialog.
  <% end %>
  <%= render(UI::Typography::Blockquote.new) { "Good components disappear: you notice the work, not the widgets." } %>
</div>
```

### Example: An article

```erb
<article class="max-w-2xl space-y-4">
  <%= render(UI::Typography::H2.new) { "Release notes" } %>
  <%= render(UI::Typography::Lead.new) { "This month's update makes reports faster to build and easier to share." } %>
  <%= render(UI::Typography::H3.new) { "What changed" } %>
  <%= render(UI::Text.new) do %>
    Reports now load in under a second, and you can share one with a link. Owners can still limit sharing from
    <%= render(UI::Typography::Code.new) { "Settings › Sharing" } %>.
  <% end %>
  <%= render(UI::Typography::Blockquote.new) { "We asked for faster reports and got them the same month." } %>
  <%= render(UI::Typography::Muted.new) { "Published 21 October" } %>
</article>
```