Typography

<div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">Primary link</h2>
        <div><a class="primary-link flex-inline flex-v-center plain-link font-HNM4-s" href="#" data-component="PrimaryLink"><span class="margin-right-s1">Full event details</span><span><div class="icon icon--green"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M22.7 12.6l-7.5-7.5c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l5.8 5.8H3.9c-.6 0-1 .4-1 1s.4 1 1 1h15.7l-5.8 5.8c-.4.4-.4 1 0 1.4.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.4-.4.4-1 0-1.4z"></path></svg></svg></div></span></a>
        </div>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Used to highlight more information, as an onward journey, link to a page or a category. Uses text-decoration property for underline.</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">Secondary link</h2>
        <div><a class="secondary-link font-HNM5-s font-HNM4-m " href="#">Opening hours</a>
        </div>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Standalone utility link. Uses text-decoration property for underline.</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">Body text link</h2>
        <div class="body-text">
            <p class="no-margin">There has even been a (failed) <a href="https://www.nytimes.com/2015/10/15/us/court-rules-hot-yoga-isnt-entitled-to-copyright.html">attempt to copyright a yoga system</a>.</p>
        </div>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Used in the main body copy. These are animated links which form part of the experience language. Uses border-bottom property for underline.</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">Plain text link</h2>
        <div class="plain-text">
            <p class="no-margin font-hnl4-s">Here is <a href="#">a link</a> in a block of non body text.</p>
        </div>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Links that appear in blocks of copy that are not body text, should follow the same behaviour as the Secondary link (note, font family/size is inherited for plain text links). Examples where this happens are author descriptions and image captions.</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB1</h2>
        <p class="styleguide__font__example--WB1">In Pictures</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">156px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">-20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">200px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Discover Landing page label (XL) • Decorative episodic article rail numbers</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB2</h2>
        <p class="styleguide__font__example--WB2">Research notes</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">60px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">-20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">78px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Discover Landing page label (L) • Article title if no lead/hero image</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB3</h2>
        <p class="styleguide__font__example--WB3">Inspired: Alchemists and housewives around a long table</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">44px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">0</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">60px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article title in page • Discover Landing page breaker link title</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB4</h2>
        <p class="styleguide__font__example--WB4">Sleep Paralysis: A brief history of fear, treatment and artistic creativity</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">33px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">0</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">48px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Discover landing page label (M) • Large article link title (1 of many) • Article gallery titles • Transporter title for articles</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB5</h2>
        <p class="styleguide__font__example--WB5">At the heart</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">22px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">32px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article section name • Article Quote 1 alt version • Some right hand rail module titles/labels • Article commenting panel name</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB6</h2>
        <p class="styleguide__font__example--WB6">Would like to meet: Anna</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">19px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">28px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article link title (1 of many) • Discover Landing page label (S) name: WB7
        </p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">WB7</h2>
        <p class="styleguide__font__example--WB7">Oops!...I wrote a Britney blog post</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">15px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">24px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Usage: Article link title (1 of many) • Playlist queue titles • List module links e.g. Most Popular on Discover Landing</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNM1</h2>
        <p class="styleguide__font__example--HNM1">Francis Crick Archives</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">36px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">48px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Library item/archive etc titles • Archive/Collection item counter</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNM2</h2>
        <p class="styleguide__font__example--HNM2">It was a large room, heavily outfitted with the usual badly ventilated furnaces, rows of bubbling crucibles, and one stu ed alligator. Things floated in jars. The air smelled of a limited life expectancy.</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">26px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">38px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article Quote 2</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNM3</h2>
        <p class="styleguide__font__example--HNM3">Library Item Group Info Label</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">20px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">30px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Library group info label • Bold option in article body • Bold option in Library item lead description • Transporter title for library things</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNM4</h2>
        <p class="styleguide__font__example--HNM4">Fingerprints</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">16px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">24px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Item title in library search results List view • Exhibition card dates • Archive/Collection card title • Archive/Collection card format</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNM5</h2>
        <p class="styleguide__font__example--HNM5">Filter</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">14px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">80</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">20px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Pimary, secondary &amp; tertiary buttons • Labels/optional labels • Bold option in library data</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNM6</h2>
        <p class="styleguide__font__example--HNM6">PP/CRI Medical Research Council</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">12px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">80</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">18px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Archive Breadcrumb sublevel names • Sublevel title on series tree card folder • Active lter button text</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL1</h2>
        <p class="styleguide__font__example--HNL1">— Personal Material</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">36px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">48px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Archive/Collection subfolder name (sits w/ title) • Archive/ Collection date range</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL2</h2>
        <p class="styleguide__font__example--HNL2">Sometimes provocative and always interesting, this series of shorter stories can be inspired by pretty much anything in Wellcome Collection and offers a quick insight into some of the themes we explore. This one comes from Elissavet Ntoulia.</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">26px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">38px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article lead paragraph</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL3</h2>
        <p class="styleguide__font__example--HNL3">By discovering (with James Watson) the double helix of DNA, and helping to crack its code, Francis Crick laid the foundations of modern molecular biology.
        </p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">20px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">30px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article lead paragraph • Main description in archives &amp; items etc • Article body copy</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL4</h2>
        <p class="styleguide__font__example--HNL4">Mental health : facing the challenges, building solutions : report from the WHO European Ministerial Conference</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">16px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">24px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Library item title on card/search result</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL5</h2>
        <p class="styleguide__font__example--HNL5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at hendrerit justo. Donec quis nibh malesuada, accumsan libero eu, commodo.</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">14px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">20px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Article card/link descriptions • Descriptive copy in cards/thumb links</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL6</h2>
        <p class="styleguide__font__example--HNL6">of 400</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">12px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">80</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">18px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Page jumper in book item viewer • Smallprint • Archive/Collection card description • Datestamps on cards/links</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">HNL7</h2>
        <p class="styleguide__font__example--HNL7">Enter your email *</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">11px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">80</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">18px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Active textfield hint text</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">LR1</h2>
        <p class="styleguide__font__example--LR1">PP/CRI</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">18px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">0</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">24px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Archive/sublevel reference number in title lockup (Archive page)</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">LR2</h2>
        <p class="styleguide__font__example--LR2">15th July 2016</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">14px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">-40</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">24px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Sub Info Label in Library • Last Updated date in Archive/collection • Article Quote 2 • Article image captions • Quantity indicator for theme • Episode indicator for episodic articles • Discover Landing block context</p>
    </div>
    <div class="styleguide__font">
        <h2 class="styleguide__font__name">LR3</h2>
        <p class="styleguide__font__example--LR3">PP/CRI/A</p>
        <dl class="styleguide__font__properties"><dt class="styleguide__font__property">Font-size:</dt>
            <dd class="styleguide__font__value">12px</dd><dt class="styleguide__font__property">Letter-spacing:</dt>
            <dd class="styleguide__font__value">-20</dd><dt class="styleguide__font__property">Line-height:</dt>
            <dd class="styleguide__font__value">18px</dd>
        </dl>
        <h2 class="styleguide__font__usage-title">Usage:</h2>
        <p class="styleguide__font__usage-text">Archive series tree card folder number • Search Results Filter quantity indicator
        </p>
    </div>
