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