Content Modules

Modules are the building blocks for pages and posts. They can sometimes be used on single page only (home) or they can be universal to the site (any post or page)

Here’s a list of commonly used content modules

You can find code for these elements from the Baselayer Themes. These often are the ones used in design or any new elements can often be derived from these.

You can also learn more at our Figma docs https://www.figma.com/file/LqZHqk6aIcb9VCiOVroCO4/Client-Studio---Common-Modules?node-id=0%3A4&t=vENvHqTf6MfaTcgV-1

Text + Image (aka Feature, Highlight) - Image aligned left and textblock (heading, p, btn) on the right. Usually automatically varied to switch sides on following blocks.
Banner (aka CTA, Full Image) - Usually full image (or color) background accompanied by vertically centered text block.
Columns (aka Grid) - Repeater text blocks / columns
Cards - Similar to columns but usually have background dropshadow and card header image.
FAQ (aka Accordion) - collapsible ul more or less
Carousel - it is what it is. Embla, Flickity, Slick are all common options here.
Numbers - usually columns with animated large h1 number
Tabs - Horizontal tabs that change content below (usually feature or text block)
Steps (aka Vertical Feature) - usually something where text columns (3-4) are vertically on the left and fixed single image on the right. The image changes when corresponding text column is highlighted (click, time or scroll)
Stack - Usually full screen panels that are scroll snapped together to create fixed effect (css only or js)

Common page content modules
Here’s a list of commonly used content modules