Navigation

Color Palette

micro blue
@mic-blue #009fda
micro blue-light
@mic-blue-light #00afef
black
@mic-primary-black #444444
dark gray
@mic-gray-dark #666666
gray
@mic-gray #cccccc
light gray
@mic-gray-light #f6f6f6

Typography

H1 Lorem ipsum dolor

H2 Lorem ipsum dolor

H3 Lorem ipsum dolor

H4 Lorem ipsum dolor

H5 Lorem ipsum dolor
H6 Lorem ipsum dolor

Paragraphs

Marius aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate.

Mauris aliquet link ultricies ante, non bold faucibus ante gravida sed. Sed ultrices rendered as italicized text pellentesque purus, vulputate volutpat ipsum hendrerit sed neque..

Blockquote

Mauris aliquet ultricies ante, non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate volutpat ipsum hendrerit sed neque sed sapien rutrum laoreet justo ultrices. In pellentesque lorem condimentum dui morbi pulvinar dui non quam pretium ut lacinia tortor. Someone famous Source Title

Page title

Block Title


Lists

Ordered
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Faucibus porta lacus fringilla vel
  6. Aenean sit amet erat nunc
  7. Eget porttitor lorem
  8. Consectetur adipiscing elit
  9. Integer molestie lorem at massa
  10. Facilisis in pretium nisl aliquet
  11. Faucibus porta lacus fringilla vel
  12. Aenean sit amet erat nunc
Unordered
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Unstyled
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Description
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Buttons

Primary
Regular
Other

Tabs

Tab 1 content

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 exercitat.

Tab 2 content

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 exercitat.

Tab 3 content

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 exercitat.


Tables


Recent Orders
Order #DateShip ToOrder TotalStatusAction
000000002 1/19/17 Firstname Last $19.52 Complete View Order Reorder
000000003 1/23/17 Firstname Last $39.64 Pending View Order Reorder
000000004 1/28/17 Firstname Last $259.99 Complete View Order Reorder
000000005 2/13/17 Firstname Last $23.19 Processing View Order Reorder

Form Elements

Form instructions paragraph

Personal Information
 
Additional Information

Checkboxes

Radio buttons

Icons

  • phone f095
  • envelope f0e0
  • sign-out f08b
  • lock f023
  • truck f0d1
  • heart f004
  • shopping-cart f07a
  • pencil f040
  • trash-o f014
  • chevron-up f077
  • sort-down f0dd
  • caret-left f0d9
  • caret-right f0da
  • plus f067
  • minus f068
  • times f00d
  • bars f0c9
  • search f002
  • facebook f09a
  • google-plus f0d5
  • instagram f16d
  • pinterest f0d2
  • twitter f099
  • youtube f167