turretcss

Demo

Demo of all HTML elements with turretcss styles applied.

Contents

Colors

White
Black

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

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 with SVG

Button Sizes

Button Anchors

Extra Large Large Medium Small Extra Small

Button Shades

Button Palettes

Button Indicators

Button Icon

Button Icon with Text Sizes

Button Icon with Text Sizes Anchors

Button Button Button Button Button

Button Group

Button Group Block

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