@berlitz/globals v4.7.14
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
10 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago