Typography - Typography
Headings
HTML heading elements h1 through h6
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Lead Paragraph
Make a paragraph stand out
This is a lead paragraph. It stands out from regular paragraphs by being slightly larger and lighter in weight, making it ideal for introducing a section or highlighting important information.
This is a normal paragraph for comparison. Regular text appears smaller and has standard weight. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Inline Text Elements
Common inline HTML5 elements
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.
Text Colors
Contextual text colors
This is primary text color.
This is secondary text color.
This is success text color.
This is danger text color.
This is warning text color.
This is info text color.
This is light text color.
This is dark text color.
This is muted text color.
Text Alignment
Easily realign text with text utilities
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on sm and larger.
Center aligned text on md and larger.
Right aligned text on lg and larger.
Text Transform
Transform text in components
LOWERCASED TEXT.
uppercased text.
capitalized text.
Bold text.
Bolder weight text (relative to parent).
Semibold weight text.
Medium weight text.
Normal weight text.
Light weight text.
Italic text.
Blockquotes
Quoting blocks of content
A well-known quote, contained in a blockquote element.
A well-known quote, centered.
A well-known quote, right aligned.
Unordered Lists
A list of items with bullet points
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Ordered Lists
A list of items with numbers
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
Unstyled & Inline Lists
Remove list styling or display inline
Unstyled List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Nulla volutpat aliquam velit
- This list is nested
- Still retains its bullets
- Faucibus porta lacus fringilla vel
Inline List
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Description Lists
Align terms and descriptions horizontally
- Description lists
- A description list is perfect for defining terms.
- Term
- Definition for the term.
- Another term
- This definition is short, so no extra paragraphs needed.
- Truncated term is truncated
- This can be useful when space is tight.
- Nesting
-
- Nested definition
- Nested definition content here.
Code
Inline code and code blocks
Inline Code
For example,<section> should be wrapped as inline.
Code Block
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
Variables
For indicating variables use the y = m x + b tag.
User Input
To switch directories, typecd followed by the name of the directory.
To edit settings, pressctrl +,
Abbreviations
Stylized implementation for abbreviations
HTML is the standard markup language for documents designed to be displayed in a web browser.
CSS is a style sheet language used for describing the presentation of a document.
Address
TaxiCRM Inc.123 Main Street
City, State 12345
P: (123) 456-7890 John Doe
john@example.com
Font Sizes
Quickly change the font-size of text
fs-1
2.5remfs-2
2remfs-3
1.75remfs-4
1.5remfs-5
1.25remfs-6
1rem