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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor
  6. Faucibus porta lacus fringilla vel
  7. 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.5rem

fs-2

2rem

fs-3

1.75rem

fs-4

1.5rem

fs-5

1.25rem

fs-6

1rem
Notification
Mark all as Readmark_chat_readclose

New campaign "Summer Sale 2024" has been launched successfully

Last updated 3mins agoMarketing

Sarah Johnsonrequested access toFinancial Reports Dashboard

Last updated 15mins agoAccess Request

Mike Chenmentioned you inCustomer Feedback Thread

Last updated 1hour agoMention

"Great work on the client presentation! The response has been overwhelmingly positive."

Emily Rodriguezshared a document inQ4 Planning

Last updated 2hours agoDocument

attachmentQ4_Budget_Proposal_2024.pdf4.7MB

David Kimreplied to your comment inFeature Discussion

Last updated 3hours agoReply

"I think we should implement this feature in the next sprint. It aligns perfectly with our roadmap goals."

Jessica Martinezuploaded a presentation video inTraining Materials

Last updated 5hours agoMedia

Video thumbnailplay_circle
Product_Demo_Training_v2.mp440.7MB