Globals

The Globals Component Contains:

• Layout - Grids, Sections, Spacings, Layout Utilities
• Typography - All Global Headings, Paragraphs Styles
• Rich Text - Styles for Typography, Video Embed, Tables, Images, Lists etc
• Flex - Wrapper element for flex alignment and positioning

Installation

yarn add @berlitz/globals

Props

Headings Props

| Argument | Type | Required | Default | Example | | ------------- | ------ | -------- | ------- | -------------- | | inverse | bool | ❌ | false | | | disableMargin | bool | ❌ | false | | | highlight | string | ❌ | null | | | color | string | ❌ | null | 'brandPrimary' |

Paragraphs Props

| Argument | Type | Required | Default | Example | | -------- | ------ | -------- | ------- | -------------- | | size | string | ❌ | md | sm / md / lg | | color | string | ❌ | null | 'brandPrimary' |

RichText Props

| Argument | Type | Required | Default | Example | | -------- | ---- | -------- | ------- | ------- | | inverse | bool | ❌ | false | |

Flex Props

| Argument | Type | Required | Default | Example | | -------- | ---- | -------- | ------- | ------- | | alignItems | string | ❌ | | flex-end / flex-start | | basis | string | ❌ | | auto / 0 / 200px | | direction | string | ❌ | | row / column | | grow | string | ❌ | | 1 / 0.5 / unset / inherit | | inline | bool | ❌ | | | | justifyContent | string | ❌ | | flex-end / flex-start / space-around, space-between | | width | string | ❌ | | 200px / 50% | | wrap | string | ❌ | | wrap / no-wrap |

Usage

import { P, H1, H2, H3, H4, H5, RichText } from '@berlitz/globals/lib/components/typography'
import { Flex } from '@berlitz/globals/lib/components/Flex'

const MyApp = () => (
  <>
    <H1>Hello World</H1>
    <div>
      <H2 highlight="secondary">H2 Heading</H2>
    </div>
    <P>I am an Example Paragraph</P>
    <RichText>
      <h3>Just a HTML heading</h3>
      <p>Just your average HTML Paragraph</p>
      <iframe src="//youtube.com/embed/9cWxP_HMkCA" />
    </RichText>
    <Flex direction="row" justifyContent="space-around">
      <div>Boxes</div>
      <div>distributed</div>
      <div>in a row</div>
    </Flex>
  </>
)

When to use this component

• Headings
• Paragraphs
• RichText
• Grids
• Containers