@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.
166 lines (144 loc) • 5.13 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>
Image Grid
</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">Image Grid</h1>
<div class="rule rule--short rule--accent"></div>
<p class="type-large type-light">
The grid adjusts to reflow based on min-width
</p>
</div>
</div>
</div>
<div class="container">
<h2 class="h2">Example 6 Images</h2>
<ul class="image-grid">
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
</ul>
<h2 class="h2">Example 5 Images</h2>
<ul class="image-grid">
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
</ul>
<h2 class="h2">Example 4 Images</h2>
<ul class="image-grid">
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
</ul>
<h2 class="h2">Example 3 Images</h2>
<ul class="image-grid">
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
</ul>
<h2 class="h2">Example 2 Images</h2>
<ul class="image-grid">
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
</ul>
<h2 class="h2">Example 1 Images</h2>
<ul class="image-grid">
<li class="image-grid__item">
<img src="https://picsum.photos/400/300" alt="">
</li>
</ul>
</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>