Collapsible sections

.bg-tint
_{(Add class to Container/Wrapper)}

.accordion
_{(Add class to Accordion item NOT Accordion itself)}

Collapsible section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis molestie felis vitae dictum.

Donec sit amet nulla aliquet, tempor elit et, tincidunt turpis. Aliquam vel arcu sit amet quam ullamcorper maximus volutpat aliquam sapien.

Collapsible section 2

Aliquam vel arcu sit amet quam ullamcorper maximus volutpat aliquam sapien.

Collapsible section 3

Nunc est elit, semper et magna vel, dapibus convallis arcu. Nam eget ipsum vitae sem imperdiet posuere. Sed eget neque pretium, pharetra elit posuere, malesuada est.

.bg-black
_{(Add class to Container/Wrapper)}

.accordion
_{(Add class to Accordion item NOT Accordion itself)}

Collapsible section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis molestie felis vitae dictum.

Donec sit amet nulla aliquet, tempor elit et, tincidunt turpis. Aliquam vel arcu sit amet quam ullamcorper maximus volutpat aliquam sapien.

Collapsible section 2

Aliquam vel arcu sit amet quam ullamcorper maximus volutpat aliquam sapien.

Collapsible section 3

Nunc est elit, semper et magna vel, dapibus convallis arcu. Nam eget ipsum vitae sem imperdiet posuere. Sed eget neque pretium, pharetra elit posuere, malesuada est.

Divider lines

Separator

<hr>

<div> tags with classes

.divider-solid

.divider-gold

.divider-gold .w40

.divider-black

.divider-black .w25 .center

.divider-white

Page tabs

.pagetabs-nav-tint
_{(Add class to the parent “Advanced Tabs” block)}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id eros euismod, volutpat elit id, commodo nisi. In imperdiet tempus nulla et rutrum. Fusce malesuada efficitur magna vitae dapibus.

Nulla facilisi. Nam malesuada nisi libero, cursus ultricies odio elementum ac. Vestibulum ornare, eros vitae mattis tincidunt, elit metus elementum orci, eu luctus mauris est sed tortor. Suspendisse vitae interdum nibh.

Sed lobortis leo vel lorem convallis aliquet. Sed quis odio ac nulla vehicula bibendum nec vitae massa. Duis scelerisque mi et massa fringilla hendrerit.

.pagetabs-nav-black
_{(Add class to the parent “Advanced Tabs” block)}

Mauris tincidunt semper turpis non consectetur. Nulla eu augue tristique, porta elit non, lacinia felis.

In luctus tempor metus eu porttitor. Morbi tortor sapien, pellentesque vel viverra non, ultricies sit amet velit.

Quisque lacus felis, euismod ac magna gravida, tempus tristique mi.

Mauris malesuada dui in suscipit pharetra. Integer venenatis arcu quis nulla ultrices, dictum scelerisque ex venenatis.

Donec vitae condimentum arcu.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Etiam dictum augue mauris, eu sollicitudin dolor convallis a. Maecenas tellus ipsum, porta sit amet sodales eu, vehicula vel nunc.

Tables

<table> border classes

.tbl-row-bdr
_{(Add class to the parent “Table element” block)}

Header	Header	Header
Cell contents here	Cell contents here	Cell contents here
Cell contents here	Cell contents here	Cell contents here

.tbl-col-bdr
_{(Add class to the parent “Table element” block)}

Header	Header	Header
Cell contents here	Cell contents here	Cell contents here
Cell contents here	Cell contents here	Cell contents here

.tbl-cel-bdr
_{(Add class to the parent “Table element” block)}

Header	Header	Header
Cell contents here	Cell contents here	Cell contents here
Cell contents here	Cell contents here	Cell contents here

.tbl-space
_{(Add class to the parent “Table element” block)}

Added .bg-tint to 1st <tr> and .bg-black to 2nd <tr> to see spacing

Header	Header	Header
Cell contents here	Cell contents here	Cell contents here
Cell contents here	Cell contents here	Cell contents here

Table shading classes

Add .bg-black, .bg-tint or .bg-white classes to either <table>, <tr> or <td> tags.

<table class="tbl-row-bdr bg-black">

<tr class="">

Header	Header	Header
Cell contents here	Cell contents here	Cell contents here
Cell contents here	Cell contents here	Cell contents here

<table class="tbl-row-bdr">

<tr class="bg-tint">

Header	Header	Header
Cell contents here	Cell contents here	Cell contents here
Cell contents here	Cell contents here	Cell contents here

Overlap / Overlap positioning

Add .overlap class to the parent block and .overlap-child to the inner/child block.

Example 1

To position the .overlap-child block, manually set it within the “Advanced” tab of the block.

