components-typography

Standard typography components for H1, H2, H3, H4, p, and blockquote elements.

Usage

import {H1} from "@arcteryx/components-typography";

const LoudRedHeading = () => (
    <H1 loud textColor="#ff0000">
);

A note on the colour attribute

Styled components (SC) strips out all non-standard HTML attributes so as to keep markup valid. The color attribute is an old school (now defunct) attribute that SC doesn't strip out, and is therefore giving us validation errors. Using textColor avoids this.

How-to import/reference fonts

Each consuming app is responsible to host and load its own fonts:

• Ensure global variable is defined as JSX references font-family: var(--font-urw-din);

For example URW is available on a AWS S3

https://images.arcteryx.com/fonts/urw-family-typekit.css