@berlitz/globals

Globals component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzGlobals from 'https://cdn.skypack.dev/@berlitz/globals';
</script>

README

Globals npm version

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