Insights Styles

Headings:

H2 - Bold (default)

H2 - Light

H2 - Blue

H2 - Accent

H2 - Circled

H3 - Bold (default)

H3 - Light

H3 - Blue

H3 - Accent

H3 - Circled

H4 - Bold (default)

H4 - Light

H4 - Blue

H5 - Bold (default)

H5 - Light

H5 - Blue

To set the number in the accent or circle, use a class num-x where x is the number.

For example, adding num-5 to this H3, which already has light, blue, and accent:

H3 with class="light blue accent num-5"

Heading with short bar

Bullet Lists:

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet consectetur. Mauris aliquet ligula augue enim pellentesque tortor fringilla.

• Lorem ipsum dolor sit amet consectetur.

• Dui pretium egestas venenatis neque.

• Nulla egestas enim pulvinar ultricies sapien at viverra.

Table - Full width (default)

Table styles:

w-400 - 400px width

w-300 - 300px width

w-200 - 200px width

alignleft - float left

aligncenter - align center

alignright - float right

These must be applied manually in the "Source" to the figure element surrounding the table element.

Table - 400px, floated right

<figure class="table w-400 alignright">

Velit veniam sunt duis deserunt ea anim veniam proident voluptate laboris veniam. Aliqua sint incididunt dolore in elit dolore fugiat do. Ea duis do aliqua velit ullamco. Sit eiusmod tempor laborum aliqua adipisicing veniam quis nostrud officia ad. Lorem cillum ex ullamco sunt consectetur pariatur ea. Minim commodo id aliquip anim id nostrud. Deserunt incididunt officia excepteur Lorem culpa laborum occaecat ut adipisicing id. 

Commodo Lorem sunt amet ullamco esse commodo occaecat. Id quis nisi aliquip enim nisi proident. Adipisicing do mollit do amet deserunt qui dolore. Veniam fugiat fugiat do pariatur minim adipisicing ex anim ad quis cupidatat mollit minim sint. Elit cillum cillum sint adipisicing amet. 

Voluptate minim laborum enim culpa magna ipsum nisi commodo cillum. Voluptate deserunt duis et ipsum exercitation ea elit qui ad nostrud tempor. Minim duis nostrud sint pariatur ut ipsum. Minim quis sint Lorem eu Lorem esse ipsum incididunt culpa ipsum tempor minim incididunt nisi. 

Table - 200px, floated left

(Note: 200px is too narrow for any more than two short columns, as seen here)

<figure class="table w-200 alignleft">

Ad ex pariatur mollit quis laboris ullamco sint aute commodo veniam magna. Irure enim occaecat ad anim ut cupidatat ad elit pariatur. Occaecat tempor minim proident nisi esse reprehenderit nulla sit. Et cillum in ad quis Lorem do. Consequat laborum minim aute irure aliquip non deserunt pariatur et nisi ut. Eiusmod do in mollit reprehenderit velit adipisicing.

Fugiat aliquip labore eu ut ea anim cillum consectetur aute fugiat. Id pariatur mollit elit culpa occaecat minim labore in ea Lorem culpa nulla exercitation commodo. Ipsum aliqua labore quis laboris anim ea magna tempor magna tempor quis occaecat.

Esse deserunt ex non eiusmod sint esse incididunt consequat commodo sint in ipsum. Anim deserunt enim occaecat officia deserunt amet excepteur laboris eu sint officia. Cillum Lorem nulla laborum aliquip consequat labore sint dolor.

Sint reprehenderit ipsum qui mollit. Aliqua eu mollit ullamco irure deserunt exercitation. Sunt ut mollit Lorem tempor consectetur. Aliqua nostrud quis velit elit minim ut ad elit velit cupidatat eu nostrud eu. Nostrud sunt ea nostrud Lorem laboris ad officia voluptate ad do. Labore sit anim veniam deserunt do elit non ipsum amet nulla officia reprehenderit. Aliquip magna id non ipsum Lorem consectetur commodo deserunt et veniam officia.

Table - 300px, aligned center

(Note: 300px is too narrow for any more than three short columns, as seen here)

<figure class="table w-300 aligncenter">

Hero image:

Use "Hero" tab above.

Angled Background - ON or OFF

Background Fade Into Image - Only available when "Angled Background" is set to OFF

Image Width Ratio - Choose a value between 35 and 65. Default is 50. This is the % of width the image will take up in the hero section. This way you can reshape the hero section for the image. For example, if the image is very wide, set this value higher to allow more of the image to be shown.

Full width (no classes):

Full width - Accent:

300px width:

300px width - Accent:

150px width - Proportional:

150px width - Square:

Custom size: Must be manually added into Source by changing aspect-ratio and width/height on img element.

<figure class="image">
    <img style="aspect-ratio:200/300;" src="/uploads/Life-sciences-COP.jpeg" alt="" width="200" height="300">
</figure>

300px width - Accent - Align Left:

Laboris consequat ipsum duis mollit in irure nulla quis. Adipisicing consectetur duis est reprehenderit eiusmod adipisicing. Fugiat aliquip nisi occaecat esse excepteur magna duis duis consequat sunt. Est excepteur amet commodo sint adipisicing sit aliqua ut cupidatat occaecat magna. Mollit pariatur quis et consectetur laboris occaecat enim minim tempor.

Veniam in anim ad commodo non dolor. Ex in culpa duis elit aliqua ipsum Lorem culpa proident nostrud velit. Et incididunt incididunt irure quis qui et et quis. Sint nulla deserunt duis consequat. Sunt quis quis Lorem non cillum ea aute aute excepteur reprehenderit reprehenderit dolore.

Enim culpa Lorem anim ex voluptate proident incididunt ad ut ea deserunt ut minim ea. Minim aliqua exercitation esse excepteur ea consequat in. Ipsum ut aute id nulla dolor tempor proident irure. Esse anim fugiat consectetur amet reprehenderit nostrud nostrud. Ipsum aliquip cillum proident proident culpa. Ad cillum officia exercitation adipisicing sit minim adipisicing.

300px width - Accent - Align Right:

Aliqua proident ad ea aliqua magna. Fugiat et ex sint nostrud ad reprehenderit tempor est ad tempor tempor fugiat officia commodo. Eiusmod enim cillum sit id. Nulla ad ut mollit sint id consectetur sunt. Esse officia nostrud laboris duis irure Lorem ullamco ullamco ea aliqua fugiat incididunt ullamco. In dolor enim ut culpa anim mollit sit velit ex officia eu et aliqua eiusmod.

Qui ut proident et ullamco enim reprehenderit. Nisi Lorem amet ad magna proident. Mollit ea est commodo qui ea dolor duis. Minim reprehenderit consectetur mollit magna nisi tempor anim velit amet amet. Consequat exercitation ex esse ut minim incididunt sunt ea. Labore Lorem ea proident sit ex fugiat non cillum ea. Veniam et reprehenderit aliquip officia reprehenderit eiusmod nisi eiusmod laboris.

Enim culpa Lorem anim ex voluptate proident incididunt ad ut ea deserunt ut minim ea. Minim aliqua exercitation esse excepteur ea consequat in. Ipsum ut aute id nulla dolor tempor proident irure. Esse anim fugiat consectetur amet reprehenderit nostrud nostrud. Ipsum aliquip cillum proident proident culpa. Ad cillum officia exercitation adipisicing sit minim adipisicing.

Full width - with caption:

Note: Caption must be added in Source -- use figcaption inside figure element after img element. 

Example:

<figure>
    <img>
    <figcaption>This is where the caption goes.</figcaption>
</figure>