Component Wrappers

This page talks about how to take the components and add them on to a template. Generally our components have the ability to repeate multiple times, there are a few way to handle the repeated content.

TODO

Also See

Bootstrap Grid

Some Examples. See boot strap documentation for more information on building for the grid

Full Bleed

Full Bleed with 2 columns - Column 1

Full Bleed with 2 columns - Column 2

Container

Container with 2 columns - Column 1

Container with 2 columns - Column 2

Component Wrappers

Simple

The Simple wrapper simply takes the item and adds them onto the page

Content Item One

subhead

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu turpis porta, luctus justo sit amet, rhoncus nibh. Pellentesque mollis facilisis orci, sed faucibus dui tempor a. Sed imperdiet, nibh a tristique volutpat, est leo dapibus diam, consectetur volutpat tellus mauris at elit. Donec metus quam, faucibus ut tempor eu, sodales sed purus. Proin condimentum urna convallis maximus condimentum. Nullam a tellus ut lectus consequat imperdiet. In vel efficitur odio. Donec ultrices nunc ultricies, vestibulum urna a, aliquam lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Content Item Two

Another one

Content Item Three

Stuff

Carousel

Grid

Three column example

Content Item One

subhead

Content Item Two

Another one

Content Item Three

Stuff

Two column example

Content Item One

subhead

Content Item Two

Another one

Content Item Three

Stuff

Direct

If you have single item you can display. Generally this shouldn't be done.

Content Item One

subhead

Modal

We can also pass a component into a modal, and setup a button that will dispaly that component in the modal.

Modifiers

Generally, comnonents should look the same everywhere, however in certian casese we may want to make slight modifications to allow us to use components in slightly different ways. This could be changing the background color or changing the heigh. In these cases we can create a 'modifier' in our BEM css system to modifiy the CSS for that component in that instance and change how it appears.
Here is an example of a storytelling component with at 'green' modifier (which sets the background color to green in the css).

Content Item One

subhead

Content Item Two

Another one

Content Item Three

Stuff

Component Settings

Some Components have features built into them that developers can change to allow them to function in different ways based on a value. This allows us to use componennts in slighly modified ways. See component documentation for the settings that can be modified. Here is an example of the storytelling component with the number of boostrap columns the image takes up (imageCols) set to 8.

Content Item One

subhead

Content Item Two

Another one

Content Item Three

Stuff