x
1
2
3
4
5
6
7
8
9
10
<div class="space-y-4"> <p class="text-xs font-normal text-foreground">Extra Small (xs) — The quick brown fox</p> <p class="text-sm font-normal text-foreground">Small (sm) — The quick brown fox</p> <p class="text-base font-normal text-foreground">Base — The quick brown fox</p> <p class="text-lg font-normal text-foreground">Large (lg) — The quick brown fox</p> <p class="text-xl font-normal text-foreground">Extra Large (xl) — The quick brown fox</p> <p class="text-2xl font-normal text-foreground">2XL — The quick brown fox</p> <p class="text-3xl font-normal text-foreground">3XL — The quick brown fox</p> <p class="text-4xl font-normal text-foreground">4XL — The quick brown fox</p></div>1
2
3
4
5
6
7
8
9
10
<div class="space-y-4"> <%= render(UI::Text.new(size: :xs)) { "Extra Small (xs) — The quick brown fox" } %> <%= render(UI::Text.new(size: :sm)) { "Small (sm) — The quick brown fox" } %> <%= render(UI::Text.new(size: :base)) { "Base — The quick brown fox" } %> <%= render(UI::Text.new(size: :lg)) { "Large (lg) — The quick brown fox" } %> <%= render(UI::Text.new(size: :xl)) { "Extra Large (xl) — The quick brown fox" } %> <%= render(UI::Text.new(size: :"2xl")) { "2XL — The quick brown fox" } %> <%= render(UI::Text.new(size: :"3xl")) { "3XL — The quick brown fox" } %> <%= render(UI::Text.new(size: :"4xl")) { "4XL — The quick brown fox" } %></div>No notes provided.
No params configured.