Style Guide

Headings & Body Text

Defautl headings

Heading 1

Heading 2

Heading 3

Heading 4

Headings with small tag

Smaller textHeading 1

Smaller textHeading 2

Smaller textHeading 3

Smaller textHeading 4

Default text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

Text muted

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsum, id fuga fugiat corporis pariatur vero recusandae dolor veritatis mollitia quidem nam aspernatur, maiores nulla provident temporibus dolorum sed dolores.

Text highlighted

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsum, id fuga fugiat corporis pariatur vero recusandae dolor veritatis mollitia quidem nam aspernatur, maiores nulla provident temporibus dolorum sed dolores.

Lists

Default lists

ul

  • Item 1
  • Item 1
  • Item 1

ol

  1. Item 1
  2. Item 1
  3. Item 1

List unstyled

ul

  • Item 1
  • Item 1
  • Item 1

ol

  1. Item 1
  2. Item 1
  3. Item 1

List inline

ul

  • Item 1
  • Item 1
  • Item 1

ol

  1. Item 1
  2. Item 1
  3. Item 1

Icons

Default icons

.icon-xrd-facebook

.icon-xrd-Youtube

.icon-xrd-add-big

.icon-xrd-arrow-big

.icon-xrd-arrow-down

.icon-xrd-arrow-next

.icon-xrd-arrow-previous

.icon-xrd-arrow-small

.icon-xrd-arrow-up

.icon-xrd-Back-to-Top

.icon-xrd-cart

.icon-xrd-close

.icon-xrd-expend-small

.icon-xrd-on-filter

.icon-xrd-information

.icon-xrd-live-inventory

.icon-xrd-menu-close

.icon-xrd-minus-big

.icon-xrd-minus-small

.icon-xrd-no1-resseler

.icon-xrd-same-day-shipping

.icon-xrd-search

.icon-xrd-separation

.icon-xrd-service

.icon-xrd-star-OFF

.icon-xrd-star-ON

.icon-xrd-user

.icon-xrd-close-small

Icon sizes

.icon-xrd-facebook.icon-1x

.icon-xrd-facebook.icon-2x

.icon-xrd-facebook.icon-3x

.icon-xrd-facebook.icon-4x

Icon bordered

.icon-xrd-facebook.icon-bordered


.icon-xrd-youtube.icon-bordered


.icon-xrd-service.icon-bordered


.icon-xrd-same-day-shipping.icon-bordered


Icon fixed width

.icon-xrd-facebook.icon-bordered.icon-fw


.icon-xrd-youtube.icon-bordered.icon-fw


.icon-xrd-service.icon-bordered.icon-fw


.icon-xrd-same-day-shipping.icon-bordered.icon-fw


Media object

Default media

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.


Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.


Media alignement

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Checkbox and Radio buttons

Grid system

.container

.col-md-24
.col-md-12
.col-md-12
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8
.col-md-2.col-xs-8

Fluid container

.container-fluid

.col-md-24
.col-md-12
.col-md-12

Offseting columns

.col-md-12.col-md-offset-6

Nested columns

Level 1: .col-sm-18
Level 2: .col-xs-16 .col-sm-12
Level 2: .col-xs-8 .col-sm-12

0/2 articles Abonnez-vous à partir de 3,25$

Il vous reste 0/2 articles du magazine gratuits. Abonnez-vous à partir de 3,25$