RCU Logos

Font Family Red Hat Display

This is a regular weight test sentence.

This is a 600 weight test sentence.

This is a 700 weight test sentence.

This is a regular weight italics test sentence.

This is a 600 weight italics test sentence.

This is a 700 weight italics test sentence.

Font Sizes

This is text size xs

This is text size sm

This is text size base

This is text size lg

This is text size xl

This is text size h6

This is text size h5

This is text size h4

This is text size h3

This is text size h2

This is text size h1

Headings

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading

This is a h6 heading

Theme Colors

This is color rcu-blue

This is color rcu-blue-900

This is color rcu-blue-800

This is color rcu-blue-700

This is color rcu-blue-600

This is color rcu-blue-500

This is color rcu-blue-400

This is color rcu-dark-blue

This is color rcu-dark-blue-900

This is color rcu-dark-blue-800

This is color rcu-dark-blue-700

This is color rcu-dark-blue-600

This is color rcu-dark-blue-500

This is color rcu-dark-blue-400

This is color rcu-green

This is color rcu-green-900

This is color rcu-green-800

This is color rcu-green-700

This is color rcu-green-600

This is color rcu-green-500

This is color rcu-green-400

This is color black

This is color dark-neutral-900

This is color dark-neutral-800

This is color dark-neutral-700

This is color dark-neutral-600

This is color dark-neutral-500

This is color white

This is color light-neutral-900

This is color light-neutral-800

This is color light-neutral-700

This is color light-neutral-600

This is color light-neutral-500

RCU Icons

Buttons

Alerts

Success 500

Success 600

Success 700

Success 800

Success 900

Warning 500

Warning 600

Warning 700

Warning 800

Warning 900

Error 500

Error 600

Error 700

Error 800

Error 900

Box Shadows

Box Shadow 1

Box Shadow 2

Box Shadow 3

Box Shadow 4

Kitchen Sink

h1 HTML5 Kitchen Sink

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox

h4 Five or six big jet planes zoomed quickly by the new tower.

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.

h6 Pack my box with five dozen liquor jugs.

This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define ~~deleted text~~ which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H₂O) and sup (E = MC²) tags.

Blockquote: I quickly explained that many big jobs involve few hazards

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’tdone as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables can have captions now.
Person	Number	Third Column
Someone Lastname	900	Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name	1200	Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person	1500	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One	2800	Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Definition List Title: Definition list division.
Kitchen Sink: Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
aside: Defines content aside from the page content
blockquote: Defines a section that is quoted from another source

Unordered List item one
- Nested list item
  - Level 3, item one
  - Level 3, item two
  - Level 3, item three
  - Level 3, item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

1 Infinite Loop
Cupertino, CA 95014
United States

pre {
display: block;
padding: 7px;
background-color: #F5F5F5;
border: 1px solid #E1E1E8;
border-radius: 3px;
white-space: pre-wrap;
word-break: break-all;
font-family: Menlo, Monaco;
line-height: 160%;
}

Email address

Number

Password

Telephone number

Text

Url

Color

Date

Date / Time

Date / Time local

Month

Week

Time

Example select

Example multiple select

Example textarea

File input

I am legend

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

I am also legend Check me out Or check me out