@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.
171 lines (146 loc) • 7.37 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>
Scroll 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">Scroll Slider</h1>
<div class="rule rule--short rule--accent"></div>
<p class="type-large type-light">
Scroll Slider Intro
</p>
</div>
</div>
</div>
<p></p><section class="container-fill" data-ulu-scroll-slider-init="" aria-labelledby="slider-title">
<div class="container-fit">
<h2 class="h2" id="slider-title">
Scroll-Slider
</h2>
</div>
<div class="scroll-slider scroll-slider--cards" data-ulu-scroll-slider="[]">
<div class="scroll-slider__control-context" data-ulu-scroll-slider-control-context="">
<div class="scroll-slider__track-crop">
<ul class="scroll-slider__track" data-ulu-scroll-slider-track="">
<li class="scroll-slider__slide scroll-slider__slide--empty" role="presentation" data-ulu-scroll-slider-slide="">
</li><p></p>
<p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
</h5><div>
This is the card content. It can contain around 2-3 sentences.
</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
<img src="/frontend/assets/placeholder/image-1.jpg">
</div><div class="card__footer">
<a class="button button--small" href="https://www.yahoo.com/">Footer</a>
</div></article>
</li></p>
<p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
</h5><div>
This is the card content. It can contain around 2-3 sentences.
</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
<img src="/frontend/assets/placeholder/image-1.jpg">
</div><div class="card__footer">
<a class="button button--small" href="https://www.yahoo.com/">Footer</a>
</div></article>
</li></p>
<p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
</h5><div>
This is the card content. It can contain around 2-3 sentences.
</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
<img src="/frontend/assets/placeholder/image-1.jpg">
</div><div class="card__footer">
<a class="button button--small" href="https://www.yahoo.com/">Footer</a>
</div></article>
</li></p>
<p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 4 Title</a>
</h5><div>
This is the card content. It can contain around 2-3 sentences.
</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
<img src="/frontend/assets/placeholder/image-1.jpg">
</div><div class="card__footer">
<a class="button button--small" href="https://www.yahoo.com/">Footer</a>
</div></article>
</li></p>
<p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 5 Title</a>
</h5><div>
This is the card content. It can contain around 2-3 sentences.
</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
<img src="/frontend/assets/placeholder/image-1.jpg">
</div><div class="card__footer">
<a class="button button--small" href="https://www.yahoo.com/">Footer</a>
</div></article>
</li></p>
<p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
<article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 6 Title</a>
</h5><div>
This is the card content. It can contain around 2-3 sentences.
</div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
<img src="/frontend/assets/placeholder/image-1.jpg">
</div><div class="card__footer">
<a class="button button--small" href="https://www.yahoo.com/">Footer</a>
</div></article>
</li></p>
<p><li class="scroll-slider__slide scroll-slider__slide--empty" role="presentation" data-ulu-scroll-slider-slide="">
</li>
</p></ul>
</div>
</div>
</div>
</section><p></p>
</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>