Visual Pattern Library

This is an ongoing project and this library will be enriched as we go on. Baseline typography, plus styling for common HTML elements including images, forms and tables, as well as navigation, responsive modules and widgets will be dispayed here.

Tip: hide meta information.

Typography elements

Baseline typography defaults including headings, block and text-level text elements and all types of lists.

Headings

Heading level 1

  • Element: h1
  • Typeface: Monserrat
  • Size: 36px
  • Weight: 700
  • Case: normal

Heading level one

There was little doubt that the bridge was unsafe. All one had to do was look at it to know that with certainty. Yet Bob didn't see another option. He may have been able to work one out if he had a bit of time to think things through, but time was something he didn't have. A choice needed to be made, and it needed to be made quickly.

Heading level 2

  • Element: h2
  • Typeface: Monserrat
  • Size: 24px
  • Weight: 400
  • Case: upper

Heading level two

The boy walked down the street in a carefree way, playing without notice of what was about him. He didn't hear the sound of the car as his ball careened into the road. He took a step toward it, and in doing so sealed his fate.

Heading level 3

  • Element: h3
  • Typeface: Monserrat
  • Size: 18px
  • Weight: 700
  • Case: normal

Heading level three

It was going to rain. The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Heading level 4

  • Element: h4
  • Typeface: Monserrat
  • Size: 14px
  • Weight: 400
  • Case: upper

Heading level four

It was a question of which of the two she preferred. On the one hand, the choice seemed simple. The more expensive one with a brand name would be the choice of most. It was the easy choice. The safe choice. But she wasn't sure she actually preferred it.

Heading level 5

  • Element: h5
  • Typeface: Monserrat
  • Size: 16px
  • Weight: 400
  • Case: normal
Heading level five

She had come to the conclusion that you could tell a lot about a person by their ears. The way they stuck out and the size of the earlobes could give you wonderful insights into the person. Of course, she couldn't scientifically prove any of this, but that didn't matter to her. Before anything else, she would size up the ears of the person she was talking to.

Heading level 6

  • Element: h6
  • Typeface: Monserrat
  • Size: 14px
  • Weight: 700
  • Case: normal
Heading level six

It was a rat's nest. Not a literal one, but that is what her hair seemed to resemble every morning when she got up. It was going to take at least an hour to get it under control and she was sick and tired of it. She peered into the mirror and wondered if it was worth it. It wasn't. She opened the drawer and picked up the hair clippers.

Paragraphs

Normal paragraph

  • Element: p
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal

There was little doubt that the bridge was unsafe. All one had to do was look at it to know that with certainty. Yet Bob didn't see another option. He may have been able to work one out if he had a bit of time to think things through, but time was something he didn't have. A choice needed to be made, and it needed to be made quickly.

Heading lede paragraph

  • Element: p
  • Class: lead
  • Typeface: Lato
  • Size: 24px
  • Weight: 400
  • Case: normal

There was little doubt that the bridge was unsafe. All one had to do was look at it to know that with certainty. Yet Bob didn't see another option. He may have been able to work one out if he had a bit of time to think things through, but time was something he didn't have. A choice needed to be made, and it needed to be made quickly.

Secondary paragraph

  • Element: p
  • Class: secondary
  • Typeface: Lato
  • Size: 16px
  • Weight: 400
  • Case: normal

There was little doubt that the bridge was unsafe. All one had to do was look at it to know that with certainty. Yet Bob didn't see another option. He may have been able to work one out if he had a bit of time to think things through, but time was something he didn't have. A choice needed to be made, and it needed to be made quickly.

Tertiary paragraph

  • Element: p
  • Class: tertiary
  • Typeface: Lato
  • Size: 14px
  • Weight: 400
  • Case: normal

There was little doubt that the bridge was unsafe. All one had to do was look at it to know that with certainty. Yet Bob didn't see another option. He may have been able to work one out if he had a bit of time to think things through, but time was something he didn't have. A choice needed to be made, and it needed to be made quickly.

Quotations

Blockquote

  • Element: blockquote
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal

She counted. One. She could hear the steps coming closer. Two. Puffs of breath could be seen coming from his mouth. Three. He stopped beside her. Four. She pulled the trigger of the gun.

Source or author

Blockquote with open quote

  • Element: blockquote
  • Class: u-quote
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal

It was going to rain. The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.

Source or author

Blockquote aligned right

  • Element: blockquote
  • Class: u-pull-right
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal

He looked at the sand. Picking up a handful, he wondered how many grains were in his hand. Hundreds of thousands? "Not enough," the said under his breath. I need more.

Source or author

Blockquote aligned right with close quote

  • Element: blockquote
  • Class: u-quote u-pull-right
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal

I'm going to hire professional help tomorrow. I can't handle this anymore. She fell over the coffee table and now there is blood in her catheter. This is much more than I ever signed up to do.

Source or author

Lists

Types of lists

  • Element: ul
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal
  • None
  • Disc
  • Circle
  • Square
  • Decimal
  • Decimal leading zero
  • Upper roman
  • Lower greek
  • Lower alpha
  • Upper alpha
  • Armenian
  • Georgian

Unordered list

  • Element: ul
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal
  • unordered item
  • unordered item
  • unordered item
  • unordered item
  • unordered item

Nested unordered list

  • Element: ul
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal
  • unordered item
  • unordered item
  • unordered item
    • unordered item
    • unordered item
  • unordered item

Ordered list

  • Element: ol
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal
  1. ordered item
  2. ordered item
  3. ordered item
  4. ordered item
  5. ordered item

Nested ordered list

  • Element: ol
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal
  1. ordered item
  2. ordered item
    1. ordered item
    2. ordered item
    3. ordered item
  3. ordered item

Definition list

  • Element: dl
  • Typeface: Lato
  • Size: 18px
  • Weight: 400
  • Case: normal
GCBHR Visual Pattern Library
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text level elements

Text level HTML elements may be used within other elements. They include: em and strong for semantic emphasis, i and b for presentational formatting, abbr abbreviations, cite citations, code example, del, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages and sup superscript and sub subscript.