@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.
310 lines (286 loc) • 12.5 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>
Hero
</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">Hero</h1>
<div class="rule rule--short rule--accent"></div>
<p class="type-large type-light">
Demos below show all available layouts. Position modifiers adjust the position of the hero graphic. A container class is required within content, as this only controls the outer layout. For example container-small is being used below. Note fill-context can be used on graphic container if you can't add a class directly to the img/video.
</p>
</div>
</div>
</div>
<section class="hero hero--split hero--left">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (left)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--split hero--right">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (right)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--split hero--top">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (top)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--split">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (bottom/default)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (center default)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay hero--left">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (left)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay hero--right">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (right)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay hero--bottom">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (bottom)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay hero--top">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (top)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay hero--bottom hero--left">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (bottom, left)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--overlay hero--compact">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (overlay, compact)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--compact">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Overlay (compact)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1-lightened.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--split hero--left hero--compact">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (left, compact)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--split hero--split-graphic-wide hero--right">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (right, split-graphic-wide)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
<section class="hero hero--split hero--split-content-wide hero--left">
<div class="hero__content">
<div class="hero__content-container container-large">
<div class="hero__content-inner crop-margins">
<h2 class="h1">Split (left, split-content-wide)</h2>
<p class="type-large type-light">
This is an example lead-in sentence. Lorem ipsum et depsi anu. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris.
</p>
</div>
</div>
</div>
<div class="hero__graphic">
<img class="hero__graphic-media" src="/frontend/assets/placeholder/image-1.jpg" alt="colorful street">
</div>
</section>
</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>