turretcss

Demo

Demo of all HTML elements with turretcss styles applied.

Contents

Colors

White
Black

Shades

Light

Light
Light 100
Light 200
Light 300
Light 400
Light 500
Light 600
Light 700
Light 800
Light 900

Grey

Grey
Grey 100
Grey 200
Grey 300
Grey 400
Grey 500
Grey 600
Grey 700
Grey 800
Grey 900

Dark

Dark
Dark 100
Dark 200
Dark 300
Dark 400
Dark 500
Dark 600
Dark 700
Dark 800
Dark 900

Palettes

Primary

Primary
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900

Secondary

Secondary
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900

Tertiary

Tertiary
Tertiary 100
Tertiary 200
Tertiary 300
Tertiary 400
Tertiary 500
Tertiary 600
Tertiary 700
Tertiary 800
Tertiary 900

Indicators

Error

Error
Error 100
Error 200
Error 300
Error 400
Error 500
Error 600
Error 700
Error 800
Error 900

Warning

Warning
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900

Success

Success
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900

Info

Info
Info 100
Info 200
Info 300
Info 400
Info 500
Info 600
Info 700
Info 800
Info 900

Typography

Headings

Heading 1 Heading 1 small

Heading 2 Heading 2 small

Heading 3 Heading 3 small

Heading 4 Heading 4 small

Heading 5 Heading 5 small
Heading 6 Heading 6 small

Display Title

Display Title

Big

Big

Small Caps

Small Caps

Lead

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.

Paragraph

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

link

Strong

strong

Emphasis

emphasis

Horizontal Rule


Blockquote

Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.

Name

Unordered List

  • Vehicula Dapibus Tellus Fermentum
  • Vehicula Dapibus Tellus Fermentum
  • Vehicula Dapibus Tellus Fermentum
    • Vehicula Dapibus Tellus Fermentum
    • Vehicula Dapibus Tellus Fermentum

Ordered List

  1. Vehicula Dapibus Tellus Fermentum
  2. Vehicula Dapibus Tellus Fermentum
  3. Vehicula Dapibus Tellus Fermentum
    1. Vehicula Dapibus Tellus Fermentum
    2. Vehicula Dapibus Tellus Fermentum

Definition List

Fringilla Ipsum Tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fringilla Ipsum Tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fringilla Ipsum Tellus
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code

<p>code</p>

Pre

<p>pre</p>

Kbd

Save file: cmd + S

Mark

mark

Form

Field

Field Float Label

Fieldset

Login

Form Message

Form message

Form message info

Form message error

Form message warning

Form message success

Input

Input Indicators

Input Sizes

Input Group

Input Group Sizes

Control

Checkbox

Radio

Switch

Control Indicators

Checkbox

Radio

Switch

Control Sizes

Checkbox

Radio

Switch

Select

Select Indicators

Select Sizes

Range

Range Indicators

Range Sizes

Progress

70%

Progress Indicators

70% 70% 70% 70%

Progress Sizes

70% 70% 70% 70% 70%

Elements

Button

Button Disabled

Button Spinner

Button Block

Button Pill

Button Square

Button Icon (SVG)

Button Sizes

Button Anchors

Extra Large Large Medium Small Extra Small

Button Shades

Button Palettes

Button Indicators

Figure

Figure Caption

Table

Table Caption
Vestibulum Sem Ipsum Dolor Fringilla Amet Mattis
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod

Table Responsive

Vestibulum Sem Ipsum Dolor Fringilla Amet Mattis
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod