Full Width Container

  • Ability to set top/bottom padding at each breakpoint (default is 30px, 65px)
  • Can choose color, image, or video background
  • Ability to change from color to an image or vice versa at different breakpoints
  • Ability to choose position of background image (Center Center, Top Left, Bottom Right, Left Center, Left Bottom, Right Top, Right Center, Center Top, Center Bottom)
  • Can set background image size
  • Can add Back to Top link (can change color on link)

Div Component

  • Ability to drag divs into a full width, within columns, etc.
  • Can add a border & choose how many pixels thick
  • Ability to adjust padding (will be same on all sides)
  • Ability to adjust the height for responsive
  • Ability to adjust the background color
  • We can also use this in a hero image as the transparent box (only white for now) that appears over a background image.

Column Components

2-column combinations

6x6
4x8
8x4
2x10
10x2
3x9
9x3
7x5
5x7

3-column combinations

4x4x4
3x3x6
6x3x3
2x8x2
1x10x1
3x6x3
5x2x5

4-column combinations

1x5x5x1
2x4x4x2
3x3x3x3

6 Column

2x2x2x2x2x2

Article Full-size Image & Article Full-size Video

Article Full-size Image

Can hyperlink image, set size on each breakpoint, and add caption

Article Image Caption

Article Full-size Video

Can embed YouTube videos

Horizontal Tabs

Horizontal Tab (Pill Format)

  • Ability to add up to 7 tabs across a page.
  • Ability to change the background color
  • Can change active/inactive tab color
  • Can add either buttons in the pill format or tabs (tabs are similar to what is used on the Program Landing pages)
  • Can change inactive/active text color.
  • The tabs also have their own URLs so we will have the ability to anchor link to a specific tab.

Horizontal Tab (Tab Format)

  • Ability to add up to 7 tabs across a page.
  • Ability to change the background color
  • Can change active/inactive tab color
  • Can add either buttons in the pill format or tabs (tabs are similar to what is used on the Program Landing pages)
  • Can change inactive/active text color.
  • The tabs also have their own URLs so we will have the ability to anchor link to a specific tab.

Vertical Tabs

  • Can choose up to 10 tabs
  • Select Active Tab Color
  • Select Active Tab Font Color
  • Select Active Tab Border Color
  • Select Default Tab Color
  • Select Default Tab Font Color
  • Select Default Tab Border Color
  • Select Background Color
  • Select Tab Ratio (1:11, 2:10, 3:9, 4:8)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada pulvinar libero et dapibus. Suspendisse mattis scelerisque massa non sollicitudin. Nunc convallis sit amet nunc id facilisis. Mauris ac condimentum arcu. Nullam ac augue vel justo accumsan egestas. Aenean rhoncus, erat maximus dictum suscipit, sapien urna venenatis ligula, fermentum consequat turpis augue eu quam.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada pulvinar libero et dapibus. Suspendisse mattis scelerisque massa non sollicitudin. Nunc convallis sit amet nunc id facilisis. Mauris ac condimentum arcu. Nullam ac augue vel justo accumsan egestas. Aenean rhoncus, erat maximus dictum suscipit, sapien urna venenatis ligula, fermentum consequat turpis augue eu quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada pulvinar libero et dapibus. Suspendisse mattis scelerisque massa non sollicitudin. Nunc convallis sit amet nunc id facilisis. Mauris ac condimentum arcu. Nullam ac augue vel justo accumsan egestas. Aenean rhoncus, erat maximus dictum suscipit, sapien urna venenatis ligula, fermentum consequat turpis augue eu quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada pulvinar libero et dapibus. Suspendisse mattis scelerisque massa non sollicitudin. Nunc convallis sit amet nunc id facilisis. Mauris ac condimentum arcu. Nullam ac augue vel justo accumsan egestas. Aenean rhoncus, erat maximus dictum suscipit, sapien urna venenatis ligula, fermentum consequat turpis augue eu quam.

Carousel

Can change slider speed, add/remove indicators & thumbnails, can have up to 15 slides

Sticky Nav

Used on generic full width. Must have title component with h2 in each section for it to pick them up. Example on: Finance DLP

Article Highlight

Ideas Section

2-up, 3-up, and 4-up Ideas Section

Featured Books

Miscellaneous Components

Header Bar

Title Component h1-h5

Spacer Component

We can add a spacer in between components. We can set the height of the space in all 4 breakpoints. The spacer below is 30px.

Social Share

These are individual icons. You can add one or all to a page.



ABOVE: Horizontal Rule: Color is set. We cannot not change color or thickness at this point.


Button

Primary or Secondary buttons. Have option to make full width

Templates