</div>
// @flow
import PrimaryLink from '../../components/Links/PrimaryLink/PrimaryLink';
import SecondaryLink from '../../components/Links/SecondaryLink/SecondaryLink';

type Props = {|
  fonts: Array<{|
    name: string,
    example: string,
    size: string,
    spacing: string,
    lineHeight: string,
    usage: string
  |}>
|}

const Typography = ({fonts}: Props) => (
  <div>
    <div className='styleguide__font'>
      <h2 className='styleguide__font__name'>Primary link</h2>
      <div>
        <PrimaryLink name='Full event details' url='#' />
      </div>
      <h2 className='styleguide__font__usage-title'>Usage:</h2>
      <p className='styleguide__font__usage-text'>Used to highlight more information, as an onward journey, link to a page or a category. Uses text-decoration property for underline.</p>
    </div>
    <div className='styleguide__font'>
      <h2 className='styleguide__font__name'>Secondary link</h2>
      <div>
        <SecondaryLink url='#' text='Opening hours' />
      </div>
      <h2 className='styleguide__font__usage-title'>Usage:</h2>
      <p className='styleguide__font__usage-text'>Standalone utility link. Uses text-decoration property for underline.</p>
    </div>
    <div className='styleguide__font'>
      <h2 className='styleguide__font__name'>Body text link</h2>
      <div className='body-text'><p className='no-margin'>There has even been a (failed) <a href='https://www.nytimes.com/2015/10/15/us/court-rules-hot-yoga-isnt-entitled-to-copyright.html'>attempt to copyright a yoga system</a>.</p></div>
      <h2 className='styleguide__font__usage-title'>Usage:</h2>
      <p className='styleguide__font__usage-text'>Used in the main body copy. These are animated links which form part of the experience language. Uses border-bottom property for underline.</p>
    </div>
    <div className='styleguide__font'>
      <h2 className='styleguide__font__name'>Plain text link</h2>
      <div className='plain-text'><p className='no-margin font-hnl4-s'>Here is <a href='#'>a link</a> in a block of non body text.</p></div>
      <h2 className='styleguide__font__usage-title'>Usage:</h2>
      <p className='styleguide__font__usage-text'>Links that appear in blocks of copy that are not body text, should follow the same behaviour as the Secondary link (note, font family/size is inherited for plain text links). Examples where this happens are author descriptions and image captions.</p>
    </div>

    {fonts.map(font => (
      <div key={font.name} className='styleguide__font'>
        <h2 className='styleguide__font__name'>{font.name}</h2>
        <p className={`styleguide__font__example--${font.name}`}>{font.example}</p>
        <dl className='styleguide__font__properties'>
          <dt className='styleguide__font__property'>Font-size:</dt>
          <dd className='styleguide__font__value'>{font.size}</dd>
          <dt className='styleguide__font__property'>Letter-spacing:</dt>
          <dd className='styleguide__font__value'>{font.spacing}</dd>
          <dt className='styleguide__font__property'>Line-height:</dt>
          <dd className='styleguide__font__value'>{font.lineHeight}</dd>
        </dl>
        <h2 className='styleguide__font__usage-title'>Usage:</h2>
        <p className='styleguide__font__usage-text'>{font.usage}</p>
      </div>
    ))}
  </div>
);

