npm.io
4.9.4 • Published 2 months ago

@berlitz/globals

Licence
MIT
Version
4.9.4
Deps
4
Size
96 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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