TYPOGRAPHY

HEADINGS

Here are some examples of headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

HEADING WITH UNDERLINE

To add a line beneath a heading, add the uk-module-title class. Example:

YOUR TITLE GOES HERE

To create a divider use the <hr> element


BLOCKS

Blocks are distinct ways of enumarating points in paragraphs with numbers, dates or icons. For block-numbers, you can use any numbering or alphabetical format.

BLOCK NUMBERS

1

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition of success

2

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition of success

3

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition of success

4

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition of success

5

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition of success

6

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition of success

BLOCK DATES

Jan 29

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition.

Apr 19

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition.

Jun 30

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition.

Aug 03

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition.

Sep 23

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition.

Dec 10

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one’s definition.

BLOCK ICONS

CREATIVITY

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

DESIGN

Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition.

STRATEGY

Do not dream of the future, concentrate the mind on the present moment and you will succeed.

BLOCKQUOTES

Blockquotes are a nice way to show some commentary or slogan accompanied by the author or name of the commenter. To create a standard blockquote, use the <blockquote> element. Inline quotations can also be defined by using the <q> element.

BLOCKQUOTE EXAMPLE

Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality. Let things flow naturally

John Doe

The celsius-testimonial class adds additional styling to the native blockquote. celsius-testimonial-avatar class shows an image of the author by specifying a url to the image. quote-icon class is used to add a transparent icon that is positioned bottom left.

TESTIMONIAL EXAMPLE

John DoeBelieve in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

John DoeHead of Sales, envato

LISTS

You can create an unordered list using the uk-list class. The li element defines the list item.

SIMPLE LIST

  • List Item 1
  • List Item 2
  • List Item 3

LISTS WITH STRIPES

  • List Item 1
  • List Item 2
  • List Item 3

NESTED LISTS

  • Lorem ipsum dolor
  • consectetur adipisicing elit
  • sed do eiusmod tempor
    • Lorem ipsum dolor
    • consectetur adipisicing elit
    • sed do eiusmod tempor
  • dolor adipisicing elit

TAGS

Tags can be used to highlight keywords within your content. To create a tag, use the tm-tag class.


TEXT LEVEL SEMANTICS

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using q element inside a q element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.