@ulu/frontend
Version:
A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.
6,664 lines • 143 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Typography
</title>
<meta name="description" content="Modular Sass Theming Library">
<meta name="generator" content="Eleventy v3.0.0">
<link rel="apple-touch-icon" sizes="180x180" href="/frontend/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/frontend/assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/frontend/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/frontend/assets/favicons/site.webmanifest">
<link rel="mask-icon" href="/frontend/assets/favicons/safari-pinned-tab.svg" color="#8455bd">
<link rel="shortcut icon" href="/frontend/assets/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/frontend/assets/fonts/inter/inter.css">
</head>
<body class="page theme-light">
<header class="page__header header">
<a href="#main" class="skip-link hidden-visually-focusable">
Skip to main content
</a>
<div class="header__main">
<a class="header__logo" href="/frontend/">
<div class="logo">
<span class="logo__main">Ulu</span>
<span class="logo__subtitle">Frontend</span>
</div>
</a>
<button class="header__mobile-toggle hidden-min-medium button button--icon button--secondary" data-ulu-dialog-trigger="mobile-menu" aria-label="Open Menu">
<span class="fas fa-bars" aria-hidden="true"></span>
</button>
</div>
<nav class="header__nav">
<h2 class="hidden-visually">Main Menu</h2>
<div class="header__nav-links">
<button class="button button--small button--icon button--icon-small" data-ulu-theme-toggle='{
"savePreference" : true,
"checkMediaQuery" : true,
"group" : "page"
}'>
<span class="hidden-visually">Toggle Theme to <span data-ulu-theme-toggle-label="">Dark</span></span>
<span class="fas fa-moon" data-ulu-theme-toggle-icon=""></span>
</button>
<a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend" aria-label="View on Github">
<span class="fab fa-github" aria-hidden="true"></span>
</a>
<a class="button button--small button--icon button--icon-small" href="https://www.npmjs.com/package/@ulu/frontend">
<span class="fab fa-npm" aria-hidden="true"></span>
</a>
</div>
<div class="header__nav-menu">
<ul class="nav-tree" data-menu-depth="1">
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
<span class="nav-tree__text">
Guide
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
<span class="nav-tree__text">
Building a Stylesheet
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
<span class="nav-tree__text">
Developing Ulu SCSS Module
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
<span class="nav-tree__text">
Demos
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/basic-hero/">
<span class="nav-tree__text">
Basic Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
<span class="nav-tree__text">
Breakpoint Manager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-group/">
<span class="nav-tree__text">
Button Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-verbose/">
<span class="nav-tree__text">
Button Verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
<span class="nav-tree__text">
Captioned Figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card-grid/">
<span class="nav-tree__text">
Card Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/counter-list/">
<span class="nav-tree__text">
Counter List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/css-icons/">
<span class="nav-tree__text">
CSS Icons
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-grid/">
<span class="nav-tree__text">
Data grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-table/">
<span class="nav-tree__text">
Data Table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/details-group/">
<span class="nav-tree__text">
Details Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/file-save/">
<span class="nav-tree__text">
File Save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/flipcard/">
<span class="nav-tree__text">
Flip Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/form-theme/">
<span class="nav-tree__text">
Form Theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/headline-label/">
<span class="nav-tree__text">
Headline Label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/image-grid/">
<span class="nav-tree__text">
Image Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-inline/">
<span class="nav-tree__text">
List Inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-lines/">
<span class="nav-tree__text">
List Lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/menu-stack/">
<span class="nav-tree__text">
Menu Stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/modals/">
<span class="nav-tree__text">
Modals
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/nav-strip/">
<span class="nav-tree__text">
Nav Strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/overlay-section/">
<span class="nav-tree__text">
Overlay Section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/popovers/">
<span class="nav-tree__text">
Popovers
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/pull-quote/">
<span class="nav-tree__text">
Pull Quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
<span class="nav-tree__text">
Scroll Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
<span class="nav-tree__text">
Scrollpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
<span class="nav-tree__text">
Spoke Spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/sticky-list/">
<span class="nav-tree__text">
Sticky List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/theme-toggle/">
<span class="nav-tree__text">
Theme Toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
<span class="nav-tree__text">
Tile Grid Overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tiles/">
<span class="nav-tree__text">
Tiles
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tooltip/">
<span class="nav-tree__text">
Tooltip
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
<span class="nav-tree__text">
Sass API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Core
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/core/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
<span class="nav-tree__text">
Breakpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
<span class="nav-tree__text">
Cssvar
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/element/">
<span class="nav-tree__text">
Element
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/path/">
<span class="nav-tree__text">
Path
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/selector/">
<span class="nav-tree__text">
Selector
</span>
</a>
</li>
<li class="nav-tree__item is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/sass/core/typography/" aria-current="page">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/utils/">
<span class="nav-tree__text">
Utils
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Base
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/elements/">
<span class="nav-tree__text">
Elements
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
<span class="nav-tree__text">
Keyframes
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/normalize/">
<span class="nav-tree__text">
Normalize
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/root/">
<span class="nav-tree__text">
Root
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Components
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
<span class="nav-tree__text">
Adaptive-spacing
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
<span class="nav-tree__text">
Basic-hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-group/">
<span class="nav-tree__text">
Button-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
<span class="nav-tree__text">
Button-verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
<span class="nav-tree__text">
Captioned-figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
<span class="nav-tree__text">
Card-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
<span class="nav-tree__text">
Counter-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
<span class="nav-tree__text">
Css-icon
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
<span class="nav-tree__text">
Data-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-table/">
<span class="nav-tree__text">
Data-table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
<span class="nav-tree__text">
Fill-context
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
<span class="nav-tree__text">
Flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
<span class="nav-tree__text">
Flipcard-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
<span class="nav-tree__text">
Form-theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/headline-label/">
<span class="nav-tree__text">
Headline-label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
<span class="nav-tree__text">
Horizontal-rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
<span class="nav-tree__text">
Image-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/links/">
<span class="nav-tree__text">
Links
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
<span class="nav-tree__text">
List-inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
<span class="nav-tree__text">
List-lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
<span class="nav-tree__text">
List-ordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
<span class="nav-tree__text">
List-unordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
<span class="nav-tree__text">
Menu-stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/modal/">
<span class="nav-tree__text">
Modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
<span class="nav-tree__text">
Nav-strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
<span class="nav-tree__text">
Overlay-section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pager/">
<span class="nav-tree__text">
Pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
<span class="nav-tree__text">
Placeholder-block
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/popover/">
<span class="nav-tree__text">
Popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
<span class="nav-tree__text">
Pull-quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
<span class="nav-tree__text">
Ratio-box
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
<span class="nav-tree__text">
Scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
<span class="nav-tree__text">
Skip-link
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
<span class="nav-tree__text">
Spoke-spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/sticky-list/">
<span class="nav-tree__text">
Sticky-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/table-sticky/">
<span class="nav-tree__text">
Table-sticky
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
<span class="nav-tree__text">
Tile-button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
<span class="nav-tree__text">
Tile-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
<span class="nav-tree__text">
Tile-grid-overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/vignette/">
<span class="nav-tree__text">
Vignette
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
<span class="nav-tree__text">
Wysiwyg
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Helpers
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/display/">
<span class="nav-tree__text">
Display
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
<span class="nav-tree__text">
Utilities
</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
<span class="nav-tree__text">
Javascript API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/events/">
<span class="nav-tree__text">
events
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/settings/">
<span class="nav-tree__text">
settings
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
<span class="nav-tree__text">
ui/breakpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
<span class="nav-tree__text">
ui/collapsible
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
<span class="nav-tree__text">
ui/details-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
<span class="nav-tree__text">
ui/dialog
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
<span class="nav-tree__text">
ui/flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
<span class="nav-tree__text">
ui/grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
<span class="nav-tree__text">
ui/modal-builder
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
<span class="nav-tree__text">
ui/overflow-scroller
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
<span class="nav-tree__text">
ui/overflow-scroller-pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-page/">
<span class="nav-tree__text">
ui/page
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
<span class="nav-tree__text">
ui/popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print/">
<span class="nav-tree__text">
ui/print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
<span class="nav-tree__text">
ui/print-details
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
<span class="nav-tree__text">
ui/programmatic-modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
<span class="nav-tree__text">
ui/proxy-click
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
<span class="nav-tree__text">
ui/resizer
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
<span class="nav-tree__text">
ui/scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
<span class="nav-tree__text">
ui/scrollpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
<span class="nav-tree__text">
ui/slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
<span class="nav-tree__text">
ui/tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-theme-toggle/">
<span class="nav-tree__text">
ui/theme-toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
<span class="nav-tree__text">
ui/tooltip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
<span class="nav-tree__text">
utils/class-logger
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-css/">
<span class="nav-tree__text">
utils/css
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
<span class="nav-tree__text">
utils/dom
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
<span class="nav-tree__text">
utils/file-save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
<span class="nav-tree__text">
utils/floating-ui
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-id/">
<span class="nav-tree__text">
utils/id
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
<span class="nav-tree__text">
utils/pause-youtube-video
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-system/">
<span class="nav-tree__text">
utils/system
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item nav-tree__item--separator-before">
<a class="nav-tree__link " href="/frontend/changelog/">
<span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
<span class="nav-tree__text">
Changelog
</span>
</a>
</li>
</ul>
</div>
<div id="mobile-menu" data-ulu-modal-builder='{
"title" : "Menu",
"position" : "right"
}'>
<ul class="nav-tree" data-menu-depth="1">
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-book" aria-hidden="true"></span>
<span class="nav-tree__text">
Guide
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/building-stylesheet/">
<span class="nav-tree__text">
Building a Stylesheet
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/guide/developing-ulu-scss-module/">
<span class="nav-tree__text">
Developing Ulu SCSS Module
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fas fa-vial" aria-hidden="true"></span>
<span class="nav-tree__text">
Demos
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/basic-hero/">
<span class="nav-tree__text">
Basic Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
<span class="nav-tree__text">
Breakpoint Manager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-group/">
<span class="nav-tree__text">
Button Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/button-verbose/">
<span class="nav-tree__text">
Button Verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/captioned-figure/">
<span class="nav-tree__text">
Captioned Figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/card-grid/">
<span class="nav-tree__text">
Card Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/counter-list/">
<span class="nav-tree__text">
Counter List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/css-icons/">
<span class="nav-tree__text">
CSS Icons
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-grid/">
<span class="nav-tree__text">
Data grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/data-table/">
<span class="nav-tree__text">
Data Table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/details-group/">
<span class="nav-tree__text">
Details Group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/file-save/">
<span class="nav-tree__text">
File Save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/flipcard/">
<span class="nav-tree__text">
Flip Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/form-theme/">
<span class="nav-tree__text">
Form Theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/headline-label/">
<span class="nav-tree__text">
Headline Label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/image-grid/">
<span class="nav-tree__text">
Image Grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-inline/">
<span class="nav-tree__text">
List Inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/list-lines/">
<span class="nav-tree__text">
List Lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/menu-stack/">
<span class="nav-tree__text">
Menu Stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/modals/">
<span class="nav-tree__text">
Modals
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/nav-strip/">
<span class="nav-tree__text">
Nav Strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/overlay-section/">
<span class="nav-tree__text">
Overlay Section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/popovers/">
<span class="nav-tree__text">
Popovers
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/pull-quote/">
<span class="nav-tree__text">
Pull Quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scroll-slider/">
<span class="nav-tree__text">
Scroll Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/scrollpoints/">
<span class="nav-tree__text">
Scrollpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/spoke-spinner/">
<span class="nav-tree__text">
Spoke Spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/sticky-list/">
<span class="nav-tree__text">
Sticky List
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/theme-toggle/">
<span class="nav-tree__text">
Theme Toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tile-grid-overlay/">
<span class="nav-tree__text">
Tile Grid Overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tiles/">
<span class="nav-tree__text">
Tiles
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/demos/tooltip/">
<span class="nav-tree__text">
Tooltip
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-sass" aria-hidden="true"></span>
<span class="nav-tree__text">
Sass API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item is-active-trail ">
<details class="nav-tree__collapsible" open="">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Core
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item is-active-trail ">
<a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/core/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/breakpoint/">
<span class="nav-tree__text">
Breakpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/cssvar/">
<span class="nav-tree__text">
Cssvar
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/element/">
<span class="nav-tree__text">
Element
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/path/">
<span class="nav-tree__text">
Path
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/selector/">
<span class="nav-tree__text">
Selector
</span>
</a>
</li>
<li class="nav-tree__item is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/sass/core/typography/" aria-current="page">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/core/utils/">
<span class="nav-tree__text">
Utils
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Base
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/base/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/elements/">
<span class="nav-tree__text">
Elements
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/keyframes/">
<span class="nav-tree__text">
Keyframes
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/layout/">
<span class="nav-tree__text">
Layout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/normalize/">
<span class="nav-tree__text">
Normalize
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/print/">
<span class="nav-tree__text">
Print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/root/">
<span class="nav-tree__text">
Root
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/base/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Components
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/accordion/">
<span class="nav-tree__text">
Accordion
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/adaptive-spacing/">
<span class="nav-tree__text">
Adaptive-spacing
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/badge/">
<span class="nav-tree__text">
Badge
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/basic-hero/">
<span class="nav-tree__text">
Basic-hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button/">
<span class="nav-tree__text">
Button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-group/">
<span class="nav-tree__text">
Button-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/button-verbose/">
<span class="nav-tree__text">
Button-verbose
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/callout/">
<span class="nav-tree__text">
Callout
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/captioned-figure/">
<span class="nav-tree__text">
Captioned-figure
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card/">
<span class="nav-tree__text">
Card
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/card-grid/">
<span class="nav-tree__text">
Card-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/counter-list/">
<span class="nav-tree__text">
Counter-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/css-icon/">
<span class="nav-tree__text">
Css-icon
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-grid/">
<span class="nav-tree__text">
Data-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/data-table/">
<span class="nav-tree__text">
Data-table
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/fill-context/">
<span class="nav-tree__text">
Fill-context
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard/">
<span class="nav-tree__text">
Flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/flipcard-grid/">
<span class="nav-tree__text">
Flipcard-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/form-theme/">
<span class="nav-tree__text">
Form-theme
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/headline-label/">
<span class="nav-tree__text">
Headline-label
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/hero/">
<span class="nav-tree__text">
Hero
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/horizontal-rule/">
<span class="nav-tree__text">
Horizontal-rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/image-grid/">
<span class="nav-tree__text">
Image-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/links/">
<span class="nav-tree__text">
Links
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-inline/">
<span class="nav-tree__text">
List-inline
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-lines/">
<span class="nav-tree__text">
List-lines
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-ordered/">
<span class="nav-tree__text">
List-ordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/list-unordered/">
<span class="nav-tree__text">
List-unordered
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/menu-stack/">
<span class="nav-tree__text">
Menu-stack
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/modal/">
<span class="nav-tree__text">
Modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/nav-strip/">
<span class="nav-tree__text">
Nav-strip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/overlay-section/">
<span class="nav-tree__text">
Overlay-section
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pager/">
<span class="nav-tree__text">
Pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/panel/">
<span class="nav-tree__text">
Panel
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/placeholder-block/">
<span class="nav-tree__text">
Placeholder-block
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/popover/">
<span class="nav-tree__text">
Popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/pull-quote/">
<span class="nav-tree__text">
Pull-quote
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rail/">
<span class="nav-tree__text">
Rail
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/ratio-box/">
<span class="nav-tree__text">
Ratio-box
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/rule/">
<span class="nav-tree__text">
Rule
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/scroll-slider/">
<span class="nav-tree__text">
Scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/skip-link/">
<span class="nav-tree__text">
Skip-link
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/slider/">
<span class="nav-tree__text">
Slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/spoke-spinner/">
<span class="nav-tree__text">
Spoke-spinner
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/sticky-list/">
<span class="nav-tree__text">
Sticky-list
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/table-sticky/">
<span class="nav-tree__text">
Table-sticky
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tabs/">
<span class="nav-tree__text">
Tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tag/">
<span class="nav-tree__text">
Tag
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-button/">
<span class="nav-tree__text">
Tile-button
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid/">
<span class="nav-tree__text">
Tile-grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/tile-grid-overlay/">
<span class="nav-tree__text">
Tile-grid-overlay
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/vignette/">
<span class="nav-tree__text">
Vignette
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/components/wysiwyg/">
<span class="nav-tree__text">
Wysiwyg
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__text">
Helpers
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="3">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/helpers/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/color/">
<span class="nav-tree__text">
Color
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/display/">
<span class="nav-tree__text">
Display
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/index/">
<span class="nav-tree__text">
Index
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
<span class="nav-tree__text">
Typography
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/units/">
<span class="nav-tree__text">
Units
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/sass/helpers/utilities/">
<span class="nav-tree__text">
Utilities
</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item ">
<details class="nav-tree__collapsible">
<summary class="nav-tree__toggle">
<span class="nav-tree__toggle-content">
<span class="nav-tree__icon fab fa-js" aria-hidden="true"></span>
<span class="nav-tree__text">
Javascript API
</span>
</span>
<span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
</summary>
<ul class="nav-tree" data-menu-depth="2">
<li class="nav-tree__item ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/javascript/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/events/">
<span class="nav-tree__text">
events
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/settings/">
<span class="nav-tree__text">
settings
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-breakpoints/">
<span class="nav-tree__text">
ui/breakpoints
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-collapsible/">
<span class="nav-tree__text">
ui/collapsible
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-details-group/">
<span class="nav-tree__text">
ui/details-group
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-dialog/">
<span class="nav-tree__text">
ui/dialog
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-flipcard/">
<span class="nav-tree__text">
ui/flipcard
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-grid/">
<span class="nav-tree__text">
ui/grid
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-modal-builder/">
<span class="nav-tree__text">
ui/modal-builder
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller/">
<span class="nav-tree__text">
ui/overflow-scroller
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-overflow-scroller-pager/">
<span class="nav-tree__text">
ui/overflow-scroller-pager
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-page/">
<span class="nav-tree__text">
ui/page
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-popover/">
<span class="nav-tree__text">
ui/popover
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print/">
<span class="nav-tree__text">
ui/print
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-print-details/">
<span class="nav-tree__text">
ui/print-details
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-programmatic-modal/">
<span class="nav-tree__text">
ui/programmatic-modal
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-proxy-click/">
<span class="nav-tree__text">
ui/proxy-click
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-resizer/">
<span class="nav-tree__text">
ui/resizer
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scroll-slider/">
<span class="nav-tree__text">
ui/scroll-slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-scrollpoint/">
<span class="nav-tree__text">
ui/scrollpoint
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-slider/">
<span class="nav-tree__text">
ui/slider
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tabs/">
<span class="nav-tree__text">
ui/tabs
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-theme-toggle/">
<span class="nav-tree__text">
ui/theme-toggle
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/ui-tooltip/">
<span class="nav-tree__text">
ui/tooltip
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-class-logger/">
<span class="nav-tree__text">
utils/class-logger
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-css/">
<span class="nav-tree__text">
utils/css
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
<span class="nav-tree__text">
utils/dom
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-file-save/">
<span class="nav-tree__text">
utils/file-save
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-floating-ui/">
<span class="nav-tree__text">
utils/floating-ui
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-id/">
<span class="nav-tree__text">
utils/id
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-pause-youtube-video/">
<span class="nav-tree__text">
utils/pause-youtube-video
</span>
</a>
</li>
<li class="nav-tree__item ">
<a class="nav-tree__link " href="/frontend/javascript/utils-system/">
<span class="nav-tree__text">
utils/system
</span>
</a>
</li>
</ul>
</details>
</li>
<li class="nav-tree__item nav-tree__item--separator-before">
<a class="nav-tree__link " href="/frontend/changelog/">
<span class="nav-tree__icon fas fa-clock-rotate-left" aria-hidden="true"></span>
<span class="nav-tree__text">
Changelog
</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="page__toc page-toc">
<h2>Jump To:</h2>
<div class="toc">
<ol>
<li><a href="#variables">Variables</a>
<ol>
<li><a href="#variable-config">$config</a>
</li>
<li><a href="#variable-sizes">$sizes</a>
</li>
</ol>
</li>
<li><a href="#mixins">Mixins</a>
<ol>
<li><a href="#mixin-set">set()</a>
</li>
<li><a href="#mixin-word-break">word-break()</a>
</li>
<li><a href="#mixin-set-sizes">set-sizes()</a>
</li>
<li><a href="#mixin-font-size-responsive">font-size-responsive()</a>
</li>
<li><a href="#mixin-size">size()</a>
</li>
</ol>
</li>
<li><a href="#functions">Functions</a>
<ol>
<li><a href="#function-get">get()</a>
</li>
<li><a href="#function-scale">scale()</a>
</li>
<li><a href="#function-scale-line-height">scale-line-height()</a>
</li>
<li><a href="#function-rem">rem()</a>
</li>
<li><a href="#function-em">em()</a>
</li>
<li><a href="#function-new-size">new-size()</a>
</li>
<li><a href="#function-get-default-sizes">get-default-sizes()</a>
</li>
<li><a href="#function-get-size">get-size()</a>
</li>
<li><a href="#function-has-size">has-size()</a>
</li>
<li><a href="#function-unitless-line-height">unitless-line-height()</a>
</li>
<li><a href="#function-get-size-converted-value">get-size-converted-value()</a>
</li>
<li><a href="#function-get-size-value">get-size-value()</a>
</li>
</ol>
</li>
</ol>
</div>
</div>
<main id="main" class="page__body">
<div class="page__body-top container api-docs">
<div class="wysiwyg">
<h1 id="typography" tabindex="-1">Typography</h1>
<div class="type-large">
<p>Manages typography settings, sizes and provides typography related utilities</p>
</div>
<h2 id="variables" tabindex="-1">Variables</h2>
<div class="sassdoc-item-header">
<h3 id="variable-config" tabindex="-1">$config</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
</div>
</div>
<p>Module Settings</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"letter-spacing-uppercase"</span><span class="pjs-token pjs-punctuation">:</span> 0.04em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"margin-bottom"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"margin-top"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"responsive-change"</span><span class="pjs-token pjs-punctuation">:</span> 0.05vw<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"scale-steps"</span><span class="pjs-token pjs-punctuation">:</span> 5<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"size-ratio"</span><span class="pjs-token pjs-punctuation">:</span> 1.8<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"size-line-height-ratio"</span><span class="pjs-token pjs-punctuation">:</span> 0.97<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-family"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-family-monospace"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>Menlo<span class="pjs-token pjs-punctuation">,</span> Consolas<span class="pjs-token pjs-punctuation">,</span> Monaco<span class="pjs-token pjs-punctuation">,</span> monospace<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-family-sans"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-family-serif"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>Cambria<span class="pjs-token pjs-punctuation">,</span> Georgia<span class="pjs-token pjs-punctuation">,</span> serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-weight"</span><span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-weight-bold"</span><span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-weight-light"</span><span class="pjs-token pjs-punctuation">:</span> 300<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-weight-normal"</span><span class="pjs-token pjs-punctuation">:</span> normal<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-weight-semibold"</span><span class="pjs-token pjs-punctuation">:</span> 600<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"line-height"</span><span class="pjs-token pjs-punctuation">:</span> 1.5<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"line-height-dense"</span><span class="pjs-token pjs-punctuation">:</span> 1.3<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"line-height-densest"</span><span class="pjs-token pjs-punctuation">:</span> 1.1<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"line-height-spaced"</span><span class="pjs-token pjs-punctuation">:</span> 1.75<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"max-width"</span><span class="pjs-token pjs-punctuation">:</span> 60em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"max-width-large"</span><span class="pjs-token pjs-punctuation">:</span> 75em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"max-width-small"</span><span class="pjs-token pjs-punctuation">:</span> 45em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> variable</li>
<li><strong>Lines (comments):</strong> 15-37</li>
<li><strong>Lines (code):</strong> 39-64</li>
</ul>
</details>
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Default</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">letter-spacing-uppercase</td>
<td style="text-align:left">Dimension</td>
<td style="text-align:left">0.04em</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">margin-bottom</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">1em</td>
<td style="text-align:left">Default margin for typography (like paragraphs)</td>
</tr>
<tr>
<td style="text-align:left">margin-top</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">null</td>
<td style="text-align:left">Default margin for typography (like paragraphs)</td>
</tr>
<tr>
<td style="text-align:left">responsive-change</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">0.05vw</td>
<td style="text-align:left">Amount to scale typography by browser's width (use viewport units)</td>
</tr>
<tr>
<td style="text-align:left">scale-steps</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">5</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">size-ratio</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">1.8</td>
<td style="text-align:left">Font size scale when using preset sizes, ratio mixin)</td>
</tr>
<tr>
<td style="text-align:left">size-line-height-ratio</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">0.97</td>
<td style="text-align:left">Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable</td>
</tr>
<tr>
<td style="text-align:left">font-family</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif)</td>
<td style="text-align:left">Default font family</td>
</tr>
<tr>
<td style="text-align:left">font-family-monospace</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">(Menlo, Consolas, Monaco, monospace)</td>
<td style="text-align:left">Base font-family for monospace</td>
</tr>
<tr>
<td style="text-align:left">font-family-sans</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif)</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">font-family-serif</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">(Cambria, Georgia, serif</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">font-size</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">16px</td>
<td style="text-align:left">Default font size (use pixels, converted, is used for rem base)</td>
</tr>
<tr>
<td style="text-align:left">font-weight</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">inherit</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">font-weight-bold</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">bold</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">font-weight-light</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">300</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">font-weight-normal</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">normal</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">font-weight-semibold</td>
<td style="text-align:left">CssValue</td>
<td style="text-align:left">600</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">line-height</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">1.5</td>
<td style="text-align:left">Default line height</td>
</tr>
<tr>
<td style="text-align:left">line-height-dense</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">1.3</td>
<td style="text-align:left">Default dense line height</td>
</tr>
<tr>
<td style="text-align:left">line-height-densest</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">1.1</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">line-height-spaced</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">1.75</td>
<td style="text-align:left"></td>
</tr>
</tbody>
</table>
<div class="sassdoc-item-header">
<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
</div>
</div>
<p>Default size presets</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">get-default-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> variable</li>
<li><strong>Lines (comments):</strong> 181-190</li>
<li><strong>Lines (code):</strong> 192-192</li>
</ul>
</details>
<h4 id="map-properties-1" tabindex="-1">Map Properties</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size.name</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">Name of size</td>
</tr>
<tr>
<td style="text-align:left">$size.name.font-size</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">Font size in rems or pixels</td>
</tr>
<tr>
<td style="text-align:left">$size.name.line-height</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">Line height (unitless)</td>
</tr>
<tr>
<td style="text-align:left">$size.name.responsive</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">Apply responsive sizes</td>
</tr>
<tr>
<td style="text-align:left">$size.name.breakpoints</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">Map of breakpoints where each key is breakpoint with map of changes (ie. font-size, etc)</td>
</tr>
<tr>
<td style="text-align:left">$size.name.breakpoints.breakpoint.direction</td>
<td style="text-align:left">Number</td>
<td style="text-align:left">Direction the breakpoint should be applied to (ie. min/max)</td>
</tr>
<tr>
<td style="text-align:left">$size.name.base-class</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">This style should be included in the base (top can be overridden)</td>
</tr>
<tr>
<td style="text-align:left">$size.name.helper-class</td>
<td style="text-align:left">Boolean</td>
<td style="text-align:left">This style should be included in the helpers (overrides)</td>
</tr>
</tbody>
</table>
<h2 id="mixins" tabindex="-1">Mixins</h2>
<div class="sassdoc-item-header">
<h3 id="mixin-set" tabindex="-1">set()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Change modules $config</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 66-68</li>
<li><strong>Lines (code):</strong> 70-72</li>
</ul>
</details>
<h4 id="parameters" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Map of changes</td>
</tr>
<tr>
<td style="text-align:left">@include ulu.typography-set(( "font-size" : 14px ));</td>
<td style="text-align:left"></td>
<td style="text-align:left"></td>
</tr>
</tbody>
</table>
<h4 id="require" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-word-break" tabindex="-1">word-break()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Output CSS Break word strategy</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 125-126</li>
<li><strong>Lines (code):</strong> 128-132</li>
</ul>
</details>
<h4 id="parameters-1" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$force</td>
<td style="text-align:left"><code>Boolean</code></td>
<td style="text-align:left">Force words to break (will have unusual breaks)</td>
</tr>
</tbody>
</table>
<div class="sassdoc-item-header">
<h3 id="mixin-set-sizes" tabindex="-1">set-sizes()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Configure the typography sizes</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 194-211</li>
<li><strong>Lines (code):</strong> 213-215</li>
</ul>
</details>
<h4 id="examples" tabindex="-1">Examples</h4>
<p>Adjusting the h1 and h2 sizes while keeping pre-existing sizes by using deep merge</p>
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">typography-set-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"h1"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span> 50px<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"margin-top"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"margin-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"h2"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
<span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span> 38px<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> blue<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"margin-top"</span> <span class="pjs-token pjs-punctuation">:</span> 2.5em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-string">"margin-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"deep"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<h4 id="parameters-2" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
<th style="text-align:left">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">A map to merge into the color palette</td>
<td style="text-align:left"></td>
</tr>
<tr>
<td style="text-align:left">$merge-mode</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Merge strategy see, utils.map-merge options</td>
<td style="text-align:left">null</td>
</tr>
</tbody>
</table>
<h4 id="require-1" tabindex="-1">Require</h4>
<ul>
<li>map-merge()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="mixin-font-size-responsive" tabindex="-1">font-size-responsive()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Print's the responsive type formula</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 299-301</li>
<li><strong>Lines (code):</strong> 303-305</li>
</ul>
</details>
<h4 id="parameters-3" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$font-size</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">Name to retrieve from sizes map or a unique size map that follows the API</td>
</tr>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Modifications to be merged into size before using</td>
</tr>
</tbody>
</table>
<div class="sassdoc-item-header">
<h3 id="mixin-size" tabindex="-1">size()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Mixin</strong></span>
</div>
</div>
<p>Print a typography size (font-size, line-height)</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> mixin</li>
<li><strong>Lines (comments):</strong> 307-310</li>
<li><strong>Lines (code):</strong> 312-353</li>
</ul>
</details>
<h4 id="parameters-4" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$nameOrMap</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">Name to retrieve from sizes map or a unique size map that follows the API</td>
</tr>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Modifications to be merged into size before output</td>
</tr>
<tr>
<td style="text-align:left">$only-font-size</td>
<td style="text-align:left"><code>Boolean</code></td>
<td style="text-align:left">Only output the font size</td>
</tr>
</tbody>
</table>
<h4 id="require-2" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/typography/#mixin-font-size-responsive">font-size-responsive()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#function-get-size">get-size()</a></li>
<li><a href="/frontend/sass/core/typography/#function-get-size-converted-value">get-size-converted-value()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
<li><a href="/frontend/sass/core/breakpoint/#function-get-size-value">get-size-value()</a></li>
</ul>
<h2 id="functions" tabindex="-1">Functions</h2>
<div class="sassdoc-item-header">
<h3 id="function-get" tabindex="-1">get()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get a config option</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 74-76</li>
<li><strong>Lines (code):</strong> 78-80</li>
</ul>
</details>
<h4 id="parameters-5" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$changes</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Map of changes</td>
</tr>
<tr>
<td style="text-align:left">@include ulu.typography-get(( "font-size" : 14px ));</td>
<td style="text-align:left"></td>
<td style="text-align:left"></td>
</tr>
</tbody>
</table>
<h4 id="require-3" tabindex="-1">Require</h4>
<ul>
<li>require-map-get()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-scale" tabindex="-1">scale()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get scale of the base font-size</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 82-84</li>
<li><strong>Lines (code):</strong> 86-88</li>
</ul>
</details>
<h4 id="parameters-6" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$step</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Current size in the scale you want to calculate</td>
</tr>
</tbody>
</table>
<h4 id="returns" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Number</td>
<td style="text-align:left">Scaled value</td>
</tr>
</tbody>
</table>
<h4 id="require-4" tabindex="-1">Require</h4>
<ul>
<li>ratio-scale-size()</li>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-scale-line-height" tabindex="-1">scale-line-height()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get scale of the line-height</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 90-93</li>
<li><strong>Lines (code):</strong> 95-97</li>
</ul>
</details>
<h4 id="parameters-7" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$step</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Current size in the scale you want to calculate</td>
</tr>
</tbody>
</table>
<h4 id="returns-1" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Number</td>
<td style="text-align:left">Scaled value</td>
</tr>
</tbody>
</table>
<h4 id="todos" tabindex="-1">Todos</h4>
<ul>
<li>Setup breakpoints</li>
</ul>
<h4 id="require-5" tabindex="-1">Require</h4>
<ul>
<li>ratio-scale-size()</li>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-rem" tabindex="-1">rem()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Convert pixel value to rem value based on typography $font-size</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 99-101</li>
<li><strong>Lines (code):</strong> 103-109</li>
</ul>
</details>
<h4 id="parameters-8" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$pixels</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Pixel value to convert from</td>
</tr>
</tbody>
</table>
<h4 id="returns-2" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Number</td>
<td style="text-align:left">Rem value</td>
</tr>
</tbody>
</table>
<h4 id="require-6" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-em" tabindex="-1">em()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Changes pixels to em</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 111-114</li>
<li><strong>Lines (code):</strong> 116-123</li>
</ul>
</details>
<h4 id="parameters-9" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$value</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Pixel value to convert from</td>
</tr>
<tr>
<td style="text-align:left">$base</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Conversion base (defaults to font-size)</td>
</tr>
</tbody>
</table>
<h4 id="returns-3" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Number</td>
<td style="text-align:left">Rem value</td>
</tr>
</tbody>
</table>
<h4 id="require-7" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-new-size" tabindex="-1">new-size()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Creates a size map</p>
<ul>
<li>This is just an accelerator for creating a size map</li>
<li>This is opinionated about how sizes are setup, headlines get (margins, bold, headline color) and are base classes while non-headlines are added as helper classes and do not get (margins, bold, color)</li>
<li>You can pass your own size maps using set-sizes()</li>
</ul>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 134-140</li>
<li><strong>Lines (code):</strong> 142-156</li>
</ul>
</details>
<h4 id="parameters-10" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$font-size</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Font size</td>
</tr>
<tr>
<td style="text-align:left">$line-height</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Line height</td>
</tr>
<tr>
<td style="text-align:left">$is-headline</td>
<td style="text-align:left"><code>Boolean</code></td>
<td style="text-align:left">Is a headline</td>
</tr>
</tbody>
</table>
<h4 id="require-8" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-default-sizes" tabindex="-1">get-default-sizes()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Function that returns default sizes</p>
<ul>
<li>Used to set the sizes initially and</li>
<li>You can use this if you've reconfigured typography settings and want to update the default sizes with the new settings</li>
</ul>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 158-161</li>
<li><strong>Lines (code):</strong> 163-179</li>
</ul>
</details>
<h4 id="returns-4" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Map</td>
<td style="text-align:left">The default typography sizes</td>
</tr>
</tbody>
</table>
<h4 id="require-9" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/typography/#function-new-size">new-size()</a></li>
<li><a href="/frontend/sass/core/typography/#function-scale">scale()</a></li>
<li><a href="/frontend/sass/core/typography/#function-scale-line-height">scale-line-height()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-size" tabindex="-1">get-size()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get a specific size's settings map</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 217-219</li>
<li><strong>Lines (code):</strong> 221-223</li>
</ul>
</details>
<h4 id="parameters-11" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$name</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">Name of size</td>
</tr>
</tbody>
</table>
<h4 id="returns-5" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Map</td>
</tr>
</tbody>
</table>
<h4 id="require-10" tabindex="-1">Require</h4>
<ul>
<li>require-map-get()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-has-size" tabindex="-1">has-size()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Check if a typography size exists</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 225-227</li>
<li><strong>Lines (code):</strong> 229-231</li>
</ul>
</details>
<h4 id="parameters-12" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$name</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">Name of size</td>
</tr>
</tbody>
</table>
<h4 id="returns-6" tabindex="-1">Returns</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Boolean</td>
</tr>
</tbody>
</table>
<h4 id="require-11" tabindex="-1">Require</h4>
<ul>
<li>map-has()</li>
<li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-unitless-line-height" tabindex="-1">unitless-line-height()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Forces conversion to unitless line-height</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 233-235</li>
<li><strong>Lines (code):</strong> 237-251</li>
</ul>
</details>
<h4 id="parameters-13" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$line-height</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Line height size in px, em, or rem</td>
</tr>
<tr>
<td style="text-align:left">$font-size</td>
<td style="text-align:left"><code>Number</code></td>
<td style="text-align:left">Font size in px, em, or rem</td>
</tr>
</tbody>
</table>
<h4 id="throw" tabindex="-1">Throw</h4>
<ul>
<li>ULU: Unable to convert to unitless line-height for: #{ $line-height }</li>
</ul>
<h4 id="require-12" tabindex="-1">Require</h4>
<ul>
<li>strip-unit()</li>
<li><a href="/frontend/sass/core/typography/#function-rem">rem()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-size-converted-value" tabindex="-1">get-size-converted-value()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Print a value from the size and convert it (to appropriate unit for framework)</p>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 253-255</li>
<li><strong>Lines (code):</strong> 257-283</li>
</ul>
</details>
<h4 id="parameters-14" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Size's map</td>
</tr>
<tr>
<td style="text-align:left">$props</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The property to get</td>
</tr>
</tbody>
</table>
<h4 id="require-13" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
<li><a href="/frontend/sass/core/typography/#function-unitless-line-height">unitless-line-height()</a></li>
<li><a href="/frontend/sass/core/typography/#function-rem">rem()</a></li>
</ul>
<div class="sassdoc-item-header">
<h3 id="function-get-size-value" tabindex="-1">get-size-value()</h3>
<div class="sassdoc-item-header__labels">
<span class="tag tag--primary"><strong>Function</strong></span>
</div>
</div>
<p>Get a sizes property value that doesn't need conversion</p>
<ul>
<li>Reason: Will map to default if user set's size prop to true</li>
</ul>
<details>
<summary>File Information</summary>
<ul>
<li><strong>File:</strong> _typography.scss</li>
<li><strong>Group:</strong> typography</li>
<li><strong>Type:</strong> function</li>
<li><strong>Lines (comments):</strong> 285-288</li>
<li><strong>Lines (code):</strong> 290-297</li>
</ul>
</details>
<h4 id="parameters-15" tabindex="-1">Parameters</h4>
<table>
<thead>
<tr>
<th style="text-align:left">Name</th>
<th style="text-align:left">Type</th>
<th style="text-align:left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">$size</td>
<td style="text-align:left"><code>Map</code></td>
<td style="text-align:left">Size's map</td>
</tr>
<tr>
<td style="text-align:left">$props</td>
<td style="text-align:left"><code>String</code></td>
<td style="text-align:left">The property to get</td>
</tr>
</tbody>
</table>
<h4 id="require-14" tabindex="-1">Require</h4>
<ul>
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
</ul>
</div>
</div>
</main>
<footer></footer>
<script src="http://localhost:5173/@vite/client" type="module"></script>
<script src="http://localhost:5173/docs-src/src/main.js" type="module"></script>
</body>
</html>