@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.
391 lines (340 loc) • 17.3 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>
Tile Grid Overlay
</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">Tile Grid Overlay</h1>
<div class="rule rule--short rule--accent"></div>
<p class="type-large type-light">
Tile grid with image overlay. Component that uses popover, tile-grid, tile-button and fill-context along with styles of it's own
</p>
</div>
</div>
</div>
<div class="container">
<h2 class="h2">Default Example</h2>
<div class="tile-grid-overlay">
<div class="tile-grid-overlay__background-image fill-context fill-context--auto no-print">
<img src="/frontend/assets/placeholder/image-1.jpg" width="1024" height="683" loading="lazy">
</div>
<ul class="tile-grid tile-grid--no-gap tile-grid--static tile-grid-overlay__grid">
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Item With an Image</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__header popover__header--media">
<img src="/frontend/assets/placeholder/image-1.jpg" width="975" height="557" loading="lazy">
</div>
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<h2 class="h2">Wide Example</h2>
<p>Note: This needs to match up with the tile grids.</p>
<div class="tile-grid-overlay">
<div class="tile-grid-overlay__background-image fill-context fill-context--auto no-print">
<img src="/frontend/assets/placeholder/image-1.jpg" width="1024" height="683" loading="lazy">
</div>
<ul class="tile-grid tile-grid--no-gap tile-grid--static-wide tile-grid-overlay__grid tile-grid-overlay__grid--wide">
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Item With an Image</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__header popover__header--media">
<img src="/frontend/assets/placeholder/image-1.jpg" width="975" height="557" loading="lazy">
</div>
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
<li class="tile-grid__item tile-grid-overlay__item">
<button class="tile-button tile-grid-overlay__button theme-dark" type="button" data-ulu-popover-trigger='{
"floating" : { "placement" : "bottom-end" }
}'>
<strong class="tile-button__row" data-ulu-popover-trigger-anchor="">Just Another Item</strong>
<span class="tile-button__row no-print">
<span class="fas fa-plus" aria-hidden="true"></span>
</span>
</button>
<div class="popover theme-light popover--large" data-ulu-popover-content="">
<div class="popover__inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius finibus dignissim. Aenean
ullamcorper sodales auctor. Aenean consectetur dignissim lacus, nec sodales nibh sodales nec. Sed vulputate
euismod orci, ut tristique ligula elementum id. Aenean pellentesque lorem at augue fringilla, vitae dapibus
nulla semper. Nam facilisis eleifend dui, ac dictum mauris maximus id.
</p>
</div>
<span class="popover__arrow" data-ulu-popover-arrow=""></span>
</div>
</li>
</ul>
</div>
</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>