{"version":3,"sources":["webpack:///./src/pages/wt/components/title/design.js"],"names":["site","data","slug","state","title","complete","className","class"],"mappings":"oHAAA,oEAMe,qBACb,OACE,oCACE,kBAAC,IAAD,CACEA,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,WAClBC,MAAM,SACNC,MAAOH,EAAKG,QAEd,kBAAC,IAAD,CACEC,UAAU,EACVL,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,WAClBC,MAAM,SACNC,MAAOH,EAAKG,OAEZ,kBAAC,IAAD,KACE,+MAMF,kBAAC,IAAD,iBACA,yBAAKE,UAAU,yCAAf,WACA,sNAKA,2BAAOC,MAAM,kBACX,+BACE,iCACA,sCACA,qCACA,2CACA,sCAEF,+BACE,4BACE,4BACE,wBAAIA,MAAM,qBAAV,kBAEF,2CACA,uCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,kDAsBN,yBAAKD,UAAU,mBAAf,WACA,8JAIA,2BAAOC,MAAM,kBACX,+BACE,4BACE,4BACE,wBAAIA,MAAM,qBAAV,kBAEF,0CACA,uCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,mDAqBN,yBAAKD,UAAU,mBAAf,WACA,2KAKA,2BAAOC,MAAM,kBACX,+BACE,4BACE,4BACE,wBAAIA,MAAM,qBAAV,kBAEF,0CACA,uCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,kDAqBN,yBAAKD,UAAU,mBAAf,WACA,gMAKA,2BAAOC,MAAM,kBACX,+BACE,4BACE,4BACE,wBAAIA,MAAM,qBAAV,kBAEF,wCACA,uCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,mDAwCN,6BACA,kBAAC,IAAD,2BACA,6IAIA,6BACA,kBAAC,IAAD,kBACA,uR","file":"component---src-pages-wt-components-title-design-js-1c186c8b78d8fa0c0127.js","sourcesContent":["import React from 'react'\nimport { Layout, Intro, SectionTitle, Header } from '../../../../components'\n\nimport './style.scss'\nimport data from './data.json'\n\nexport default () => {\n  return (\n    <>\n      <Header\n        site={data.site}\n        slug={data.slug + '/design/'}\n        state=\"design\"\n        title={data.title}\n      />\n      <Layout\n        complete={true}\n        site={data.site}\n        slug={data.slug + '/design/'}\n        state=\"design\"\n        title={data.title}\n      >\n        <Intro>\n          <p>\n            Titles describe the main purpose of a screen and any content\n            subsections in a given layout. Font size, weight and color will\n            depend on usage, as defined in the variants below.\n          </p>\n        </Intro>\n        <SectionTitle>Variants</SectionTitle>\n        <div className=\"showcase__title l-margin-top--xxlarge\">Title 1</div>\n        <p>\n          Use for the Title element that belongs in the first level of the\n          visual hierarchy. This will usually be the headline title, which\n          appears only once per page in the Intro Area pattern.\n        </p>\n        <table class=\"showcase-table\">\n          <thead>\n            <th> </th>\n            <th>Weight</th>\n            <th>Color</th>\n            <th>Font Values</th>\n            <th>Usage</th>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                <h1 class=\"c-title-1--normal\">Title1/Normal</h1>\n              </td>\n              <td>Regular 400</td>\n              <td>#425968</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>32px</strong>\n                <br />\n                line-height: <strong>40px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For first level titles on light backgrounds\n              </td>\n            </tr>\n            {/* <tr class=\"showcase-table__dark-row\">\n              <td>\n                <h1 class=\"c-title-1--light\">Title1/Light</h1>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>32px</strong>\n                <br />\n                line-height: <strong>40px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For first level titles on dark or primary green backgrounds\n              </td>\n            </tr> */}\n          </tbody>\n        </table>\n\n        <div className=\"showcase__title\">Title 2</div>\n        <p>\n          Use for any Title elements that belong in the second level of the\n          visual hierarchy. This will usually be section header titles.\n        </p>\n        <table class=\"showcase-table\">\n          <tbody>\n            <tr>\n              <td>\n                <h2 class=\"c-title-2--normal\">Title2/Normal</h2>\n              </td>\n              <td>Medium 500</td>\n              <td>#425968</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>24px</strong>\n                <br />\n                line-height: <strong>30px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For second level titles on light backgrounds\n              </td>\n            </tr>\n            {/* <tr class=\"showcase-table__dark-row\">\n              <td>\n                <h2 class=\"c-title-2--light\">Title2/Light</h2>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>24px</strong>\n                <br />\n                line-height: <strong>30px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For second level titles on dark or primary green backgrounds\n              </td>\n            </tr> */}\n          </tbody>\n        </table>\n        <div className=\"showcase__title\">Title 3</div>\n        <p>\n          Use for any Title elements that belong in the third level of the\n          visual hierarchy. This will usually be section or subsection header\n          titles.\n        </p>\n        <table class=\"showcase-table\">\n          <tbody>\n            <tr>\n              <td>\n                <h3 class=\"c-title-3--normal\">Title3/Normal</h3>\n              </td>\n              <td>Medium 500</td>\n              <td>#425968</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>18px</strong>\n                <br />\n                line-height: <strong>24px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For third level titles on light backgrounds\n              </td>\n            </tr>\n            {/* <tr class=\"showcase-table__dark-row\">\n              <td>\n                <h3 class=\"c-title-3--light\">Title3/Light</h3>\n              </td>\n              <td>Medium 500</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>16px</strong>\n                <br />\n                line-height: <strong>24px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For third level titles on dark or primary green backgrounds\n              </td>\n            </tr> */}\n          </tbody>\n        </table>\n        <div className=\"showcase__title\">Title 4</div>\n        <p>\n          Use for any Title elements that belong in the fourth level of the\n          visual hierarchy. One example of this is the navigation title, found\n          in the Intro Area pattern.\n        </p>\n        <table class=\"showcase-table\">\n          <tbody>\n            <tr>\n              <td>\n                <h4 class=\"c-title-4--normal\">Title4/Normal</h4>\n              </td>\n              <td>Bold 700</td>\n              <td>#425968</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>14px</strong>\n                <br />\n                line-height: <strong>20px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For fourth level titles on light backgrounds\n              </td>\n            </tr>\n            {/* <tr class=\"showcase-table__dark-row\">\n              <td>\n                <h4 class=\"c-title-4--subtle\">Title4/Subtle</h4>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#D7D7D7</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n                <br />\n                letter-spacing: <strong>2px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For fourth level titles on dark backgrounds\n              </td>\n            </tr>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <h4 class=\"c-title-4--light\">Title4/Light</h4>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n                <br />\n                letter-spacing: <strong>2px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For fourth level titles on dark or primary green backgrounds\n              </td>\n            </tr> */}\n          </tbody>\n        </table>\n        <hr />\n        <SectionTitle>Design Environment</SectionTitle>\n        <p>\n          All titles are left-aligned. Keep headings closer to the text they\n          introduce than the text that precedes them.\n        </p>\n        <hr />\n        <SectionTitle>Microcopy</SectionTitle>\n        <p>\n          Titles can be full sentences or fragments, but try to stay consistent\n          within the same layout and flow. Fragments look best when they fit\n          onto one line. Use title case for fragments. Use sentence case with\n          end punctuation for complete sentences.\n        </p>\n      </Layout>\n    </>\n  )\n}\n"],"sourceRoot":""}