export default Typography;
{
  "fonts": [
    {
      "name": "WB1",
      "example": "In Pictures",
      "size": "156px",
      "spacing": "-20",
      "lineHeight": "200px",
      "usage": "Discover Landing page label (XL) • Decorative episodic article rail numbers"
    },
    {
      "name": "WB2",
      "example": "Research notes",
      "size": "60px",
      "spacing": "-20",
      "lineHeight": "78px",
      "usage": "Discover Landing page label (L) • Article title if no lead/hero image"
    },
    {
      "name": "WB3",
      "example": "Inspired: Alchemists and housewives around a long table",
      "size": "44px",
      "spacing": "0",
      "lineHeight": "60px",
      "usage": "Article title in page • Discover Landing page breaker link title"
    },
    {
      "name": "WB4",
      "example": "Sleep Paralysis: A brief history of fear, treatment and artistic creativity",
      "size": "33px",
      "spacing": "0",
      "lineHeight": "48px",
      "usage": "Discover landing page label (M) • Large article link title (1 of many) • Article gallery titles • Transporter title for articles"
    },
    {
      "name": "WB5",
      "example": "At the heart",
      "size": "22px",
      "spacing": "20",
      "lineHeight": "32px",
      "usage": "Article section name • Article Quote 1 alt version • Some right hand rail module titles/labels • Article commenting panel name"
    },
    {
      "name": "WB6",
      "example": "Would like to meet: Anna",
      "size": "19px",
      "spacing": "20",
      "lineHeight": "28px",
      "usage": "Article link title (1 of many) • Discover Landing page label (S) name: WB7"
    },
    {
      "name": "WB7",
      "example": "Oops!...I wrote a Britney blog post",
      "size": "15px",
      "spacing": "20",
      "lineHeight": "24px",
      "usage": "Usage: Article link title (1 of many) • Playlist queue titles • List module links e.g. Most Popular on Discover Landing"
    },
    {
      "name": "HNM1",
      "example": "Francis Crick Archives",
      "size": "36px",
      "spacing": "20",
      "lineHeight": "48px",
      "usage": "Library item/archive etc titles • Archive/Collection item counter"
    },
    {
      "name": "HNM2",
      "example": "It was a large room, heavily outfitted with the usual badly ventilated furnaces, rows of bubbling crucibles, and one stu ed alligator. Things floated in jars. The air smelled of a limited life expectancy.",
      "size": "26px",
      "spacing": "20",
      "lineHeight": "38px",
      "usage": "Article Quote 2"
    },
    {
      "name": "HNM3",
      "example": "Library Item Group Info Label",
      "size": "20px",
      "spacing": "40",
      "lineHeight": "30px",
      "usage": "Library group info label • Bold option in article body • Bold option in Library item lead description • Transporter title for library things"
    },
    {
      "name": "HNM4",
      "example": "Fingerprints",
      "size": "16px",
      "spacing": "40",
      "lineHeight": "24px",
      "usage": "Item title in library search results List view • Exhibition card dates • Archive/Collection card title • Archive/Collection card format"
    },
    {
      "name": "HNM5",
      "example": "Filter",
      "size": "14px",
      "spacing": "80",
      "lineHeight": "20px",
      "usage": "Pimary, secondary & tertiary buttons • Labels/optional labels • Bold option in library data"
    },
    {
      "name": "HNM6",
      "example": "PP/CRI Medical Research Council",
      "size": "12px",
      "spacing": "80",
      "lineHeight": "18px",
      "usage": "Archive Breadcrumb sublevel names • Sublevel title on series tree card folder • Active  lter button text"
    },
    {
      "name": "HNL1",
      "example": "— Personal Material",
      "size": "36px",
      "spacing": "40",
      "lineHeight": "48px",
      "usage": "Archive/Collection subfolder name (sits w/ title) • Archive/ Collection date range"
    },
    {
      "name": "HNL2",
      "example": "Sometimes provocative and always interesting, this series of shorter stories can be inspired by pretty much anything in Wellcome Collection and offers a quick insight into some of the themes we explore. This one comes from Elissavet Ntoulia.",
      "size": "26px",
      "spacing": "40",
      "lineHeight": "38px",
      "usage": "Article lead paragraph"
    },
    {
      "name": "HNL3",
      "example": "By discovering (with James Watson) the double helix of DNA, and helping to crack its code, Francis Crick laid the foundations of modern molecular biology.",
      "size": "20px",
      "spacing": "40",
      "lineHeight": "30px",
      "usage": "Article lead paragraph • Main description in archives & items etc • Article body copy"
    },
    {
      "name": "HNL4",
      "example": "Mental health : facing the challenges, building solutions : report from the WHO European Ministerial Conference",
      "size": "16px",
      "spacing": "40",
      "lineHeight": "24px",
      "usage": "Library item title on card/search result"
    },
    {
      "name": "HNL5",
      "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at hendrerit justo. Donec quis nibh malesuada, accumsan libero eu, commodo.",
      "size": "14px",
      "spacing": "40",
      "lineHeight": "20px",
      "usage": "Article card/link descriptions • Descriptive copy in cards/thumb links"
    },
    {
      "name": "HNL6",
      "example": "of 400",
      "size": "12px",
      "spacing": "80",
      "lineHeight": "18px",
      "usage": "Page jumper in book item viewer • Smallprint • Archive/Collection card description • Datestamps on cards/links"
    },
    {
      "name": "HNL7",
      "example": "Enter your email *",
      "size": "11px",
      "spacing": "80",
      "lineHeight": "18px",
      "usage": "Active textfield hint text"
    },
    {
      "name": "LR1",
      "example": "PP/CRI",
      "size": "18px",
      "spacing": "0",
      "lineHeight": "24px",
      "usage": "Archive/sublevel reference number in title lockup (Archive page)"
    },
    {
      "name": "LR2",
      "example": "15th July 2016",
      "size": "14px",
      "spacing": "-40",
      "lineHeight": "24px",
      "usage": "Sub Info Label in Library • Last Updated date in Archive/collection • Article Quote 2 • Article image captions • Quantity indicator for theme • Episode indicator for episodic articles • Discover Landing block context"
    },
    {
      "name": "LR3",
      "example": "PP/CRI/A",
      "size": "12px",
      "spacing": "-20",
      "lineHeight": "18px",
      "usage": "Archive series tree card folder number • Search Results Filter quantity indicator"
    }
  ]
}

There are no notes for this item.