@clds/typography NPM

@clds/typography

Documentation of the Cloudinary Typography component.

The purpose of this component is to use display typography in the right scale and proportion according to predefind sizes.

For each type props the component will assign the following values: font-size, color, line-height, weight

Installation

Install the package using Yarn:

pnpm add @clds/typography

Usage

import Typography from '@clds/typography';

const Component = () => <Typography>Hello World</Typography>;

Props

Name	Req	Type	Default
size	false	'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs'	'sm'
type	false	'contrastInvert', 'regular', 'highContrast', 'lowContrast', 'url', 'success', 'warning', 'error', 'disabled'	'regular'
as	false	HTML Tag	span

Using other HTML Tags

If you want to keep all the typography styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag), you can use the "as" prop to do this at runtime.

<Typography as="h1">Hello World</Typography> // <h1>Hello World</h1>

typographyMixin

function(props: object, options: object)

In some cases when you like to use the typography sizes but not as a component, you can use this helper function to consume it as css.

please note: while using this helper u need to make sure to pass the size and type prop.

options

Name	Type	Default
asObject	return attrs as object instead of `css`	false

import { typographyMixin } from '@clds/typography';
import styled from 'styled-component';

const Div = styled.div`
  ${typographyMixin};
`;

<Div size="sm" weight="regular" />;

Predefined mixins

For use cases when you need to attach specific typography to created styled component, you can use predefined mixins, like:

import { typography } from '@clds/typography';
import styled from 'styled-components';

const MyComponent = styled.div`
  ${typography.sm.url};
  // ... rest of your style
`;