"Chaos" toolbox

This page allow a display of all the elements included in the template, in order to control the proper looks and display of your website.

Don't hesitate to add your own elements in order to test them ;)


Headings

h1 title

h2 title

h3 title

h4 title

h5 title
h6 title

Paragraph

Lorem ipsum dolor sit amet, adipiscing elit. nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Main paragraphs tags

Some text, and some link, how delightful.

Some text, and some Bold text, using the strong tag, how surprising.

Some text, and some Italic texte, using the em tag, how di how.


Images

Here's image management, with most use cases.

Simple Image

uses pugsjs mixins to generate srcset automatically

Kabalite warrior, Dark eldar drukhari, color scheme white and red

Lists

Definition List

Definition List Title
This is a definition list division.
This is a second definition list division.

Ordered List

  1. item 1
  2. item 2
  3. item 3

Unordered List

  • item 1
  • item 2
  • item 3

Stacked List

  • item 1
    • sub-item 1
    • sub-item 2
  • item 2
    • sub-item 1
    • sub-item 2

Fieldsets and form elements

Form elements displayed in a table, in order to have proper alignement between labels and inputs.

My legend
Example radios fieldset horizontal
Example radios fieldset vertical

Tables

Classic tables stuff

Tablea heading 1Tablea heading 2Tablea heading 3
Table content 1:1Table content 1:2Table content 1:3
Table content 2:1Table content 2:2Table content 2:3
Table content 3:1Table content 3:2Table content 3:3

Containers & grid

Neat stuff tests & examples

2 columns, width 6

Colonne 1

Colonne 2

2 columns, width 8 & 4

Colonne 1

Colonne 2

2 columns, width 9 & 3

Colonne 1

Colonne 2

3 columns, width 4

Colonne 1

Colonne 2

Colonne 3

4 columns, width 3

Colonne 1

Colonne 2

Colonne 3

Colonne 4


Image & text layouts

Kabalite warrior, Dark eldar drukhari, color scheme white and red

Image & texsts(9/3)

Dolor sit amet, consectetur adipisicing elit. Non nihil dolorem perferendis sit quis reprehenderit, voluptate deleniti ducimus repellendus, quas quo molestias unde rem blanditiis et. Doloribus voluptates repudiandae vel voluptatum veritatis tempora ducimus eos rem provident repellat magnam vitae, dolorem aperiam ipsum? Libero veritatis adipisci aperiam fuga sunt, tempora eaque vel quos aliquid saepe dolore dolorum sapiente, animi natus minus reiciendis, recusandae tempore magnam, similique architecto dolorem odit. Ducimus, explicabo architecto doloribus praesentium aperiam quis neque debitis, dolore molestias? Similique aliquam sunt enim aperiam cumque adipisci ullam sit repellendus iste officia asperiores quam, alias ut necessitatibus rerum minus aliquid, cupiditate voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus eveniet nobis aliquam quam odio quisquam cupiditate dicta recusandae ratione saepe impedit, maxime, earum omnis quia sint. Excepturi aliquid, necessitatibus dolore, ad sint dolorum culpa rem voluptatem eum saepe quas ex ipsum! Alias recusandae est tenetur, voluptates optio, vitae modi consequuntur?

Kabalite warrior, Dark eldar drukhari, color scheme white and red

Text & Image (4/8)

Dolor sit amet, consectetur adipisicing elit. Non nihil dolorem perferendis sit quis reprehenderit, voluptate deleniti ducimus repellendus, quas quo molestias unde rem blanditiis et. Doloribus voluptates repudiandae vel voluptatum veritatis tempora ducimus eos rem provident repellat magnam vitae, dolorem aperiam ipsum? Libero veritatis adipisci aperiam fuga sunt, tempora eaque vel quos aliquid saepe dolore dolorum sapiente, animi natus minus reiciendis, recusandae tempore magnam, similique architecto dolorem odit. Ducimus, explicabo architecto doloribus praesentium aperiam quis neque debitis, dolore molestias? Similique aliquam sunt enim aperiam cumque adipisci ullam sit repellendus iste officia asperiores quam, alias ut necessitatibus rerum minus aliquid, cupiditate voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus eveniet nobis aliquam quam odio quisquam cupiditate dicta recusandae ratione saepe impedit, maxime, earum omnis quia sint. Excepturi aliquid, necessitatibus dolore, ad sint dolorum culpa rem voluptatem eum saepe quas ex ipsum! Alias recusandae est tenetur, voluptates optio, vitae modi consequuntur?

Dual images

Kabalite warrior, Dark eldar drukhari, color scheme white and redKabalite warrior, Dark eldar drukhari, color scheme white and red

Multiple images in a column

Dolor sit amet, consectetur adipisicing elit. Non nihil dolorem perferendis sit quis reprehenderit, voluptate deleniti ducimus repellendus, quas quo molestias unde rem blanditiis et. Doloribus voluptates repudiandae vel voluptatum veritatis tempora ducimus eos rem provident repellat magnam vitae, dolorem aperiam ipsum? Libero veritatis adipisci aperiam fuga sunt, tempora eaque vel quos aliquid saepe dolore dolorum sapiente, animi natus minus reiciendis, recusandae tempore magnam, similique architecto dolorem odit. Ducimus, explicabo architecto doloribus praesentium aperiam quis neque debitis, dolore molestias? Similique aliquam sunt enim aperiam cumque adipisci ullam sit repellendus iste officia asperiores quam, alias ut necessitatibus rerum minus aliquid, cupiditate voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus eveniet nobis aliquam quam odio quisquam cupiditate dicta recusandae ratione saepe impedit, maxime, earum omnis quia sint. Excepturi aliquid, necessitatibus dolore, ad sint dolorum culpa rem voluptatem eum saepe quas ex ipsum! Alias recusandae est tenetur, voluptates optio, vitae modi consequuntur?


Kabalite warrior, Dark eldar drukhari, color scheme white and red
Kabalite warrior, Dark eldar drukhari, color scheme white and red

Side by side images

Dolor sit amet, consectetur adipisicing elit. Non nihil dolorem perferendis sit quis reprehenderit, voluptate deleniti ducimus repellendus, quas quo molestias unde rem blanditiis et. Doloribus voluptates repudiandae vel voluptatum veritatis tempora ducimus eos rem provident repellat magnam vitae, dolorem aperiam ipsum? Libero veritatis adipisci aperiam fuga sunt, tempora eaque vel quos aliquid saepe dolore dolorum sapiente, animi natus minus reiciendis, recusandae tempore magnam, similique architecto dolorem odit. Ducimus, explicabo architecto doloribus praesentium aperiam quis neque debitis, dolore molestias? Similique aliquam sunt enim aperiam cumque adipisci ullam sit repellendus iste officia asperiores quam, alias ut necessitatibus rerum minus aliquid, cupiditate voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus eveniet nobis aliquam quam odio quisquam cupiditate dicta recusandae ratione saepe impedit, maxime, earum omnis quia sint. Excepturi aliquid, necessitatibus dolore, ad sint dolorum culpa rem voluptatem eum saepe quas ex ipsum! Alias recusandae est tenetur, voluptates optio, vitae modi consequuntur?