@leafygreen-ui/typography
leafyGreen UI Kit Typography
Last updated a month ago by michael.mitchell .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/typography 
SYNC missed versions from official npm registry.

Typography

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/typography

NPM

npm install @leafygreen-ui/typography

Peer Dependencies

Package Version
@leafygreen-ui/leafygreen-provider ^1.1.0

Example

import { H1, H2, Subtitle, Body, InlineCode, Disclaimer, Overline } from '@leafygreen-ui/typography';
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<Subtitle>Subtitle</Subtitle>
<Body weight="medium">Body</Body>
<InlineCode>Code</InlineCode>
<>
  <InlineKeyCode>CTRL</InlineKeyCode>
  <InlineCode>+</InlineCode>
  <InlineKeyCode>C</InlineKeyCode>
</>
<Disclaimer>Disclaimer</Disclaimer>
<Overline>Overline</Overline>
<Link href="http://mongodb.design">MongoDB.design</Link>

Output HTML

<h1 class="leafygreen-ui-wbskfk">Heading 1</h1>
<h2 class="leafygreen-ui-1t0mh6j">Heading 2</h2>
<h3 class="leafygreen-ui-1t0mh6j">Heading 3</h3>
<h6 class="leafygreen-ui-1dmxpt6">Subtitle</h6>
<div class="leafygreen-ui-wkgw79">Body</div>
<code class="leafygreen-ui-18bk0d8">Code</code>
<code class="leafygreen-ui-1vl51l4">CTRL</code
><code class="leafygreen-ui-1vl51l4">+</code
><code class="leafygreen-ui-1vl51l4">C</code>
<small class="leafygreen-ui-1cggyhz">Disclaimer</small>
<div class="leafygreen-ui-vezyzr">Overline</div>
<a
  href="http://mongodb.design"
  target="_blank"
  class="leafygreen-ui-1toaa4e"
  data-leafygreen-ui="anchor-container"
>
  <span>MongoDB.design</span>
  <svg
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>Open in New Tab</title>
  </svg>
</a>

Properties

All props extend the HTMLElementProps of their root tag, however the below components accept extra props

Component Root
H1 h1
H2 h2
H3 h3
Subtitle h6
Body p
InlineCode code
InlineKeyCode code
Disclaimer small
Overline p
Link a
Label label
Description p

Body

Prop Type Description Default
weight 'regular' | 'medium' font-weight applied to typography element 'regular'

InlineCode

Prop Type Description Default
href string | undefined If an href prop is passed to InlineCode it will be rendered with an a tag wrapping the code tag. Otherwise, it'll simply render as a code tag.

Overline

Prop Type Description Default
as React.ElementType The component or HTML tag to be rendered by the <Box /> component. Note: This will supersede the behavior of any other props. p

Link

Prop Type Description Default
arrowAppearance 'hover' | 'persist' | 'none' Displays a right arrow adjacent to the anchor tag. When set to persist the arrow will always be present. When set to hover, the arrow will only appear when hovering over the arrow. 'none'
hideExternalIcon boolean Hides the external icon when the current host name is different from the host of the destination URL false

Label

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false
disabled boolean Determines whether the component should appear disabled false

Description

Prop Type Description Default
darkMode boolean Determines if the component renders in dark mode false

Note: If the current host name is different from the host of the destination URL, we will provide the "_blank" value for the target prop. When the target is set to open in a new tab, we render an icon as a visual affordance.

Current Tags

  • 7.3.0                                ...           latest (a month ago)

19 Versions

  • 7.3.0                                ...           a month ago
  • 7.2.0                                ...           a month ago
  • 7.1.1                                ...           2 months ago
  • 7.1.0                                ...           2 months ago
  • 7.0.0                                ...           3 months ago
  • 6.0.1                                ...           3 months ago
  • 6.0.0                                ...           3 months ago
  • 5.0.0                                ...           3 months ago
  • 4.3.0                                ...           4 months ago
  • 4.2.2                                ...           4 months ago
  • 4.2.1                                ...           5 months ago
  • 4.2.0                                ...           5 months ago
  • 4.1.1                                ...           6 months ago
  • 4.1.0                                ...           6 months ago
  • 4.0.0                                ...           7 months ago
  • 3.0.0                                ...           7 months ago
  • 2.0.0                                ...           7 months ago
  • 1.0.1                                ...           10 months ago
  • 1.0.0                                ...           10 months ago

Copyright 2014 - 2017 © taobao.org |