Text

A powerful typography component for headings, paragraphs, blockquotes, and inline text with complete styling control.

Key Features

  • Semantic HTML - Proper h1-h6, p, blockquote, span, div, section, article tags
  • Responsive Headings - Automatically scale on larger screens
  • Complete Typography Control - Size, weight, color, alignment, font family
  • Visual Variants - Solid, outline, ghost, soft, link, strong, subtle
  • Icon Support - Leading and trailing icons with color inheritance
  • Badge Integration - Add badges to headings and text
  • Gradient Text - Apply gradient effects to specific words
  • Prose Mode - Optimal typography for long-form articles
  • Accessibility-First - Proper ARIA attributes automatically added
  • Text Formatting - Companion component (rui_text_fmt) for Rails helpers

Basic Usage

The text component supports both positional text and block content. By default, it renders a paragraph.

<%= rui_text("Hello World") %>
<%= rui_text("Welcome", as: :h1, color: :primary) %>
<%= rui_text(size: :lg, weight: :bold) do %>
  Bold large text
<% end %>

Hello World

Welcome

Bold large text

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 1

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

Paragraphs

By default, text renders as a paragraph. You can control the size and styling.

<%= rui_text("Default paragraph") %>
<%= rui_text("Large paragraph", size: :lg) %>
<%= rui_text("Small paragraph", size: :sm) %>

This is a default paragraph with normal size and weight. It includes proper margins and line height for readability.

This is a large paragraph with increased font size for emphasis.

This is a small paragraph, perfect for secondary information or captions.

Colors

All semantic and Tailwind colors are supported via ColorBuilderHelper.

<%= rui_text("Primary", color: :primary) %>
<%= rui_text("Success", color: :success) %>
<%= rui_text("Danger", color: :danger) %>

Primary

Secondary

Success

Danger

Warning

Info

Neutral

Tailwind Colors

All Tailwind colors are supported with automatic dark mode support.

Red

Orange

Yellow

Green

Blue

Purple

Pink

Cyan

Lime

Indigo

Sizes

Control text size from extra small to 6XL.

Extra Small (xs)

Small (sm)

Base (base)

Medium (md)

Large (lg)

Extra Large (xl)

2XL

3XL

4XL

Font Weights

Choose from 8 font weight options.

Thin (100)

Light (300)

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

Extrabold (800)

Black (900)

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)

Blockquotes

Create semantic blockquotes with optional citations.

<%= rui_text(as: :blockquote) do %>
  To be or not to be, that is the question.
<% end %>

<%= rui_text(as: :blockquote, cite: "William Shakespeare") do %>
  The fault, dear Brutus, is not in our stars, but in ourselves.
<% end %>
To be or not to be, that is the question.
The fault, dear Brutus, is not in our stars, but in ourselves. William Shakespeare

With Icons

Add icons to text with automatic color inheritance or custom colors.

<%= rui_text("Featured Content", color: :info) do |text| %>
  <% text.with_icon(name: :star, position: :leading) %>
<% end %>

<%= rui_text("Learn More", color: :primary) do |text| %>
  <% text.with_icon(name: :arrow_right, position: :trailing) %>
<% end %>

Featured Content

Learn More

Warning Message

Success!

Gradient Text

Apply beautiful gradient effects with multiple color schemes.

Available Gradient Styles

<%# Apply gradient style to entire text %>
<%= rui_text("Beautiful Gradient", gradient: :ocean, size: :xl2) %>

<%# Apply to specific word %>
<%= rui_text("Make it gradient today", gradient: "gradient") %>

<%# Apply specific style to specific word %>
<%= rui_text("Ocean vibes", gradient: { text: "Ocean", style: :ocean }) %>

Sunset Gradient

Ocean Gradient

Forest Gradient

Sunrise Gradient

Aurora Gradient

Gradient Styles:

  • :sunset - Purple to pink (default)
  • :ocean - Yellow → blue → indigo
  • :forest - Blue → teal → green
  • :sunrise - Purple → orange → yellow
  • :aurora - Purple → teal → red

Prose Mode

Prose mode adds optimal typography for long-form articles and blog posts.

<%= rui_text(prose: true, as: :article) do %>
  <h2>Article Title</h2>
  <p>First paragraph with automatic prose styling...</p>
  <p>Second paragraph...</p>
<% end %>

The Power of Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Good typography establishes a strong visual hierarchy, provides a graphic balance to the website, and sets the product's overall tone.

  • Choose appropriate typefaces
  • Set proper line heights and spacing
  • Maintain readability across devices

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.

API Reference

rui_text

Typography component for consistent text styling

Parameter Type Default Description
content String — Text content (positional or keyword, or use block)

HTML Element

Control rendered HTML element

Parameter Type Default Description
element Symbol :p HTML element to render
:p :span :div :h1 :h2 :h3 :h4 :h5 :h6 :label :strong :em :small :mark :del :ins :sub :sup :code :pre :blockquote :cite :abbr :time :address

Typography

Font styling options

Parameter Type Default Description
size Symbol :base Text size
:xs :sm :base :lg :xl :xl2 :xl3 :xl4 :xl5 :xl6 :xl7 :xl8 :xl9
weight Symbol :normal Font weight
:thin :extralight :light :normal :medium :semibold :bold :extrabold :black
leading Symbol — Line height
:none :tight :snug :normal :relaxed :loose
tracking Symbol — Letter spacing
:tighter :tight :normal :wide :wider :widest
font Symbol — Font family
:sans :serif :mono

Color

Text color options

Parameter Type Default Description
color Symbol :default Text color - semantic (:default, :muted, :primary, :success, :warning, :danger) or any Tailwind color
gradient Symbol/Array — Gradient preset or custom [from, to] colors
:sunset :ocean :forest :fire :purple :rainbow

Formatting

Text formatting options

Parameter Type Default Description
align Symbol — Text alignment
:left :center :right :justify
transform Symbol — Text transform
:uppercase :lowercase :capitalize :normal
decoration Symbol — Text decoration
:underline :overline :line_through :none
italic Boolean false Italic style
truncate Boolean/Integer — Truncate text (true for ellipsis, integer for line clamp)
prose Boolean false Apply Tailwind prose styling

Related Components