Typography
Sensible defaults to use for text.
Usage
H1
This is an H1 title
Heading(level: 1) { "This is an H1 title" }
Copied!
Copy failed!
H2
This is an H2 title
Heading(level: 2) { "This is an H2 title" }
Copied!
Copy failed!
H3
This is an H3 title
Heading(level: 3) { "This is an H3 title" }
Copied!
Copy failed!
H4
This is an H4 title
Heading(level: 4) { "This is an H4 title" }
Copied!
Copy failed!
P
This is an P tag
Text { "This is an P tag" }
Copied!
Copy failed!
Inline link
Checkout our installation instructions to get started.
Text(class: 'text-center') do plain "Checkout our " InlineLink(href: helpers.docs_installation_path) { "installation instructions" } plain " to get started." end
Copied!
Copy failed!
List
- Phlex is fast
- Phlex is easy to use
- Phlex is awesome
Components.TypographyList(items: [ 'Phlex is fast', 'Phlex is easy to use', 'Phlex is awesome', ])
Copied!
Copy failed!
Numbered list
- Copy
- Paste
- Customize
Components.TypographyList(items: [ 'Copy', 'Paste', 'Customize', ], numbered: true)
Copied!
Copy failed!
Inline code
This is an inline code block
InlineCode { "This is an inline code block" }
Copied!
Copy failed!
Lead
A modal dialog that interrupts the user with important content and expects a response.
Text(as: "p", size: "5", weight: "muted") { "A modal dialog that interrupts the user with important content and expects a response." }
Copied!
Copy failed!
Large
Are you sure absolutely sure?
Text(size: "4", weight: "semibold") { "Are you sure absolutely sure?" }
Copied!
Copy failed!
Small
Email address
Text(size: "sm") { "Email address" }
Copied!
Copy failed!
Muted
Enter your email address.
Text(size: "2", class: "text-muted-foreground") { "Enter your email address." }
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Typography
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Heading
to app/components/ruby_ui/typography/heading.rb
# frozen_string_literal: true module RubyUI class Heading < Base def initialize(level: nil, as: nil, size: nil, **attrs) @level = level @as = as @size = size super(**attrs) end def view_template(&) tag = determine_tag public_send(tag, **attrs, &) end private def determine_tag return @as if @as return "h#{@level}" if @level "h1" end def default_attrs { class: class_names } end def class_names base_classes = "scroll-m-20 font-bold tracking-tight" size_class = size_to_class[(@size || level_to_size[@level&.to_s] || "6").to_s] "#{base_classes} #{size_class}" end def size_to_class { "1" => "text-xs", "2" => "text-sm", "3" => "text-base", "4" => "text-lg", "5" => "text-xl", "6" => "text-2xl", "7" => "text-3xl lg:text-4xl", "8" => "text-4xl", "9" => "text-5xl" } end def level_to_size { "1" => "7", "2" => "6", "3" => "5", "4" => "4" } end end end
Copied!
Copy failed!
2
Add RubyUI::InlineCode
to app/components/ruby_ui/typography/inline_code.rb
# frozen_string_literal: true module RubyUI class InlineCode < Base def view_template(&) code(**attrs, &) end private def default_attrs { class: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold" } end end end
Copied!
Copy failed!
3
Add RubyUI::InlineLink
to app/components/ruby_ui/typography/inline_link.rb
# frozen_string_literal: true module RubyUI class InlineLink < Base def initialize(href:, **attrs) super(**attrs) @href = href end def view_template(&) a(href: @href, **attrs, &) end private def default_attrs { class: "text-primary font-medium hover:underline underline-offset-4 cursor-pointer" } end end end
Copied!
Copy failed!
4
Add RubyUI::Text
to app/components/ruby_ui/typography/text.rb
# frozen_string_literal: true module RubyUI class Text < Base def initialize(as: "p", size: "3", weight: "regular", **attrs) @as = as @size = size @weight = weight super(**attrs) end def view_template(&) public_send(@as, **attrs, &) end private def default_attrs { class: class_names } end def class_names "#{size_to_class[@size]} #{weight_to_class[@weight]}" end def size_to_class { "1" => "text-xs", "xs" => "text-xs", "2" => "text-sm", "sm" => "text-sm", "3" => "text-base", "base" => "text-base", "4" => "text-lg", "lg" => "text-lg", "5" => "text-xl", "xl" => "text-xl", "6" => "text-2xl", "2xl" => "text-2xl", "7" => "text-3xl", "3xl" => "text-3xl", "8" => "text-4xl", "4xl" => "text-4xl", "9" => "text-5xl", "5xl" => "text-5xl" } end def weight_to_class { "muted" => "text-muted-foreground", "light" => "font-light", "regular" => "font-normal", "medium" => "font-medium", "semibold" => "font-semibold", "bold" => "font-bold" } end end end
Copied!
Copy failed!
5
Add RubyUI::TypographyBlockquote
to app/components/ruby_ui/typography/typography_blockquote.rb
# frozen_string_literal: true module RubyUI class TypographyBlockquote < Base def view_template(&) blockquote(**attrs, &) end private def default_attrs { class: "mt-6 border-l-2 pl-6 italic" } end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Heading | Phlex | |
InlineCode | Phlex | |
InlineLink | Phlex | |
Text | Phlex | |
TypographyBlockquote | Phlex |