Pattern Primer

Common snippets of markup

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

•••

Usage: Content preceding the main body of a page or article, giving the reader the main idea of the following content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

  1. Lorem dolor
  2. Consectetur
  3. Adipisicin
  4. Eiusmod
  1. Lorem dolor
  2. Consectetur
  3. Adipisicin
  4. Eiusmod
  1. Lorem dolor
  2. Consectetur
  3. Adipisicin
  4. Eiusmod
•••

Usage:

•••

Usage:

  1. <?php
  2. echo 'Hello World!'; // print 'Hello World'
  3. ?>
•••

Usage:

  1. Defiant North Korea in rocket success

    North Korea successfully launches a long-range rocket to put a satellite into space, as neighbours accuse it of a disguised missile test.

  2. Big decline in UK unemployment

    The number of people out of work fell by 82,000 between August and October, to 2.51 million, official figures show.

  3. Sitar maestro Ravi Shankar dies

    Sitar player Ravi Shankar, who popularised Indian music around the world, dies in hospital in the United States at the age of 92.

•••

Usage:

  1. Defiant North Korea in rocket success

    North Korea successfully launches a long-range rocket to put a satellite into space, as neighbours accuse it of a disguised missile test.

  2. Big decline in UK unemployment

    The number of people out of work fell by 82,000 between August and October, to 2.51 million, official figures show.

  3. Sitar maestro Ravi Shankar dies

    Sitar player Ravi Shankar, who popularised Indian music around the world, dies in hospital in the United States at the age of 92.

•••

Usage:

Hover to reveal a tooltip
•••

Usage:

•••

Usage:

External link
•••

Usage:

Link Button
•••

Usage:

Primary Link Button
•••

Usage:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

•••

Usage:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

•••

Usage:

This is an area of content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

•••

Usage:

This is a general notification.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

•••

Usage:

This is a notification of a successful action or event.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

•••

Usage:

This is a notification of a failed action or event.

Please complete the following required fields:

  • Name
  • Date of birth
•••

Usage:

This is a marked area of content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

•••

Usage:

This is a highlighted area of content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

•••

Usage:

How do I know which bone to choose?

Whether you want to give your dog a nylon bone, a real bone, or a rawhide bone, choose a bone that matches your dog’s chewing rate and chewing habits. You may also wish to consider your dog's size and choose a bone that best fits his mouth and teeth.

How do bones improve dental health?

When your dog chews on bones, the chewing action scrapes away plaque, controls tartar build up, and helps stimulate gums. This diminishes bad breath, keeps teeth whiter, and reduces the risk of potentially serious dental problems.

Are bones appropriate for older dogs?

Provided that your older dog has healthy teeth, bones are extremely appropriate. Bones provide entertainment and mental stimulation that can be very beneficial to older dogs – especially those who are not extremely active.

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

Note about this field

•••

Usage:

Note about this selection

•••

Usage:

Radio *
Note about these options
•••

Usage:

Checkbox *
Note about these options
•••

Usage:

Checkbox *
  • Note about these option
  • Note about these option
  • Note about these option
•••

Usage:

•••

Usage:

Note about this field

•••

Usage:

Note about this field

•••

Usage:

•••

Usage:

Note about this field

•••

Usage:

Note about this field

•••

Usage:

Note about this field

•••

Usage:

Legend

Required fields are marked *

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage:

•••

Usage: