Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@clds/typography

Package Overview
Dependencies
Maintainers
2
Versions
121
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clds/typography

  • 0.23.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
395
decreased by-3.89%
Maintainers
2
Weekly downloads
 
Created
Source

@clds/typography


npm version

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

NameReqTypeDefault
sizefalse['xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs']'sm'
typefalse['contrastInvert', 'regular', 'highContrast', 'lowContrast', 'url', 'success', 'warning', 'error', 'disabled']'regular'
asfalseHTML Tagspan

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
NameTypeDefault
asObjectreturn attrs as object instead of cssfalse
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
`;

Versioning

This library follows Semantic Versioning.

License

See LICENSE

FAQs

Package last updated on 15 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc