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...