@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.
173 lines (150 loc) • 5.95 kB
HTML
<html lang="en" class="fullscreen-layout">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Slider
</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">
<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="button button--small button--icon button--secondary margin-left-auto" 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--secondary" href="../" aria-label="Exit">
<span class="css-icon css-icon--close" aria-hidden="true"></span>
</a>
</div>
</header>
<main id="main" class="page__body">
<div class="page__content-header">
<div class="container">
<div class="type-max-width">
<h1 class="page__title h1">Slider</h1>
<div class="rule rule--short rule--accent"></div>
<p class="type-large type-light">
Slider Intro
</p>
</div>
</div>
</div>
<div class="container-fill">
<h3 class="h3">Slider with Images</h3>
<div class="slider slider--small slider--inset-controls" data-ulu-slider='{"transitionFade":false}'>
<div class="slider__control-context" data-ulu-slider-control-context="">
<div class="slider__track-crop" data-ulu-slider-track-container="">
<ul class="slider__track" data-ulu-slider-track="">
<li class="slider__slide slider__slide-gap-for-controls" data-ulu-slider-slide="">
<img src="/frontend/assets/placeholder/image-1.jpg">
</li>
<li class="slider__slide" data-ulu-slider-slide="">
<img src="/frontend/assets/placeholder/image-1.jpg">
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fill">
<h3 class="h3">Slider with Text</h3>
<div class="slider slider--small slider--inset-controls" data-ulu-slider='{"transitionFade":false}'>
<div class="slider__control-context" data-ulu-slider-control-context="">
<div class="slider__track-crop" data-ulu-slider-track-container="">
<ul class="slider__track" data-ulu-slider-track="">
<li class="slider__slide" data-ulu-slider-slide="">
<figure class="pull-quote">
<blockquote class="pull-quote__body display-inline-all">
Important Quote #1
</blockquote>
<figcaption class="pull-quote__author">
<strong class="pull-quote__author-name">
Author #1
</strong>
<span class="pull-quote__author-title">
<span class="hidden">, </span>
Professor, Emeritus
</span>
</figcaption>
</figure>
</li><li class="slider__slide" data-ulu-slider-slide="">
<figure class="pull-quote">
<blockquote class="pull-quote__body display-inline-all">
Important Quote #2
</blockquote>
<figcaption class="pull-quote__author">
<strong class="pull-quote__author-name">
Author #2
</strong>
<span class="pull-quote__author-title">
<span class="hidden">, </span>
Professor, Emeritus
</span>
</figcaption>
</figure>
</li><li class="slider__slide" data-ulu-slider-slide="">
<figure class="pull-quote">
<blockquote class="pull-quote__body display-inline-all">
Important Quote #3
</blockquote>
<figcaption class="pull-quote__author">
<strong class="pull-quote__author-name">
Author #3
</strong>
<span class="pull-quote__author-title">
<span class="hidden">, </span>
Professor, Emeritus
</span>
</figcaption>
</figure>
</li><li class="slider__slide" data-ulu-slider-slide="">
<figure class="pull-quote">
<blockquote class="pull-quote__body display-inline-all">
Important Quote #4
</blockquote>
<figcaption class="pull-quote__author">
<strong class="pull-quote__author-name">
Author #4
</strong>
<span class="pull-quote__author-title">
<span class="hidden">, </span>
Professor, Emeritus
</span>
</figcaption>
</figure>
</li>
<p></p></ul>
</div>
</div>
</div><p></p>
</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>