@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,556 lines • 108 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
File Save
</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 is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/file-save/" aria-current="page">
<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 ">
<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 is-active is-active-trail ">
<a class="nav-tree__link is-active is-active-trail" href="/frontend/demos/file-save/" aria-current="page">
<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 ">
<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">File Save</h1>
<p class="type-large type-light">
Basic test for the file-save utility
</p>
<hr class="rule rule--light rule--margin-large">
<div class="form-theme form-theme--full-width">
<div class="form-theme__item form-theme__item--textarea">
<label for="file-save-filename">Filename:</label>
<input type="text" id="file-save-filename" name="file-save-filename" placeholder="example.txt">
</div>
<div class="form-theme__item form-theme__item--textarea">
<label for="file-save-content">Content:</label>
<textarea id="file-save-content" name="file-save-content" rows="5">This text will be in the file</textarea>
</div>
</div>
<button class="button" id="file-save-trigger">
Create File Link
</button>
<div id="file-save-link-container"></div>
<h2 class="h2">Script for this page</h2>
<pre class="language-js"><code class="language-js"><span class="pjs-token pjs-function">addEventListener</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"DOMContentLoaded"</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-operator">=></span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-keyword">const</span> elements <span class="pjs-token pjs-operator">=</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-literal-property pjs-property">trigger</span><span class="pjs-token pjs-operator">:</span> document<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">getElementById</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"file-save-trigger"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-literal-property pjs-property">filename</span><span class="pjs-token pjs-operator">:</span> document<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">getElementById</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"file-save-filename"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-literal-property pjs-property">content</span><span class="pjs-token pjs-operator">:</span> document<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">getElementById</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"file-save-content"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
<span class="pjs-token pjs-literal-property pjs-property">linkContainer</span><span class="pjs-token pjs-operator">:</span> document<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">getElementById</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"file-save-link-container"</span><span class="pjs-token pjs-punctuation">)</span>
<span class="pjs-token pjs-punctuation">}</span><span class="pjs-token pjs-punctuation">;</span>
elements<span class="pjs-token pjs-punctuation">.</span>trigger<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">addEventListener</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"click"</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-operator">=></span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-keyword">if</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-operator">!</span>Ulu<span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-keyword">return</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-keyword">const</span> <span class="pjs-token pjs-punctuation">{</span> FileSave <span class="pjs-token pjs-punctuation">}</span> <span class="pjs-token pjs-operator">=</span> Ulu<span class="pjs-token pjs-punctuation">.</span>utils<span class="pjs-token pjs-punctuation">.</span>fileSave<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-keyword">const</span> filename <span class="pjs-token pjs-operator">=</span> elements<span class="pjs-token pjs-punctuation">.</span>filename<span class="pjs-token pjs-punctuation">.</span>value <span class="pjs-token pjs-operator">||</span> <span class="pjs-token pjs-string">"example.txt"</span><span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-keyword">const</span> content <span class="pjs-token pjs-operator">=</span> elements<span class="pjs-token pjs-punctuation">.</span>content<span class="pjs-token pjs-punctuation">.</span>value<span class="pjs-token pjs-punctuation">;</span>
<span class="pjs-token pjs-keyword">const</span> file <span class="pjs-token pjs-operator">=</span> <span class="pjs-token pjs-keyword">new</span> <span class="pjs-token pjs-class-name">FileSave</span><span class="pjs-token pjs-punctuation">(</span>content<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-punctuation">{</span> filename <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-keyword">if</span> <span class="pjs-token pjs-punctuation">(</span>file<span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
<span class="pjs-token pjs-keyword">const</span> link <span class="pjs-token pjs-operator">=</span> file<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">createLink</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"Download File"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
link<span class="pjs-token pjs-punctuation">.</span>classList<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">add</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"button"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"button--secondary"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
elements<span class="pjs-token pjs-punctuation">.</span>linkContainer<span class="pjs-token pjs-punctuation">.</span>innerHTML <span class="pjs-token pjs-operator">=</span> <span class="pjs-token pjs-string">""</span><span class="pjs-token pjs-punctuation">;</span>
elements<span class="pjs-token pjs-punctuation">.</span>linkContainer<span class="pjs-token pjs-punctuation">.</span><span class="pjs-token pjs-function">appendChild</span><span class="pjs-token pjs-punctuation">(</span>link<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-punctuation">;</span>
<span class="pjs-token pjs-punctuation">}</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
<script>
addEventListener("DOMContentLoaded", () => {
const elements = {
trigger: document.getElementById("file-save-trigger"),
filename: document.getElementById("file-save-filename"),
content: document.getElementById("file-save-content"),
linkContainer: document.getElementById("file-save-link-container")
};
elements.trigger.addEventListener("click", () => {
if (!Ulu) return;
const { FileSave } = Ulu.utils.fileSave;
const filename = elements.filename.value || "example.txt";
const content = elements.content.value;
const file = new FileSave(content, { filename });
if (file) {
const link = file.createLink("Download File");
link.classList.add("button", "button--secondary");
elements.linkContainer.innerHTML = "";
elements.linkContainer.appendChild(link);
}
});
});
</script>
</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>