HealthLGBTQ
HealthHIV Logo

Typography

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Paragraph

This is a lead paragraph. It stands out from regular paragraphs. It is used for introductory text on landing pages or long narratives.

This is a standard text paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

The following is rendered as bold text.

The following is rendered as italicized text.

Quote

“I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture.”

– Noaa

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat.

Special Display Sizes

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6


Text Options

Muted Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers…

Small Text

This line of text is meant to be treated as fine print or a caption.

Unordered List
  • This is an example of a bulleted list with a custom bullet. Proin vehicula erat eget libero accumsan iaculis.
  • This is an example of a bulleted list.
  • This is a second level list.
    • Second level item 1 with a custom level 2 bullet.
    • Second level item 2
Ordered List
  1. This is an example of an ordered list.
  2. This is an example of an ordered list.

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Images

img-thumbnail

Photo by Nikita Tikhomirov

rounded-circle

Photo by おにぎり

rounded

Photo by Christine Sandu

img

Photo by Catrin Johnson

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.


Carousel

Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse a lacus est. Etiam diam metus, lobortis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse a lacus est. Etiam diam metus, lobortis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 


Buttons

Buttons

Button Outline

Buttons Sizes

Buttons Group


Progress Bars

Striped


Alerts


Badges

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Sidebars


Cards

Photo by Vincent Giersch

Card title

This is a simple Card example.

This is some text within a card body.
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Use Action Verb in Buttons