Return to Client•Studio
Common page content modules
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)
Sub elements used inside the modules or page templates
Toast - similar to alert but softer https://flowbite.com/docs/components/toast/
Pagination - Sometimes required for blog / content archives (if not dynamically loaded)
Skeleton - Application wireframe mockup (design) or loading effect (code) https://flowbite.com/docs/components/skeleton/
Modal (aka popup, overlay) - https://tailwindui.com/components/application-ui/overlays/modals