2 Col Flex between Layout
Notes
  • It is also set to align vertically. Change to align top or bottom in the flex parent.
2 Col Flex Layout
Notes
  • Converts to a vertical layout on tablet. Remove the combo class to preserve the horizontal layout across all breakpoints.
  • Uses a "flex-spacer" in the middle, set to 8vw. Remove the spacer and you'll have two columns that are exactly 50% of the parent. You can also use the flex spacer to control vertical spacing on tablet and below.
  • On mobile, you can reverse the order so the second column is on top by using the "reverse" function on the flex parent. Recommend using a combo class to do this.
2 Col Grid Layout
Notes
  • Converts to a one column layout on mobile landscape.
  • Change the spacing between columns and rows in the "2-col-grid" class.
  • Change the alignment of the blocks under "align self"
3 Col Grid Layout
Notes
  • Converts to a two column layout on tablet and a one column layout on mobile landscape.
  • Change the spacing between columns and rows in the "2-col-grid" class.
  • Change the alignment of the blocks under "align self"
4 Col Grid Layout
Notes
  • Converts to a two column layout on tablet and a one column layout on mobile landscape.
  • Change the spacing between columns and rows in the "2-col-grid" class.
  • Change the alignment of the blocks under "align self"
Standard Image Wrappers
Notes
  • Images are absolutely position into wrappers with a standard ratio
Standard Cards

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Notes
  • No notes yet...

Full Width 2-col Layout

  • The side-by-side class is set to a minimum of 100vh. But it could exceed that if the content is large enough.
  • This content is nested inside of "side-by-side-content". It's got padding on top and bottom to make sure it doesn't get too close to the top and bottom of the viewport. It also has a max-width of 720px.
  • On mobile, this layout stacks vertically.
Button Text