Optiopay

Styleguide

Logos

Logo

Logo

Logo+Type

Logo+Type

Logo+Type inverted

Logo+Type inverted

Colors

Variations

Grid

column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-1
column xs-2
column xs-2
column xs-2
column xs-2
column xs-2
column xs-2
column xs-3
column xs-3
column xs-3
column xs-3
column xs-4
column xs-4
column xs-4
column xs-6
column xs-6
column xs-1
column xs-2
column xs-3
column xs-4
column xs-2

Responsive Grid

column sm-3 xs-6
column xs-3
column sm-4 xs-3
column sm-2 xs-12

Buttons

Primary

Secondary

Success

Info

Warning

Alert

Sizes

Typography

Headings

h1. Optiopay Heading 1

h2. Optiopay Heading 2

h3. Optiopay Heading 3

h4. Optiopay Heading 4

h5. Optiopay Heading 5
h6. Optiopay Heading 6

Body. Text Standard

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Body. Text with inline elements

Pellentesque habitant morbi b HTML element. tristique senectus et netus et malesuada fames ac abbr HTML element. turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque i HTML element. habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu strong HTML element. libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum here we have a link erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Links

Lorem ipsum...

Lists

  • This is an undordered list
  • This is an undordered list
    • This is nested unordered lilst
    • This is nested unordered lilst
  • This is an undordered list
  • This is an undordered list
  1. This is an orderded list
  2. This is an orderded list
  3. This is an orderded list
  4. This is an orderded list
Definition Term
Definition Description. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Definition Term
Definition Description. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Blockquote

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. A <cite> inside a blockquote

Inline elements

This is an b HTML element.

This is an i HTML element.

This is a small HTML element.


This is a abbr HTML element.

This is a cite HTML element.

This is a code HTML element.

This is a dfn HTML element.

This is an em HTML element.

This is a kbd HTML element.

This is a strong HTML element.

This is a samp HTML element.

This is a var HTML element.

<pre> block element

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
  

<pre> with <code>


    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }
  

Tables

Column 1 header Column 2 header Column 3 header
Row 1 Column 1 cell Row 1 Column 2 cell Row 1 Column 3 cell
Row 2 Column 1 cell Row 2 Column 2 cell Row 2 Column 3 cell
Row 3 Column 1 cell Row 3 Column 2 cell Row 3 Column 3 cell
Column 1 footer Column 2 footer (with <td>) Column 3 footer

Icons

This font was created with Fontastic

CSS mapping

Character mapping

Forms

Different kind of <input> types
Fieldset legend
Other form tags and input "states"

Radio Button Choice