Typography

.icon-heading

.S1-hero

Heading 1

.h1

Heading 2

.h2

.h2-ext

Heading 3

.h3

.h3-ext

Heading 4

.h4

.h4-ext

Heading 5

.h5

.h5-ext

Heading 6

.h6

.subhead

.text-mono (Body Small Smallest)

.overline

Paragraph (Body Default)

.text-ext (Body Default Ext)

.text-lg (Body Featured)

.text-lg-ext (Body Featured Ext)

.text-m (Body Medium)

.text-m-ext (Body Medium Ext)

.text-sm (Body Small)

.text-sm-ext (Body Small Ext)

.tag

.tag.blue

<Block Quote>

.blockquote

.blockquote-citation

.text-white

.text-black

.text-blue (Blue 200 - Brand Blue)

.text-green (Green 200 - Brand Green)

.text-light-grey (Grey 300)

.text-grey (Grey 600)

.text-dark-grey (Grey 700)

.fw-bold

.fw-semibold

.fw-light

.text-left

.text-right

.text-center

.text-center-m

.text-center-sm

.text-center-xs

.hide-m

.hide-sm

.hide-xs

.overflow-hidden

Buttons

Button (.btn).btn.is-black .btn.is-outline

.btn.is-black

.btn.is-white

.btn.is-outline.is-white

Links

.text-link

.text-link.text-m-ext

.text-link.secondary

.text-link

.text-link.hover-green

.text-link.hover-white

Backgrounds

.bg-gradient-1

.bg-gradient-2

.bg-blue-grain

.bg-black-grain

Shadows

.shadow

.screen-shadow

.screen-shadow-left

Lists

.list (single column)

.list-item
.list-item.check-blue
.list-item.check-blue
.list-item.check-grey
.list-item.blue-ring

.list.large (more vertical spacing between items)

.list-item.icon-centered
.app-list-item

.2-col-list-wrapper (two columns - put a .list in each)

.list-item
.list-item
.list-item

.list-item
.list-item

.h-icon card

For support — support@convictional.com.au

Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

For partnerships & general —
sales@convictional.com.au

For compliance & security —
compliance@convictional.com.au

For compliance & security — compliance@convictional.com.au

.link-list

.link-list-heading

.link-list-item .link-list-item .link-list-item

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Swipers

Sections

.section – large desktop (> 1440px): 120px, desktop: 100px, tablet: 80px, mobile: 60px

.section.padding-small – large desktop (> 1440px): 80px, desktop: 80px, tablet: 60px, mobile: 60px

.section.padding-0 (no padding)

.section.pb-0 (padding-bottom: 0px)

.section.pt-0 (padding-top: 0px)

.section-divider > .section-divider-line

.section.bg-gradient-1

.section.bg-gradient-2

.section.bg-light-grey

Margins

.mb-0

.mb-4

.mb-8

.mb-10

.mb-12

.mb-16

.mb-20

.mb-24

.mb-28

.mb-32

.mb-40

.mb-48

.mb-60

.mb-xsmall – large desktop (> 1440px): 60px, desktop: 40px, tablet: 32px, mobile: 24px

.mb-small – large desktop (> 1440px): 80px, desktop: 60px, tablet: 48px, mobile: 32px

.mb-medium – large desktop (> 1440px): 100px, desktop: 80px, tablet: 80px, mobile: 60px

.mb-large – large desktop (> 1440px): 120px, desktop: 100px, tablet: 80px, mobile: 60px

Rich Text Field

Table of Contents

.toc-item .toc-item.active

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Link

Bold

List item
List item
List item

List item
List item
List item

Blockquote

Figure (images and videos)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a video ^

Waves Studio · Flamingosis - Breezy (feat. Mtbrd)

Getting Started

Columns need to be nested within a "row" and a direct child of a "container". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-m-1

col-m-11

col-m-2

col-m-10

col-m-3

col-m-9

col-m-4

col-m-8

col-m-5

col-m-7

col-m-6

col-m-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1

col-sm-11

col-sm-2

col-sm-10

col-sm-3

col-sm-9

col-sm-4

col-sm-8

col-sm-5

col-sm-7

col-sm-6

col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4

col-8

col-6

col-3

col-2

col-7

Reverse Wrapping (on tablet and mobile)

Use the 'reverse-on-m' combo class on the 'row' element to reverse it on tablet. Use the 'reverse-on-sm' combo class on the 'row' element to reverse it on mobile.

col-4

col-8

col-4

Vertical Alignment

Align-Start

To align columns from the top, combine a class of "align-start" preceded by the class of "row"

align-start

Align-Center

To align columns from the center, combine a class of "align-center" preceded by the class of "row"

align-center

Align-End

To align columns from the bottom, combine a class of "align-end" preceded by the class of "row"

align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of "justify-start" preceded by the by class of "row"

justify-start

Justify-Center

To align columns from the right, combine a class of "justify-center" preceded by the class of "row"

justify-center

Justify-End

To align columns from the right, combine a class of "justify-end" preceded by the class of "row"

justify-end

Justify-Between

To evenly space columns between each-other, combine a class of "justify-between" preceded by the class of "row"

justify-between

Justify-Around

To evenly space columns around each-other, combine a class of "justify-around" preceded by the class of "row"

justify-around

Self-Align Columns

To individually self-align columns, combine a class of "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start

self-center

self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last

order-first

.icon-heading

.S1-hero

Heading 1

Heading 2

.h2-ext

Heading 3

.h3-ext

Heading 4

.h4-ext

Heading 5

.h5-ext

Heading 6

.list (single column)

.list.large (more vertical spacing between items)

.2-col-list-wrapper (two columns - put a .list in each)

.h-icon card

For support — support@convictional.com.au

For partnerships & general — sales@convictional.com.au

For compliance & security — compliance@convictional.com.au

For compliance & security — compliance@convictional.com.au

.link-list

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Getting Started

Columns need to be nested within a "row" and a direct child of a "container". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

Full Width Container

Define your div with a class of "container-fluid" for full width.

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

Reverse Wrapping (on tablet and mobile)

Use the 'reverse-on-m' combo class on the 'row' element to reverse it on tablet. Use the 'reverse-on-sm' combo class on the 'row' element to reverse it on mobile.

Vertical Alignment

Align-Start

To align columns from the top, combine a class of "align-start" preceded by the class of "row"

Align-Center

To align columns from the center, combine a class of "align-center" preceded by the class of "row"

Align-End

To align columns from the bottom, combine a class of "align-end" preceded by the class of "row"

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of "justify-start" preceded by the by class of "row"

Justify-Center

To align columns from the right, combine a class of "justify-center" preceded by the class of "row"

Justify-End

To align columns from the right, combine a class of "justify-end" preceded by the class of "row"

Justify-Between

To evenly space columns between each-other, combine a class of "justify-between" preceded by the class of "row"

Justify-Around

To evenly space columns around each-other, combine a class of "justify-around" preceded by the class of "row"

Self-Align Columns

To individually self-align columns, combine a class of "self-start", "self-center", "self-end" preceded by the by class of "col"

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

For partnerships & general —
sales@convictional.com.au

For compliance & security —
compliance@convictional.com.au