Flex Centered Element

Notes
  • A flex parent set to horizontal and vertical center

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 positioned into wrappers with a standard ratio.
  • Images are set to fit:cover to make sure they fill the container while maintaining their original aspect 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...

Frequently Asked Questions

  • Frequently asked question?

    This is a response to a frequently asked question.

  • Frequently asked question?

    This is a response to a frequently asked question.

  • Frequently asked question?

    This is a response to a frequently asked question.

Notes
  • Has an animation attached to open .faq-pane on click and close it on second click.
  • Inside of the FAQ is a rich text block to allow for links and other media.
  • Customize the dropdown arrow icon by replacing the SVG inside the embed.

Newsletter Sign up

Notes
  • The input and button are two elements inside a flex parent.
  • Make sure to style the error and success states

Contact Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Notes
  • Use .form__2-col for inputs that need to be side by side. They stack on mobile.
  • Make sure to style the error and success states

Social Links

Notes
  • Use text color to adjus the SVG's color
  • Make sure to style the error and success states

Profile Image

Eleanor Rigsby

Job Title
elenaor@whiteboard.is
Notes
  • No notes yet.

FOOTER COPYRIGHT script

Notes
  • Drop this embed script in where you need the current year in a copyright callout.