# @berlitz/globals

> Globals component for the Max Design System

Latest version **4.9.4** (published 2026-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @berlitz/globals
pnpm add @berlitz/globals
yarn add @berlitz/globals
bun add @berlitz/globals
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 4.9.4 |
| Published | 2026-05-26 |
| First published | 2018-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 95.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | berlitz |

## Links

- npm: https://www.npmjs.com/package/@berlitz/globals
- Homepage: https://github.com/berlitz-global/max/blob/master/components/globals/CHANGELOG.md
- npm.io page: https://npm.io/package/@berlitz/globals

## Dependencies (4)

- [shortid](https://npm.io/package/shortid.md) ^2.2.14
- [@berlitz/link](https://npm.io/package/@berlitz/link.md) 3.2.0
- [@berlitz/list](https://npm.io/package/@berlitz/list.md) 3.2.30
- [@berlitz/max-utils](https://npm.io/package/@berlitz/max-utils.md) 4.8.3

## Recent versions

- 4.9.4 (latest) — 2026-05-26
- 4.4.2-test.2 (canary) — 2022-01-24
- 4.9.3 — 2026-03-09
- 4.9.2 — 2025-06-03
- 4.9.1 — 2025-05-28
- 4.9.0 — 2025-04-23
- 4.8.4 — 2025-04-21
- 4.8.3 — 2025-04-16
- 4.8.2 — 2025-04-16
- 4.8.1 — 2025-04-16
- 4.8.0 — 2025-04-16
- 4.7.16 — 2025-02-28
- 4.7.15 — 2025-02-27
- 4.7.14 — 2024-09-09
- 4.7.13 — 2024-08-26
- … 224 more at https://npm.io/package/@berlitz/globals/versions

## README

# Globals [![npm version](https://img.shields.io/npm/v/@berlitz/globals.svg)](https://www.npmjs.com/package/@berlitz/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

```shell
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

```jsx
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

---
_Source: https://npm.io/package/@berlitz/globals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._