@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.76 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="">Lorem ipsum dolor sit amet</a>
</h5><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</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="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</h5><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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="">Lorem Ipsum</a>
</h5><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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="">Lorem ipsum dolor sit amet</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="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</h5><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</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="">Lorem Ipsum</a>
</h5><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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>