Content
Typography
Fonts and ready-to-use typography patterns.
Fonts
Tip: To change fonts, you'll need to reference new them in both app/views/rui/shared/_fonts.html.erb and app/assets/stylesheets/railsui/theme.css.
Headings
A quick brown fox jumps over
the lazy dog.
h1
A quick brown fox jumps over the lazy dog.
h2
A quick brown fox jumps over the lazy dog.
h3
A quick brown fox jumps over the lazy dog.
h4
A quick brown fox jumps over the lazy dog.
h5
A quick brown fox jumps over the lazy dog.
h6
<h1 class="h1">A quick brown fox jumps over the lazy dog.</h1>
<h2 class="h2">A quick brown fox jumps over the lazy dog.</h2>
<h3 class="h3">A quick brown fox jumps over the lazy dog.</h3>
<h4 class="h4">A quick brown fox jumps over the lazy dog.</h4>
<h5 class="h5">A quick brown fox jumps over the lazy dog.</h5>
<h6 class="h6">A quick brown fox jumps over the lazy dog.</h6><%= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "h1" %>
<%= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "h2" %>
<%= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "h3" %>
<%= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "h4" %>
<%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "h5" %>
<%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "h6" %>%h1.h1 A quick brown fox jumps over the lazy dog.
%h2.h2 A quick brown fox jumps over the lazy dog.
%h3.h3 A quick brown fox jumps over the lazy dog.
%h4.h4 A quick brown fox jumps over the lazy dog.
%h5.h5 A quick brown fox jumps over the lazy dog.
%h6.h6 A quick brown fox jumps over the lazy dog.Responsive heading design
Change heading sizes relative to viewports with Tailwind CSS responsive utilities.
<h1 class="md:h1 h2">My sample title</h1>Display headings
A quick brown fox jumps over the lazy dog.
h1
A quick brown fox jumps over the lazy dog.
h2
A quick brown fox jumps over the lazy dog.
h3
A quick brown fox jumps over the lazy dog.
h4
A quick brown fox jumps over the lazy dog.
h5
A quick brown fox jumps over the lazy dog.
h6
<h1 class="display-1">A quick brown fox jumps over the lazy dog.</h1>
<h2 class="display-2">A quick brown fox jumps over the lazy dog.</h2>
<h3 class="display-3">A quick brown fox jumps over the lazy dog.</h3>
<h4 class="display-4">A quick brown fox jumps over the lazy dog.</h4>
<h5 class="display-5">A quick brown fox jumps over the lazy dog.</h5>
<h6 class="display-6">A quick brown fox jumps over the lazy dog.</h6><%= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "display-1" %>
<%= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "display-2" %>
<%= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "display-3" %>
<%= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "display-4" %>
<%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "display-5" %>
<%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "display-6" %>%h1.display-1 A quick brown fox jumps over the lazy dog.
%h2.display-2 A quick brown fox jumps over the lazy dog.
%h3.display-3 A quick brown fox jumps over the lazy dog.
%h4.display-4 A quick brown fox jumps over the lazy dog.
%h5.display-5 A quick brown fox jumps over the lazy dog.
%h6.display-6 A quick brown fox jumps over the lazy dog.Blockquote
A well-known quote, contained in a blockquote element.
<figure class="pl-6 border-l-2 border-primary-500 py-1">
<blockquote class="text-xl font-light mb-1 text-slate-800 dark:text-slate-100">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="text-slate-500 text-sm dark:text-slate-300">Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure><% tag.figure class: "pl-6 border-l-2 border-primary-500 py-1" do %>
<%= tag.blockquote class: "text-xl font-light mb-1 text-slate-800 dark:text-slate-100" do %>
<%= tag.p "A well-known quote, contained in a blockquote element." %>
<% end %>
<%= tag.figcaption class: "text-slate-500 text-sm dark:text-slate-300" do %>
Someone famous in
<%= tag.cite "Source Title", title: "Source Title" %>
<% end %>
<% end %>%figure.pl-6.border-l-2.border-primary-500.py-1
%blockquote.text-xl.font-light.mb-1.text-slate-800.dark:text-slate-100
%p A well-known quote, contained in a blockquote element.
%figcaption.text-slate-500.text-sm.dark:text-slate-300
Someone famous in
%cite(title="Source Title") Source TitleLists
Standard
- A quick brown
- fox jumps over
- the lazy dog
Unstyled
- A quick brown
- fox jumps over
- the lazy dog
Decimal
- A quick brown
- fox jumps over
- the lazy dog
<ul class="list-disc">
<li>A quick brown</li>
<li>fox jumps over</li>
<li>the lazy dog</li>
</ul>
<!--Reset-->
<ul class="list-reset">
<li>A quick brown</li>
<li>fox jumps over</li>
<li>the lazy dog</li>
</ul>
<!--Decimal-->
<ol class="list-decimal">
<li>A quick brown</li>
<li>fox jumps over</li>
<li>the lazy dog</li>
</ol><!--Standard-->
<%= tag.ul class:"list-disc" do %>
<%= tag.li "A quick brown" %>
<%= tag.li "fox jumps over" %>
<%= tag.li "the lazy dog" %>
<% end %>
<!--reset-->
<%= tag.ul class:"list-reset" do %>
<%= tag.li "A quick brown" %>
<%= tag.li "fox jumps over" %>
<%= tag.li "the lazy dog" %>
<% end %>
<!--Decimal-->
<%= tag.ol class:"list-decimal" do %>
<%= tag.li "A quick brown" %>
<%= tag.li "fox jumps over" %>
<%= tag.li "the lazy dog" %>
<% end %>%ul.list-disc
%li A quick brown
%li fox jumps over
%li the lazy dog
/ Reset
%ul.list-reset
%li A quick brown
%li fox jumps over
%li the lazy dog
/ Decimal
%ol.list-decimal
%li A quick brown
%li fox jumps over
%li the lazy dogLead paragraph
This is a lead paragraph. It stands out from regular paragraphs.
<div class="font-light text-lg text-slate-700 tracking-normal dark:text-slate-300">
<p>A lead paragraph stands out from regular paragraphs.</p>
</div><%= tag.div class: "font-light text-base text-slate-700 tracking-normal dark:text-slate-300" do %>
<%= tag.p "A lead paragraph stands out from regular paragraphs.", class: "lead" %>
<% end %>.font-light.text-base.text-slate-700.tracking-normal.dark:text-slate-300
%p A lead paragraph stands out from regular paragraphs.Paragraphs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo nisi distinctio neque veniam aliquam debitis architecto quaerat. Temporibus, similique dolor quia voluptates maiores in placeat laborum deleniti ratione officiis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure non velit dignissimos laudantium modi at, eum officiis ipsam, illo vitae omnis nam, ut nisi alias odio magni qui nostrum.
Id velit dolorum fugit, beatae unde sint saepe rerum impedit nihil deleniti recusandae quam amet nesciunt, eveniet maiores?
Id velit dolorum fugit, beatae unde sint saepe rerum impedit nihil deleniti recusandae quam amet nesciunt, eveniet maiores?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo nisi distinctio neque veniam aliquam debitis architecto quaerat. Temporibus, similique dolor quia voluptates maiores in placeat laborum deleniti ratione officiis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure non velit dignissimos laudantium modi at, eum officiis ipsam, illo vitae omnis nam, ut nisi alias odio magni qui nostrum.
Inline formatting
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p><%= tag.p "You can use the mark tag to #{tag.mark 'highlight'} text." %>
<%= tag.p tag.del "This line of text is meant to be treated as deleted text." %>
<%= tag.p tag.s "This line of text is meant to be treated as no longer accurate." %>
<%= tag.p tag.ins "This line of text is meant to be treated as an addition to the document." %>
<%= tag.p tag.u "This line of text will render as underlined." %>
<%= tag.p tag.small "This line of text is meant to be treated as fine print." %>
<%= tag.p tag.strong "This line rendered as bold text." %>
<%= tag.p tag.em "This line rendered as italicized text." %>%p
You can use the mark tag to
%mark highlight text.
%p
%del This line of text is meant to be treated as deleted text.
%p
%s This line of text is meant to be treated as no longer accurate.
%p
%ins This line of text is meant to be treated as an addition to the document.
%p
%u This line of text will render as underlined.
%p
%small This line of text is meant to be treated as fine print.
%p
%strong This line rendered as bold text.
%p
%em This line rendered as italicized text.