Skip to content

Commit

Permalink
feat(header): add global headers module in Essentials
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Jun 19, 2019
1 parent c42ba8c commit f0d0357
Show file tree
Hide file tree
Showing 2 changed files with 258 additions and 1 deletion.
4 changes: 3 additions & 1 deletion site/_data/essentials.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,6 @@
- name: "Quick links"
description: "Icon, text and description links"
- name: "Content panel"
description: "Panel display sample"
description: "Panel display sample"
- name: "Global headers"
description: "Header variants including multiple navbars"
255 changes: 255 additions & 0 deletions site/docs/4.3/essentials/global-headers/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 004 — Global headers — sample page</title>
<link rel="stylesheet" href="../../dist/css/orangeHelvetica.css">
<link rel="stylesheet" href="../../dist/css/orangeIcons.css">
<link rel="stylesheet" href="../../dist/css/boosted.css">
</head>
<body>
<header class="d-flex mb-3 p-3 border-bottom">
<a href="../" class="btn btn-secondary o-link-arrow back" title="go back to examples">Back</a>
<h1 class="ml-3 mb-0">Module 004 — Global headers</h1>
</header>

<main class="container">
<h2 id="navbar">Navbar</h2>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#"><img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/img/ORANGE_LOGO_rgb.jpg" alt="Back to homepage" title="Back to homepage"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-navbar" aria-controls="collapsing-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse justify-content-between collapse" id="collapsing-navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Active <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu3">Dropdown</a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu4">Dropdown</a>
<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu4">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<h3 class="mt-5">without logo</h3>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#"><span>Navbar brand</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-navbar2" aria-controls="collapsing-navbar2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse justify-content-between collapse" id="collapsing-navbar2">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Active <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu5">Dropdown</a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu5">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu6">Dropdown</a>
<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu6">
<a href="#" role="menuitem" class="dropdown-item">Action</a>
<a href="#" role="menuitem" class="dropdown-item">Another action</a>
<a href="#" role="menuitem" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" role="menuitem" class="dropdown-item">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<h3 class="mt-5">Supra bar With Icons authenticated</h3>
<nav class="navbar navbar-dark bg-dark navbar-expand-md supra">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link" aria-current="page">Personal</a></li>
<li class="nav-item"><a href="#" class="nav-link">Business</a></li>
<li class="nav-item"><a href="#" class="nav-link">Follow us</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link icon svg-buy">
<span class="sr-only">Basket</span>
<sup class="badge badge-info rounded-pill px-1 border border-info">5</sup>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link icon svg-avatar">
<span class="sr-only">My account</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EN</a>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#" aria-label="Version française" lang="fr" hreflang=fr>FR</a></li>
<li><a class="dropdown-item" href="#" aria-label="Version en español" lang="es" hreflang="es">ES</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<h3 class="mt-5">Global header with additional icons authenticated</h3>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#"><img src="/docs/4.3/dist/img/orange_logo.svg" alt="Back to homepage" title="Back to homepage"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-navbar3" aria-controls="collapsing-navbar3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse justify-content-between collapse" id="collapsing-navbar3">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link mx-3 icon svg-search">
<span class="sr-only">Search bar</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link mx-3 icon svg-mail">
<span class="sr-only">Email</span>
<sup class="badge badge-info rounded-pill px-1 border border-info">25</sup>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link mx-3 icon svg-buy">
<span class="sr-only">Basket</span>
<sup class="badge badge-info rounded-pill px-1 border border-info">5</sup>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link mx-3 icon svg-person">
<span class="sr-only">My account</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<h3 class="mt-5">Global header with navigation and search box</h3>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#"><img src="/docs/4.3/dist/img/orange_logo.svg" alt="Back to homepage" title="Back to homepage"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-navbar4" aria-controls="collapsing-navbar4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse justify-content-between collapse" id="collapsing-navbar4">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
<li class="nav-item"><a href="#" class="nav-link">Help</a></li>
</ul>
<form class="form-inline" role="search">
<input type="search" class="form-control bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</div>
</nav>
<h3 class="mt-5">Global header with title, navigation below and icons</h3>
<header role="banner" id="demo-navbar">
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#"><img src="/docs/4.3/dist/img/orange_logo.svg" alt="Back to homepage" title="Back to homepage"/></a>
<a href="#" class="navbar-title ml-2 pl-1">Design</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-navbar5" aria-controls="collapsing-navbar5" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse justify-content-between collapse" id="collapsing-navbar5">
<ul class="navbar-nav"></ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link mx-3 icon svg-search">
<span class="sr-only">Search bar</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link mx-3 icon svg-avatar">
<span class="sr-only">My account</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="o-nav-local inverse">
<div class="container">
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link">Guidelines</a></li>
<li class="nav-item"><a href="#" class="nav-link">Libraries</a></li>
<li class="nav-item"><a href="#" class="nav-link">How to's</a></li>
<li class="nav-item"><a href="#" class="nav-link">Case studies</a></li>
<li class="nav-item"><a href="#" class="nav-link">Articles</a></li>
<li class="nav-item"><a href="#" class="nav-link">Events</a></li>
</ul>
</div>
</nav>
</header>



</main>

<!-- Boosted core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Include all compiled plugins bootstrap and boosted specific components (below), or include individual files as needed -->
<script src="../../dist/js/boosted.js"></script>
</body>
</html>

0 comments on commit f0d0357

Please sign in to comment.