@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.
5,563 lines • 106 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Panel
</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 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 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 is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/panel/" aria-current="page">
<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 ">
<details class="nav-tree__collapsible">
<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 ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</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">
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 ">
<a class="nav-tree__link nav-tree__link--index " 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 ">
<a class="nav-tree__link " href="/frontend/sass/core/typography/">
<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 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 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 is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/panel/" aria-current="page">
<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 ">
<details class="nav-tree__collapsible">
<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 ">
<a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
<span class="nav-tree__text">
Introduction
</span>
</a>
</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">
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 ">
<a class="nav-tree__link nav-tree__link--index " 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 ">
<a class="nav-tree__link " href="/frontend/sass/core/typography/">
<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">
</div>
<main id="main" class="page__body">
<div class="page__body-top container ">
<h1 class="page__title h1">Panel</h1>
<p class="type-large type-light">
A callout-like layout with header, body, footer. Used for menus, dashboards, sidebars, etc
</p>
<hr class="rule rule--light rule--margin-large">
<h2 class="h2">Example</h2>
<div class="panel">
<div class="panel__row panel__row--header">
<h3>This is the header</h3>
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--footer">
This is the footer
</div>
</div>
<h2 class="h2">Panel Container Padding</h2>
<div class="panel panel--transparent">
<div class="panel__row panel__row--header">
<h3>This is the header</h3>
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--separator-top">
This panel has separator top
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--footer">
This is the footer
</div>
</div>
<h2 class="h2">Modifier Test (compact)</h2>
<div class="panel panel--compact">
<div class="panel__row panel__row--header">
<h3>This is the header</h3>
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--footer">
This is the footer
</div>
</div>
<h2 class="h2">Separators</h2>
<div class="panel panel--separators">
<div class="panel__row panel__row--header">
<h3>This is the header</h3>
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--separator-top">
This panel has separator-top
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--separator-bottom">
This panel has separator-bottom
</div>
<div class="panel__row crop-margins">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
</div>
<div class="panel__row panel__row--footer">
This is the footer
</div>
</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>