joyent-portal/packages/ui-toolkit/src/text
2018-05-08 15:32:10 +01:00
..
__tests__ refactor(instances): refactor create instance flow 2018-05-08 15:32:10 +01:00
headings.js refactor(instances): refactor create instance flow 2018-05-08 15:32:10 +01:00
index.js feat(ui-toolkit): implement native <sup> with badge 2018-01-30 11:03:40 +00:00
p.js refactor(instances): refactor create instance flow 2018-05-08 15:32:10 +01:00
Readme.md docs(ui-toolkit): add parallax 2018-04-05 14:29:22 +01:00
small.js feat(ui-toolkit): remove all margins 2018-05-08 15:32:10 +01:00
strong.js refactor(instances): refactor create instance flow 2018-05-08 15:32:10 +01:00
sup.js feat(ui-toolkit): remove all margins 2018-05-08 15:32:10 +01:00
Superscript.md docs(ui-toolkit): add parallax 2018-04-05 14:29:22 +01:00

Large Type Scale

const React = require('react');
const H1 = require('/').H1;
const H2 = require('/').H2;
const H3 = require('/').H3;
const H4 = require('/').H4;
const P = require('/').P;
const Small = require('/').Small;

const styles = {
  color: '#979797',
  marginBottom: '22px',
  display: 'block',
  marginTop: '6px',
  padding: 0
};

<div>
  <H1>H1 - Dont say it, shout it</H1>
  <Small style={styles}>Libre Franklin Regular - 36px with 45px leading</Small>
  <H2>H2 - Breadcrumb? More like breadloaf</H2>
  <Small style={styles}>Libre Franklin Regular - 24px with 30px leading</Small>
  <H3>H3 - Your friendly neighborhood workhorse</H3>
  <Small style={styles}>Libre Franklin Regular - 21px with 26px leading</Small>
  <H4>H4 - Body's bigger brother</H4>
  <Small style={styles}>Libre Franklin Semibold - 15px with 24px leading</Small>
  <P>P - Body copy</P>
  <Small style={styles}>Libre Franklin Regular - 15px with 24px leading</Small>
  <Small> C - Caption text</Small>
  <Small style={styles}>Libre Franklin Regular - 13px with 18px leading</Small>
</div>;

Small Type Scale

const React = require('react');
const H1 = require('/').H1;
const H2 = require('/').H2;
const H3 = require('/').H3;
const H4 = require('/').H4;
const P = require('/').P;
const Small = require('/').Small;

const styles = {
  color: '#979797',
  marginBottom: '22px',
  display: 'block',
  marginTop: '6px',
  padding: 0
};

<div>
  <H1 small>H1 - Dont say it, shout it</H1>
  <Small style={styles}>Libre Franklin Regular - 32px with 45px leading</Small>
  <H2 small>H2 - Breadcrumb? More like breadloaf</H2>
  <Small style={styles}>Libre Franklin Regular - 21px with 30px leading</Small>
  <H3 small>H3 - Your friendly neighborhood workhorse</H3>
  <Small style={styles}>Libre Franklin Regular - 18px with 26px leading</Small>
  <H4 small>H4 - Body's bigger brother</H4>
  <Small style={styles}>Libre Franklin Semibold - 15px with 24px leading</Small>
  <P>P - Body copy</P>
  <Small style={styles}>Libre Franklin Regular - 15px with 24px leading</Small>
  <Small> C - Caption text</Small>
  <Small style={styles}>Libre Franklin Regular - 13px with 18px leading</Small>
</div>;