npm - newskit - Versions diffs - 5.4.3 → 5.4.4 - Mend

newskit 5.4.3 → 5.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/public/theme/presets/typography-presets/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
             body {
               margin: 0;
             }
-            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-2bfb71df42da8833.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/52526-76b534ca87453a1a.js" defer=""></script><script src="/_next/static/chunks/41873-fd01213764af92b8.js" defer=""></script><script src="/_next/static/chunks/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/presets/typography-presets-c7da4c2aa1e90f3c.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_buildManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_ssgManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
+            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-d9a28ce188f9fa84.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/52526-76b534ca87453a1a.js" defer=""></script><script src="/_next/static/chunks/41873-fd01213764af92b8.js" defer=""></script><script src="/_next/static/chunks/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/presets/typography-presets-c7da4c2aa1e90f3c.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_buildManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_ssgManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
               a='//tags.tiqcdn.com/utag/newsinternational/thetimes.newskit/dev/utag.js';
               b=document;
               c='script';
@@ -45,4 +45,4 @@
 </span><span class="token template-string token" style="color:#0A782A"><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">4</span>font-style:italic;
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">5</span><span class="token template-string token" style="color:#0A782A"></span><span class="token template-string token template-punctuation" style="color:#0A782A">`</span><span class="token" style="color:#535353">;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">6</span>
-<span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">7</span><span></span><span class="token token token" style="color:#535353">&lt;</span><span class="token token token" style="color:#05717D">ItalicTextBlock</span><span class="token" style="color:#05717D"> </span><span class="token token" style="color:#0A782A">stylePreset</span><span class="token token token attr-equals" style="color:#535353">=</span><span class="token token token" style="color:#535353">&quot;</span><span class="token token" style="color:#535353">editorialParagraph010</span><span class="token token token" style="color:#535353">&quot;</span><span class="token token" style="color:#535353">&gt;</span><span class="token plain-text"> This Text is italic</span><span class="token token token" style="color:#535353">&lt;/</span><span class="token token token" style="color:#05717D">ItalicTextBlock</span><span class="token token" style="color:#535353">&gt;</span></code></pre></div></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section><section><div class="css-f8eq1u"><div class="css-1yc9ne2"><h2 id="text-crop" data-toc-indexed="Text-crop" class="css-17xz2ja">Text-crop</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">To keep consistent and predictable space from design to code, we use a text-cropping utility that removes additional space (leading) around a text block. This allows us to maintain our 4px baseline and keep designs pixel-perfect. Refer to the Text Crop documentation for more detailed information.</p></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div><div class="css-exj33h"><div class="css-10ztk7w"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section><section><div class="css-f8eq1u"><div class="css-1yc9ne2"><h2 id="accessibility-considerations" data-toc-indexed="Accessibility Considerations" class="css-17xz2ja">Accessibility Considerations</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Legibility is core to the NewsKit typographic system. By following the guidelines below, we ensure consistency and readability across all typographic variations.</p><div class="css-yz5f4r"></div></div><div class="css-49xkt6"><div class="css-30qa7x"><div class="css-8atxkm"><style data-emotion="css 1cl0omj">.css-1cl0omj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}</style><div class="css-1cl0omj"><div class="css-1k3e0au"><style data-emotion="css 4w2qry">.css-4w2qry{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-4w2qry{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-4w2qry{padding:0 12px;}}</style><div class="css-4w2qry"><style data-emotion="css fb3dw2">.css-fb3dw2{height:100%;}</style><style data-emotion="css 1fosq9y">.css-1fosq9y{transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><style data-emotion="css 1l9c4ty">.css-1l9c4ty{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1l9c4ty"><style data-emotion="css f00y0z">.css-f00y0z{box-sizing:border-box;display:block;position:relative;margin-bottom:16px;}.css-f00y0z svg{border-radius:4px;}</style><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><div class="css-1shocxe"><style data-emotion="css 1lvcsk9">.css-1lvcsk9{box-sizing:border-box;padding:8px 4px;}.css-1lvcsk9 a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1lvcsk9"><style data-emotion="css 8mepow">.css-8mepow{margin-bottom:20px;}</style><div class="css-8mepow"><style data-emotion="css uy3owc">.css-uy3owc{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-uy3owc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-uy3owc::after{content:'';margin-top:-0.2125em;display:block;}</style><section class="css-uy3owc"><style data-emotion="css 5gd387">.css-5gd387{display:inline;font:inherit;margin:0;color:#0A0A0A;}.css-5gd387 svg{fill:#0A0A0A;}</style><h1 class="nk-headline-heading css-5gd387">Font size</h1></section></div><style data-emotion="css iobivh">.css-iobivh{margin:0;color:#2E2E2E;font-family:"DM Sans",sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;padding:0.5px 0px;}.css-iobivh svg{fill:#2E2E2E;}.css-iobivh::before{content:'';margin-bottom:-0.391em;display:block;}.css-iobivh::after{content:'';margin-top:-0.409em;display:block;}</style><p class="css-iobivh">While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point.<br/><br/>Of course, some text will be smaller for elements such as labels and headers will be larger.<br/><br/>To ensure that text is legible, NewsKit recommended that the smallest font-size applied to text is no less 12px for web.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line Height</h1></section></div><p class="css-iobivh">Providing an adequate amount of space between lines is critical to the legibility of text. As per W3C accessibility guidelines line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.<br/><br/>Using relative line-heights, NewsKit ensures consistent spacing of all headings and body-text sizes. Heading and Headline styles are set to a default of 1.125-times the font size and body text set at 1.5-times the font size.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line length</h1></section></div><p class="css-iobivh">Line-length, also known as a measure, is the number of characters contained in a line of text. Line-length should fall between 50 and 80 characters wide, including spaces, to ensure readability.<br/><br/>Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 80 characters make it difficult to continue to the correct line in a large body of the text.</p></div></div></div></div></div><style data-emotion="css 1nlep1q">@media screen{.css-1nlep1q{display:none;}}@media screen and (min-width: 480px){.css-1nlep1q{display:none;}}@media screen and (min-width: 768px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1024px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1440px){.css-1nlep1q{display:block;}}</style><div class="css-1nlep1q"><div class="css-4w2qry"><style data-emotion="css 1iphy6n">.css-1iphy6n{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:rowfalse;-ms-flex-direction:rowfalse;flex-direction:rowfalse;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1iphy6n"><style data-emotion="css po7my3">.css-po7my3{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:16px;}.css-po7my3 svg{border-radius:4px;}</style><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1r2lt0d">.css-1r2lt0d{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-1r2lt0d"><style data-emotion="css 1p9cj9w">.css-1p9cj9w{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 4px;}.css-1p9cj9w a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Font size</h1></section></div><p class="css-iobivh">While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point.<br/><br/>Of course, some text will be smaller for elements such as labels and headers will be larger.<br/><br/>To ensure that text is legible, NewsKit recommended that the smallest font-size applied to text is no less 12px for web.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line Height</h1></section></div><p class="css-iobivh">Providing an adequate amount of space between lines is critical to the legibility of text. As per W3C accessibility guidelines line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.<br/><br/>Using relative line-heights, NewsKit ensures consistent spacing of all headings and body-text sizes. Heading and Headline styles are set to a default of 1.125-times the font size and body text set at 1.5-times the font size.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line length</h1></section></div><p class="css-iobivh">Line-length, also known as a measure, is the number of characters contained in a line of text. Line-length should fall between 50 and 80 characters wide, including spaces, to ensure readability.<br/><br/>Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 80 characters make it difficult to continue to the correct line in a large body of the text.</p></div></div></div></div></div></div></div></div></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="theme/theming/overview" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css z6p3rj">.css-z6p3rj{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-z6p3rj{min-height:248px;}}@media screen and (min-width: 1024px){.css-z6p3rj{min-height:304px;}}</style><div class="css-z6p3rj"><style data-emotion="css 1fz92cy">.css-1fz92cy{box-sizing:border-box;display:block;position:relative;margin-bottom:0;}.css-1fz92cy svg{border-radius:4px;}</style><div class="css-1fz92cy"><style data-emotion="css 17zyjrj">.css-17zyjrj{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-17zyjrj{height:200px;}}</style><div class="css-17zyjrj"></div></div><div class="css-1shocxe"><style data-emotion="css 1aog5rk">.css-1aog5rk{box-sizing:border-box;padding:24px;}.css-1aog5rk a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1aog5rk"><style data-emotion="css f7iis0">@media screen and (max-width: 1023px){.css-f7iis0{margin-bottom:20px;}}@media screen and (min-width: 1024px){.css-f7iis0{margin-bottom:24px;}}</style><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><style data-emotion="css 4eltk5">.css-4eltk5{display:inline;font:inherit;margin:0;color:#FFFFFF;}.css-4eltk5 svg{fill:#FFFFFF;}</style><h1 class="nk-headline-heading css-4eltk5">Overview</h1></section></div><style data-emotion="css 1kw6hwy">@media screen and (max-width: 1023px){.css-1kw6hwy{margin-bottom:24px;}}@media screen and (min-width: 1024px){.css-1kw6hwy{margin-bottom:32px;}}</style><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">A NewsKit theme is built up from a layer of foundations - such as colours, fonts and sizing scales.</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css 14q6vju">.css-14q6vju{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#5E44E4;margin:0;cursor:pointer;}.css-14q6vju svg{width:16px;height:16px;}.css-14q6vju svg{fill:#5E44E4;}.css-14q6vju:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-14q6vju:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#36248C;}.css-14q6vju:active:not(:disabled) svg{fill:#36248C;}.css-14q6vju:disabled{background-color:rgba(255,255,255,0.2);color:#5E44E4;}.css-14q6vju:disabled svg{fill:#5E44E4;}@media screen and (prefers-reduced-motion: no-preference){.css-14q6vju{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-14q6vju{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><div class="css-1nlep1q"><style data-emotion="css 1aaqxma">.css-1aaqxma{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1aaqxma{min-height:248px;}}@media screen and (min-width: 1024px){.css-1aaqxma{min-height:304px;}}</style><div class="css-1aaqxma"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css kjtdkp">.css-kjtdkp{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;height:100%;}</style><div class="css-kjtdkp"></div></div><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Overview</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">A NewsKit theme is built up from a layer of foundations - such as colours, fonts and sizing scales.</span></p></div><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/presets/typography-presets/","pageProps":{}},"page":"/theme/presets/typography-presets","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+<span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">7</span><span></span><span class="token token token" style="color:#535353">&lt;</span><span class="token token token" style="color:#05717D">ItalicTextBlock</span><span class="token" style="color:#05717D"> </span><span class="token token" style="color:#0A782A">stylePreset</span><span class="token token token attr-equals" style="color:#535353">=</span><span class="token token token" style="color:#535353">&quot;</span><span class="token token" style="color:#535353">editorialParagraph010</span><span class="token token token" style="color:#535353">&quot;</span><span class="token token" style="color:#535353">&gt;</span><span class="token plain-text"> This Text is italic</span><span class="token token token" style="color:#535353">&lt;/</span><span class="token token token" style="color:#05717D">ItalicTextBlock</span><span class="token token" style="color:#535353">&gt;</span></code></pre></div></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div><div class="css-exj33h"><div class="css-1tsq98o"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section><section><div class="css-f8eq1u"><div class="css-1yc9ne2"><h2 id="text-crop" data-toc-indexed="Text-crop" class="css-17xz2ja">Text-crop</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">To keep consistent and predictable space from design to code, we use a text-cropping utility that removes additional space (leading) around a text block. This allows us to maintain our 4px baseline and keep designs pixel-perfect. Refer to the Text Crop documentation for more detailed information.</p></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div><div class="css-exj33h"><div class="css-10ztk7w"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></section><section><div class="css-f8eq1u"><div class="css-1yc9ne2"><h2 id="accessibility-considerations" data-toc-indexed="Accessibility Considerations" class="css-17xz2ja">Accessibility Considerations</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Legibility is core to the NewsKit typographic system. By following the guidelines below, we ensure consistency and readability across all typographic variations.</p><div class="css-yz5f4r"></div></div><div class="css-49xkt6"><div class="css-30qa7x"><div class="css-8atxkm"><style data-emotion="css 1cl0omj">.css-1cl0omj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}</style><div class="css-1cl0omj"><div class="css-1k3e0au"><style data-emotion="css 4w2qry">.css-4w2qry{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-4w2qry{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-4w2qry{padding:0 12px;}}</style><div class="css-4w2qry"><style data-emotion="css fb3dw2">.css-fb3dw2{height:100%;}</style><style data-emotion="css 1fosq9y">.css-1fosq9y{transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><style data-emotion="css 1l9c4ty">.css-1l9c4ty{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1l9c4ty"><style data-emotion="css f00y0z">.css-f00y0z{box-sizing:border-box;display:block;position:relative;margin-bottom:16px;}.css-f00y0z svg{border-radius:4px;}</style><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><div class="css-1shocxe"><style data-emotion="css 1lvcsk9">.css-1lvcsk9{box-sizing:border-box;padding:8px 4px;}.css-1lvcsk9 a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1lvcsk9"><style data-emotion="css 8mepow">.css-8mepow{margin-bottom:20px;}</style><div class="css-8mepow"><style data-emotion="css uy3owc">.css-uy3owc{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-uy3owc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-uy3owc::after{content:'';margin-top:-0.2125em;display:block;}</style><section class="css-uy3owc"><style data-emotion="css 5gd387">.css-5gd387{display:inline;font:inherit;margin:0;color:#0A0A0A;}.css-5gd387 svg{fill:#0A0A0A;}</style><h1 class="nk-headline-heading css-5gd387">Font size</h1></section></div><style data-emotion="css iobivh">.css-iobivh{margin:0;color:#2E2E2E;font-family:"DM Sans",sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;padding:0.5px 0px;}.css-iobivh svg{fill:#2E2E2E;}.css-iobivh::before{content:'';margin-bottom:-0.391em;display:block;}.css-iobivh::after{content:'';margin-top:-0.409em;display:block;}</style><p class="css-iobivh">While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point.<br/><br/>Of course, some text will be smaller for elements such as labels and headers will be larger.<br/><br/>To ensure that text is legible, NewsKit recommended that the smallest font-size applied to text is no less 12px for web.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line Height</h1></section></div><p class="css-iobivh">Providing an adequate amount of space between lines is critical to the legibility of text. As per W3C accessibility guidelines line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.<br/><br/>Using relative line-heights, NewsKit ensures consistent spacing of all headings and body-text sizes. Heading and Headline styles are set to a default of 1.125-times the font size and body text set at 1.5-times the font size.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line length</h1></section></div><p class="css-iobivh">Line-length, also known as a measure, is the number of characters contained in a line of text. Line-length should fall between 50 and 80 characters wide, including spaces, to ensure readability.<br/><br/>Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 80 characters make it difficult to continue to the correct line in a large body of the text.</p></div></div></div></div></div><style data-emotion="css 1nlep1q">@media screen{.css-1nlep1q{display:none;}}@media screen and (min-width: 480px){.css-1nlep1q{display:none;}}@media screen and (min-width: 768px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1024px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1440px){.css-1nlep1q{display:block;}}</style><div class="css-1nlep1q"><div class="css-4w2qry"><style data-emotion="css 1iphy6n">.css-1iphy6n{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:rowfalse;-ms-flex-direction:rowfalse;flex-direction:rowfalse;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1iphy6n"><style data-emotion="css po7my3">.css-po7my3{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:16px;}.css-po7my3 svg{border-radius:4px;}</style><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1r2lt0d">.css-1r2lt0d{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-1r2lt0d"><style data-emotion="css 1p9cj9w">.css-1p9cj9w{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 4px;}.css-1p9cj9w a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Font size</h1></section></div><p class="css-iobivh">While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point.<br/><br/>Of course, some text will be smaller for elements such as labels and headers will be larger.<br/><br/>To ensure that text is legible, NewsKit recommended that the smallest font-size applied to text is no less 12px for web.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line Height</h1></section></div><p class="css-iobivh">Providing an adequate amount of space between lines is critical to the legibility of text. As per W3C accessibility guidelines line spacing should be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.<br/><br/>Using relative line-heights, NewsKit ensures consistent spacing of all headings and body-text sizes. Heading and Headline styles are set to a default of 1.125-times the font size and body text set at 1.5-times the font size.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Line length</h1></section></div><p class="css-iobivh">Line-length, also known as a measure, is the number of characters contained in a line of text. Line-length should fall between 50 and 80 characters wide, including spaces, to ensure readability.<br/><br/>Lines narrower than 50 characters require the eye to jump to the next line too frequently, breaking the reader’s rhythm. Lines wider than 80 characters make it difficult to continue to the correct line in a large body of the text.</p></div></div></div></div></div></div></div></div></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="theme/theming/overview" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css z6p3rj">.css-z6p3rj{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-z6p3rj{min-height:248px;}}@media screen and (min-width: 1024px){.css-z6p3rj{min-height:304px;}}</style><div class="css-z6p3rj"><style data-emotion="css 1fz92cy">.css-1fz92cy{box-sizing:border-box;display:block;position:relative;margin-bottom:0;}.css-1fz92cy svg{border-radius:4px;}</style><div class="css-1fz92cy"><style data-emotion="css 17zyjrj">.css-17zyjrj{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-17zyjrj{height:200px;}}</style><div class="css-17zyjrj"></div></div><div class="css-1shocxe"><style data-emotion="css 1aog5rk">.css-1aog5rk{box-sizing:border-box;padding:24px;}.css-1aog5rk a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1aog5rk"><style data-emotion="css f7iis0">@media screen and (max-width: 1023px){.css-f7iis0{margin-bottom:20px;}}@media screen and (min-width: 1024px){.css-f7iis0{margin-bottom:24px;}}</style><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><style data-emotion="css 4eltk5">.css-4eltk5{display:inline;font:inherit;margin:0;color:#FFFFFF;}.css-4eltk5 svg{fill:#FFFFFF;}</style><h1 class="nk-headline-heading css-4eltk5">Overview</h1></section></div><style data-emotion="css 1kw6hwy">@media screen and (max-width: 1023px){.css-1kw6hwy{margin-bottom:24px;}}@media screen and (min-width: 1024px){.css-1kw6hwy{margin-bottom:32px;}}</style><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">A NewsKit theme is built up from a layer of foundations - such as colours, fonts and sizing scales.</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css 14q6vju">.css-14q6vju{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#5E44E4;margin:0;cursor:pointer;}.css-14q6vju svg{width:16px;height:16px;}.css-14q6vju svg{fill:#5E44E4;}.css-14q6vju:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-14q6vju:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#36248C;}.css-14q6vju:active:not(:disabled) svg{fill:#36248C;}.css-14q6vju:disabled{background-color:rgba(255,255,255,0.2);color:#5E44E4;}.css-14q6vju:disabled svg{fill:#5E44E4;}@media screen and (prefers-reduced-motion: no-preference){.css-14q6vju{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-14q6vju{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><div class="css-1nlep1q"><style data-emotion="css 1aaqxma">.css-1aaqxma{box-sizing:border-box;overflow:hidden;background-color:#5E44E4;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1aaqxma{min-height:248px;}}@media screen and (min-width: 1024px){.css-1aaqxma{min-height:304px;}}</style><div class="css-1aaqxma"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css kjtdkp">.css-kjtdkp{background-image:url(static/feature-card-foundations.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:bottom left;background-position:bottom left;height:100%;}</style><div class="css-kjtdkp"></div></div><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Overview</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">A NewsKit theme is built up from a layer of foundations - such as colours, fonts and sizing scales.</span></p></div><button data-testid="button" type="button" class="css-14q6vju"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Read more</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/presets/typography-presets/","pageProps":{}},"page":"/theme/presets/typography-presets","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>