Content

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

ALT Tag

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 to a text element or fa fa-square font awesome icon.

Group - class="text_group"

Individual - class="text_individual"

Policy - class="text_policy"

Agent - class="text_agent"

Agency - class="text_agency"

Carrier - class="text_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.

This is a note title

Greg has an update to the CSS then this will look right.

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!

Automate your communication strategy for the New Year.

Want to learn more about automating your communication with your clients and agents? Read our free eBook about all the ways you can use AgencyBloc’s Automated Workflows to simplify your communication strategy in 2017.

Read Now

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.