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
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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.