Overlap child heading

Example 2

This .overlap-child block is positioned “Center Right”.

Overlap child heading

Breadcrumbs

.breadcrumb
_{(Add class to the parent “Breadcrumbs” block)}

Home /

Headings

Classes don’t need to be added to headings. Just use “Heading Advanced” blocks and change the “Heading Tag” accordingly, i.e. h1, h2, etc

Heading title 1

Heading title 2

Heading title 3

Heading title 4

Heading title 5

Heading title 6

Message

.msg-error
_{(Add class to “Text Advanced” block)}

This is an Error message

.msg-warn
_{(Add class to “Text Advanced” block)}

This is a Warning message

.msg-info
_{(Add class to “Text Advanced” block)}

This is an Info message

.msg-success
_{(Add class to “Text Advanced” block)}

This is a Success message

.msg-inline
_{(Add class to “Text Advanced” block)}

This is an Inline message

Pull quotes

.pullquote
_{(Add class to “Blockquote tag” block)}

Sit amet dictum sit amet justo donec enim.

.pullquote .left
_{(Add class to “Blockquote tag” block)}

Sit amet dictum justo donec enim diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit eget gravida cum sociis natoque penatibus et magnis. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.

.pullquote .right .w90
_{(Add class to “Blockquote tag” block)}

Sit amet dictum sit amet justo donec enim diam.

.pullquote .left .text-gold .w35
_{(Add class to “Blockquote tag” block)}

Sit amet dictum sit diam.

Borders

Standard border

.box-bdr-gold
_{(Add class to most blocks)}

class=”box-bdr-gold”

.box-bdr-black
_{(Add class to most blocks)}

class=”box-bdr-black”

.box-bdr-white
_{(Add class to most blocks)}

class=”box-bdr-white text-white”

(add .text-white class to make text white)

Thick border

.box-bdr-thick-gold
_{(Add class to most blocks)}

class=”box-bdr-thick-gold”

.box-bdr-thick-black
_{(Add class to most blocks)}

class=”box-bdr-thick-black”

.box-bdr-thick-white
_{(Add class to most blocks)}

class=”box-bdr-thick-white text-white”

_{(Add .text-white class to make text white)}

Side border

.bdr-top-gold
_{(Add class to most blocks)}

class=”bdr-top-gold box”

_{(Add .box class to add padding)}

.bdr-left-gold
_{(Add class to most blocks)}

class=”bdr-left-gold box”

_{(Add .box class to add padding)}

.bdr-right-gold
_{(Add class to most blocks)}

class=”bdr-right-gold box”

_{(Add .box class to add padding)}

.bdr-bottom-gold .bdr-thick
_{(Add class to most blocks)}

class=”bdr-bottom-gold bdr-thick box”

_{(Add .box class to add padding)}

.bdr-right-gold .bdr-bottom-gold
_{(Add class to most blocks)}

class=”bdr-right-gold bdr-bottom-gold box”

_{(Add .box class to add padding)}

.bdr-top-gold .bdr-left-gold .bdr-bottom-gold
_{(Add class to most blocks)}

class=”bdr-top-gold bdr-left-gold bdr-bottom-gold box”

_{(Add .box class to add padding)}

No border

.box-bdr-black .noborder
_{(Add class to most blocks)}

class=”box-bdr-black noborder”

.box-bdr-gold .noborder-top
_{(Add class to most blocks)}

class=”box-bdr-gold noborder-top”

.box-bdr-black .noborder-left
_{(Add class to most blocks)}

class=”box-bdr-black noborder-left”

.box-bdr-black .noborder-right
_{(Add class to most blocks)}

class=”box-bdr-black noborder-right”

.box-bdr-black .noborder-bottom
_{(Add class to most blocks)}

class=”box-bdr-black noborder-bottom”

.box-bdr-gold .noborder-top .noborder-bottom
_{(Add class to most blocks)}

class=”box-bdr-gold noborder-top noborder-bottom”

Buttons

.anu-btn
_{(Add class to “Button Advanced” block)}

Apply now

.anu-btn-black
_{(Add class to “Button Advanced” block)}

Apply now

.anu-btn-white
_{(Add class to “Button Advanced” block)}

Apply now

Carousel

.carousel
_{(Add class to “Slider And Carousel” block, and just manually set the slider “Height”, to “Loop”, and “Vertical Align” the inner content to the bottom)}

Features

Featured box (image left)

Probably easier to copy this “Row” and paste it and its blocks into the site you’re working on and tweak accordingly, as there are many aspects that need to changed, e.g. dynamic background image in 1st column (and changing its positioning depending on its size); dynamic text content in 2nd column.

FEATURED