Typography

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/global/typography"

// @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.