Typography
UI::Typography::*Headings, lead, muted, code and blockquote text styles.
# 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>
```
bin/rails generate velvetkit:add typography- Also adds
- Text
- Stimulus
- None, it's server-rendered
- Installs
- Nothing
Examples
Headings
Heading 1
Heading 2
Heading 3
Heading 4
headings.html.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>Text styles
Lead: an introduction that sets up the page in a sentence or two.
Large: a line that needs a little more weight.
Body text, for most of what a page says.
Muted: secondary detail, like a caption or a hint.
Small: a label or fine print.
text_styles.html.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>Code and quotes
Run bin/rails generate velvetkit:add dialog
to add a dialog.
Good components disappear: you notice the work, not the widgets.
code_and_quotes.html.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>An article
Release notes
This month's update makes reports faster to build and easier to share.
What changed
Reports now load in under a second, and you can share one with a link. Owners can still limit sharing from
Settings › Sharing
.
We asked for faster reports and got them the same month.
Published 21 October
article.html.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>