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