@berlitz/globals

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