@berlitz/blocks

Blocks

Blocks are sections that can be reused between marketing websites, they can be composed and ordered in any way to create various page layouts as needed. For project Blitz, Blocks are closely coupled with ContentStack's modular block system - which allows content editors to create layouts as needed from within the CMS.

Installation

yarn add @berlitz/blocks

Props

The blocks package contains all blocks as named exports, each of these will contain there own prop requirements. See here for a full list of blocks contained within the package. Every block is wrapped in a <Section/> component, which comes from @berlitz/globals. All blocks come with the following props in common - which are passed to the <Section/> wrapping the block.

Argument	Type	Required	Default	Notes
backgroundColor	string	N	ui00	The prop will be passed to theme.section.backgroundColor[yourProp]
size	string	N	md	The prop will be passed to theme.layout[yourProp], which will control vertical padding
alignCenter	bool	N	false	Center align all content in this content area block

Usage

import { BlockContentArea, BlockCards } from '@berlitz/blocks'
import { contentData, cardData } from './myExampleData.json'

const MyApp = () => {
    return <main>
        <BlockContentArea innerHtml={contentData.html} />
        <BlockCards
            backgroundColor='ui01'
            title="Nice Cards"
            subtitle="Very good subtitle"
            cards={cardData}
            alignCenter={alignCenter}
        />
    <main/>
}

When to use this component

• Marketing website layouts
• Landing pages