This page exists mainly for checking the CSS styles. All styles here are simply derived from Foundation’s core CSS classes

H1

NOTE: (Never EVER use H1 in the body. It’s here for completeness)

H2 is this

Here is some paragraph text. Pariatur this is italics and this is bold and this is both commodo et nisi ea est nulla enim ad id consequat aliquip. Proident anim est ad officia nostrud excepteur anim reprehenderit elit anim est irure pariatur. Duis ipsum anim dolor veniam voluptate occaecat cupidatat incididunt aliquip adipisicing officia dolor. Irure proident esse ullamco qui consequat elit excepteur qui velit proident cupidatat commodo amet. Tempor duis et qui dolore ex tempor esse dolore laboris ullamco deserunt. Nisi Lorem cupidatat aliqua elit commodo occaecat incididunt. In id sit et in consectetur eu incididunt aliquip Lorem deserunt et id non aliquip.

H3 is this

H4 is this

H5 is this

H6 is this

Images

Sometimes you want an image to live on the left. Veniam deserunt do magna nisi sunt ea quis aliqua aute cupidatat elit Lorem non. Dolore veniam deserunt nisi aute magna. Officia id dolor aliqua sunt dolor id cupidatat quis ea elit excepteur ea non. Aute sint aute in enim pariatur veniam ut. Ut Lorem anim occaecat aliquip quis irure ipsum elit do deserunt consequat aute cillum. Magna dolore sint adipisicing labore deserunt. Incididunt culpa laboris nisi Lorem excepteur.

Other times it belongs on the right. Veniam deserunt do magna nisi sunt ea quis aliqua aute cupidatat elit Lorem non. Dolore veniam deserunt nisi aute magna. Officia id dolor aliqua sunt dolor id cupidatat quis ea elit excepteur ea non. Aute sint aute in enim pariatur veniam ut. Ut Lorem anim occaecat aliquip quis irure ipsum elit do deserunt consequat aute cillum. Magna dolore sint adipisicing labore deserunt. Incididunt culpa laboris nisi Lorem excepteur.

Embeds

This is mainly for youtube videos. Just use the regular youtube embed code wrapped in a responsive-embed div

Tables

Sometimes you need tabular data:

Buttons

Basic Buttons

Learn More View All Features

Button Sizes

So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Button Coloring

Primary Secondary Success Alert Warning

Hollow Buttons

Primary Secondary Success Alert Warning Disabled

Buttons with Icons

We use font-awesome icon set for icons

‘home’ icon

Maybe you want a custom icon:

‘home’ icon

Block-grids

Block grids are a shorthand way to create equally-sized columns.

Cards

Cards can be used to display items of a similar class

This is a row of cards.

This row of cards is embedded in an Flex Block Grid.

This is a card.

It has an easy to override visual style, and is appropriately subdued.

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Advanced grid work

Everything in foundaiton is rows and columns. There are always 12 columns in a row:

Grids can also behave differently at different sizes (think phone vs. desktop)