Text
A powerful typography component for headings, paragraphs, blockquotes, and inline text with complete styling control.
Headings
Use the as: parameter to create semantic headings. Headings are responsive and scale automatically on larger screens.
<%= rui_text("Heading 1", as: :h1) %>
<%= rui_text("Heading 2", as: :h2) %>
<%= rui_text("Heading 3", as: :h3) %>
<%= rui_text("Heading 4", as: :h4) %>
<%= rui_text("Heading 5", as: :h5) %>
<%= rui_text("Heading 6", as: :h6) %>
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
💡 Tip: Headings automatically include proper ARIA attributes (role="heading" aria-level="N").
Override Heading Weights
Heading weights can be customized using the weight: parameter, overriding the default weight for that heading level.
<%# H1 with normal weight instead of extrabold %>
<%= rui_text("Lightweight H1", as: :h1, weight: :normal) %>
<%# H6 with bold instead of semibold %>
<%= rui_text("Bold Subheading", as: :h6, weight: :bold) %>
<%# H2 with light weight %>
<%= rui_text("Elegant H2", as: :h2, weight: :light) %>
H1 with normal weight
H6 with bold weight
H2 with light weight
Variants
Visual variants powered by ColorBuilderHelper add background colors, borders, and styling.
Colored Variants
<%= rui_text("Solid", variant: :solid, color: :primary) %>
<%= rui_text("Outline", variant: :outline, color: :success) %>
<%= rui_text("Ghost", variant: :ghost, color: :info) %>
<%= rui_text("Soft", variant: :soft, color: :warning) %>
<%= rui_text("Link", variant: :link, color: :primary) %>
Solid Primary
Solid Success
Outline Danger
Ghost Info
Soft Warning
Link Style
Simple Variants
Default variant (no styling)
Strong variant (bold)
Subtle variant (reduced opacity)
Text Formatting (rui_text_fmt)
For text transformations like truncation, highlighting, number formatting, use the rui_text_fmt component.
TextFmt Features
-
Truncate - Limit text length
-
Highlight - Mark search terms
-
Sanitize - Remove dangerous HTML
-
Number Formatting - Currency, percentage, phone
-
Time Ago - "3 hours ago" format
-
Linkify - Auto-convert URLs to links
-
Pluralize - "1 item" vs "5 items"
-
And more...
Examples
<%= rui_text_fmt("This is very long text...", truncate: 20) %>
<%= rui_text_fmt(99.99, number_format: :currency) %>
<%= rui_text_fmt("Search for Rails in this text", highlight: "Rails") %>
<%= rui_text_fmt(Time.now - 2.hours, time_ago: true) %>
This is a very long text that will be truncated...
$99.99
Search for Rails in this Rails text
5 comments
📚 Learn more: See the full TextFmt documentation for all formatting options.