Content

This is a lead to the story below. This is a template in Spinternet.

This is just some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id tristique tellus. Vivamus erat ligula, varius congue sodales sit amet, tincidunt eget risus. Maecenas mattis felis at purus egestas tincidunt. Nulla quis faucibus eros. Mauris erat metus, laoreet sed aliquam vel, tristique sit amet turpis. Donec sed turpis at libero pharetra condimentum nec vel tortor. Praesent laoreet libero et dui egestas ac congue dolor porttitor. Morbi aliquam sollicitudin iaculis

Page Headings

Heading elements implement six levels of document headings, <h1>is the most important and <h6>is the least. A heading element briefly describes the topic of the section it introduces.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Size & Color

Please use discretion when changing the size and color of text. You may use color and size in combination to customize even further.

Color

  • Text "Cooler"
  • Text "Success"
  • Text "Warmer"
  • Text "Danger"

Size

  • Text "Smaller"
  • Text "Small"
  • Text "Large"
  • Text "Larger"
  • Text "Largest"

Entity Blocks & Text Color

Example: Add class="text_group" to a text element or fa fa-square fontawesome icon.

Group

Individual

Policy

Agent

Agency

Carrier


Quotes

This is a quote. Nulla quis faucibus eros. Mauris erat metus, laoreet sed aliquam vel, tristique sit amet turpis.

Donec sed turpis at libero pharetra condimentum nec vel tortor. Praesent laoreet libero et dui egestas ac congue dolor porttitor. Morbi aliquam sollicitudin iaculis

—John Shoumers

Figure

 

This is an figcaption for the image above.

Figures are images and image captions (or <figcaption>) that support the content. Donec sed turpis at libero pharetra condimentum nec vel tortor. Praesent laoreet libero et dui egestas ac congue dolor porttitor. Morbi aliquam sollicitudin iaculis

  1. Ordered List
  2. Ordered List
  3. Ordered List
  4. Ordered List
  5. Ordered List

Aside

Asides are used for information that supports the main body of content. The <aside> is placed above the paragraph it goes with. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id tristique tellus. Vivamus erat ligula, varius congue sodales sit amet, tincidunt eget risus.

  • Unordered List
  • Unordered List
  • Unordered List
  • Unordered List
  • Unordered List

Flex Columns

  • Flex Container

    You'll notice the text here is smaller than the page content. The text size has been adjusted for the column width.

  • Flex 3x

    You'll notice the text here is smaller than the page content. The text size has been adjusted for the column width.

  • Flex 3x

    You'll notice the text here is smaller than the page content. The text size has been adjusted for the column width.

  • Flex Container

    You'll notice the text here is smaller than the page content. The text size has been adjusted for the column width.

  • Flex 3x

    You'll notice the text here is smaller than the page content. The text size has been adjusted for the column width.

Styled Steps (FAQ)

Review the "Styled Steps" markup.
You may review the HTML by viewing source in your browser. You will be looking for <dl class="faq">
Copy and paste the example FAQ
The example FAQ will get you started with the structure of the HTML.
Update the text
The title should do a good job of describing the step, but you may need to bring additional clarity in the text below the title.

Screenshot

Screenshots have a minimum width of 720px, height can be anything you wish. Just add a class="screenshot" to an <img> tag and you're set! The rest of the markup is added with javascript.

screenshot

Note

This is a note title

This is a note.

This is a note title

This is a note.

Code

<p>Inline code</p>

JSON Pre-formated Data

{
    "Agencybloc Response": {
        "Status": "200",
        "addressID": "123456",
        "Action": "delete"
    }
}

HTML Pre-formated (not working yet)

test

Buttons

Buttons are organized in 4 rows, by color, width (full-width), icons and size. Any class from each of the three rows may be combined to customize a button.

ButtonButton DangerButton SuccessButton LightButton ClearButton Link

Button Full Width

Button w/ Icon (click for more)

Button XLargeButton LargeButton SmallButton Mini

Boxes

Box Simple/Center

Why should someone click on this, you'd better make this good.

Click Me!

Box Success/Center

Why should someone click on this, you'd better make this good.

Click Me!

Table Data

Heading Heading Heading
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table Data + Condensed

Heading Heading Heading
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table Data + Condensed + Stripe

Heading Heading Heading
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table List

Heading Heading Heading
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table List + Condensed

Heading Heading Heading
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table List + Condensed + Stripe

Heading Heading Heading
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Horizontal Rule

Default horizontal rule below.


"Clear" horizontal rule below.


"Double" horizontal rule below.


"Triple" horizontal rule below.