turretcss

Demo

Demo of all HTML elements with turretcss styles applied.

Colors

White
Light
Grey
Dark
Black
Primary
Secondary
Tertiary
Error
Warning
Success
Info

Shades

Light

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

Grey

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

Dark

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

Palettes

Primary

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

Secondary

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

Tertiary

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

Indicators

Error

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

Warning

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

Success

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

Info

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

Box Shadows

Box Shadow XXL
Box Shadow XL
Box Shadow L
Box Shadow M
Box Shadow S
Box Shadow XS
Box Shadow XXS

Icons

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 XXL

Display Title XL

Display Title L

Display Title M

Display Title S

Display Title XS

Display Title XXS

All Caps

All Caps XXL

All Caps XL

All Caps L

All Caps M

All Caps S

All Caps XS

All Caps XXS

Lead

Lead XXL

Lead XL

Lead L

Lead M

Lead S

Lead XS

Lead XXS

Paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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% 70% 70%

Elements

Button

Button Disabled

Button Spinner

Button Block

Button Pill

Button Square

Button with SVG

Button Sizes

Button Anchors

Button Shades

Disabled

Button Palettes

Disabled

Button Indicators

Disabled

Button Icon

Button Icon with Text Sizes

Button Icon with Text Sizes Anchors

Button Group

Button Group Block

Figure

Figure Caption

Spinner

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