@vcnkit/typography v1.1.0
VCNKit/Typography
@vcnkit/typography
is a collection of components to represent various types of text.
Installation
NPM
$ npm install --save @vcnkit/typography
Yarn
$ yarn add @vcnkit/typography
Requirements
In order to use this package, you'll need to add ThemeProvider
from @vcnkit/theme somewhere in your render tree.
Usage
The following components are available:
- Hero
- Headline
- Title2
- Title1
- Subheading2
- Subheading1
- Body2
- Body1
- Caption
import { Title1, Body2 } from '@vcnkit/typography';
const SomeComponent = () => (
<div>
<Title1>This is a title</Title1>
<Body2>Body text is contained in either a Body2 or Body1</Body2>
</div>
)
Styles and colors
All the provided components come in various styles which will be determined by passing the correct props.
import { Body2, Caption } from '@vcnkit/typography';
const SomeComponent = () => (
<div>
<Body2>This text will show in the default, primary, style.</Body2>
<Body2 secondary>This will show in the secondary style instead.</Body2>
<Caption hint>A caption with the hint style</Caption>
<Caption disabled>A caption with the disabled style</Caption>
</div>
);
Using custom colors or attaching your own styles
To use a custom color, you can simply extend the exported component.
import { Title1 } from '@vcnkit/typography';
const RedTitle = Title1.extend`
color: red;
`;
For more information, see Styled Components: Extending Styles
Attaching the various typographic styles to your own components.
@vcnkit/typography
exposes helper functions to apply the styles to your own components
createTextStyle(family: string, type: string)
Arguments | Type | Description |
---|---|---|
family | string | Either 'body' or 'heading' |
type | string | One of: 'hero' , 'headline' , 'title2' , 'title1' , 'subheading2' , 'subheading1' , 'body2' , 'body1' , 'caption' |
Returns a Styled Components: CSS Helper with the base typographic style (font-family
, font-size
, font-weight
, line-height
,color
) for the given type.
import styled from 'styled-components';
import { createTextStyle } from '@vcnkit/typography';
const SomeComponent = styled.p`
${ createTextStyle('body', 'body1') }
`;
createTextSpacing(family: string, type: string)
Arguments | Type | Description |
---|---|---|
family | string | Either 'body' or 'heading' |
type | string | One of: 'hero' , 'headline' , 'title2' , 'title1' , 'subheading2' , 'subheading1' , 'body2' , 'body1' , 'caption' |
Returns a Styled Components: CSS Helper with default margins (margin-top
, margin-bottom
) for the given type.
import styled from 'styled-components';
import { createTextSpacing } from '@vcnkit/typography';
const SomeComponent = styled.p`
${ createTextSpacing('body', 'body1') }
`;
Margins
The components have no margins by default, to render them with the default margins pass the spacing
prop. If you want to render the components with a custom margin, simple extend
them.
The components all have default margins, to render it without the margin either extend
it or simply pass spacing={ false }
as prop.
import { Title1 } from '@vcnkit/typography';
const SomeComponent = () => (
<Title1 spacing>
This title will have margins.
</Title1>
);