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/style-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/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/presets/style-presets-85462304d0bc0257.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/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/presets/style-presets-85462304d0bc0257.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';
@@ -62,4 +62,4 @@
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">21</span><span>        color</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.inkBrand010}}&#x27;</span><span class="token" style="color:#535353">,</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">22</span><span>        iconColor</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;{{colors.inkBrand010}}&#x27;</span><span class="token" style="color:#535353">,</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">23</span><span>    </span><span class="token" style="color:#535353">}</span><span class="token" style="color:#535353">,</span><span>
-</span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">24</span><span></span><span class="token" style="color:#535353">}</span><span class="token" style="color:#535353">;</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="custom" data-toc-indexed="Custom" class="css-17xz2ja">Adding custom Style Presets to the theme</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Custom Style Presets can be added to the theme. See the<!-- --> <a href="/theme/theming/creating-a-theme/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Creating Themes</span></span></a> <!-- -->guide for more details.</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></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/presets/transition-presets" 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><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><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">Transition Presets</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 collection of motion attributes combined into a preset to define reusable motion transition from one state to another.</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><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"><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><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 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">Transition Presets</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 collection of motion attributes combined into a preset to define reusable motion transition from one state to another.</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/style-presets/","pageProps":{}},"page":"/theme/presets/style-presets","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+</span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">24</span><span></span><span class="token" style="color:#535353">}</span><span class="token" style="color:#535353">;</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="custom" data-toc-indexed="Custom" class="css-17xz2ja">Adding custom Style Presets to the theme</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Custom Style Presets can be added to the theme. See the<!-- --> <a href="/theme/theming/creating-a-theme/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Creating Themes</span></span></a> <!-- -->guide for more details.</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></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/presets/transition-presets" 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><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><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">Transition Presets</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 collection of motion attributes combined into a preset to define reusable motion transition from one state to another.</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><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"><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><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 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">Transition Presets</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 collection of motion attributes combined into a preset to define reusable motion transition from one state to another.</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/style-presets/","pageProps":{}},"page":"/theme/presets/style-presets","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>

package/public/theme/presets/transition-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/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/presets/transition-presets-b2e7a2493688010e.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/23816-e4c65d0cd93ea612.js" defer=""></script><script src="/_next/static/chunks/pages/theme/presets/transition-presets-b2e7a2493688010e.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';
@@ -178,4 +178,4 @@
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">36</span><span>  </span><span class="token" style="color:#535353">{</span><span>modalContent</span><span class="token" style="color:#535353">}</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">37</span><span></span><span class="token token token" style="color:#535353">&lt;/</span><span class="token token token" style="color:#05717D">Modal</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="adding-custom-transition-presets-to-the-theme" data-toc-indexed="Custom Transition Presets" class="css-17xz2ja">Adding custom Transition Presets to the theme</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">Custom Transition Presets can be added to the theme. See the<!-- --> <a href="/theme/theming/creating-a-theme/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Creating a theme</span></span></a> <!-- -->guide for more details.</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 class="css-17xz2ja">Communicating Transition Presets in Figma</h2><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">The inability to communicate motion in static layouts has been a long-standing problem in the design world. In the absence of this information, it is often up to the developer to interpret how to implement it.</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"><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 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"><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">To alleviate this problem with page-level transitions we recommend designers refer to the documentation provided in Figma.</p></div></div></div></div></div></div></div></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><p class="css-krfbcy">For additional guidance on how to communicate a design to the product team for engineers to build, refer to the<!-- --> <a href="https://www.figma.com/proto/kXCrh9MHKAJ878KE2dQOz8/Handoff-Guides---for-engineers-%26-designers?page-id=1%3A544&amp;node-id=275%3A21221&amp;viewport=350%2C48%2C0.13&amp;scaling=min-zoom&amp;starting-point-node-id=275%3A21221&amp;show-proto-sidebar=1&amp;hide-ui=1" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">NewsKit Handoff guidance.</span></span></a></p></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="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">Considering users that may have a<!-- --> <a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">sensitivity to motion</span></span></a> <!-- -->(perceived movement on the screen), is core to the NewsKit motion system. By following the guidelines below, we ensure that any users who experience sensitivity to motion have the option to view a more basic experience that reduces motion where possible.</p></div><div class="css-exj33h"><div class="css-10ztk7w"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h3 class="css-16d6jfc">Reduced Motion for motion sensitivities</h3><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">The<!-- --> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">prefers-reduced-motion</span></span></a> <!-- -->CSS media feature detects if the user has requested that their operating system or browser minimises the amount of non-essential motion displayed to the user. To ensure experiences are inclusive it is recommended to implement the<!-- --> <code class="css-os1kn4">prefers-reduced-motion</code> feature to elements that have motion. By default, we support this feature for components in the NewsKit Design System that have motion applied to them eg. the <a href="/components/drawer/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Drawer</span></span></a>, &amp;<!-- --> <a href="/components/modal/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Modal</span></span></a> components.<br/><br/><a href="https://caniuse.com/prefers-reduced-motion" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">To see which browsers support this feature, please refer to this link</span></span></a>.</p></div><div class="css-exj33h"><div class="css-1tsq98o"></div></div></div><div class="css-f8eq1u"><div class="css-1yc9ne2"><h3 class="css-16d6jfc">Code example</h3><div class="css-1kwy130"></div></div><div class="css-1yc9ne2"><p class="css-krfbcy">To implement this feature manually by using CSS:</p><div class="css-yz5f4r"></div></div><div class="css-49xkt6"><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code><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">1</span><span>@</span><span class="token" style="color:#D20600">media</span><span> </span><span class="token" style="color:#535353">(</span><span class="token parameter">prefers</span><span class="token parameter token" style="color:#577FFB">-</span><span class="token parameter">reduced</span><span class="token parameter token" style="color:#577FFB">-</span><span class="token parameter">motion</span><span class="token parameter token" style="color:#577FFB">:</span><span class="token parameter"> reduce</span><span class="token" style="color:#535353">)</span><span> </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">2</span><span>    </span><span class="token" style="color:#C0C0C0">/* reduced behaviour */</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">3</span><span></span><span class="token" style="color:#535353">}</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></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/presets/typography-presets" 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><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><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">Typography Presets</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 collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.</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><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"><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">Typography Presets</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 collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.</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/transition-presets/","pageProps":{}},"page":"/theme/presets/transition-presets","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+</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">3</span><span></span><span class="token" style="color:#535353">}</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></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/presets/typography-presets" 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><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><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">Typography Presets</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 collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.</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><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"><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">Typography Presets</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 collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.</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/transition-presets/","pageProps":{}},"page":"/theme/presets/transition-presets","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>