Material Design for Bootstrap v5 & v4
Mosaic UI is based off of Mdbootstrap, a CSS & JS framework based on Material Design
Mosaic-CSS CDN links
<link rel="stylesheet" href="https://mosaic-cdn.sovos.com/css/mosaic.min.css" />
<script src="https://mosaic-cdn.sovos.com/css/mosaic-css.min.js" defer />
Required Google fonts
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
rel="stylesheet"
/>
Basic page layout
<a class="skip-to-content-link" href="#main-content"> Skip to content</a>
<div class="layout">
<nav aria-label="Primary" class="nav">
<div class="nav-content">
<header class="nav-header">
<div class="logo-and-product-container">
<div class="logo-and-product">
<a id="logo-container" href="./index.html">
<div class="nav-branding-logo"></div>
</a>
<p class="product-name">Product Name</p>
</div>
<div class="product-switcher">
<button
class="
btn
product-switcher-button
tooltipped
dropdown-trigger
cover-trigger
"
tabindex="0"
type="button"
aria-label="Product switcher"
data-testid="product-switcher-button"
data-position="bottom"
data-tooltip="Product switcher"
data-target="switcher-dropdown"
>
Product Switcher
</button>
<!-- Dropdown Structure -->
<ul id="switcher-dropdown" class="dropdown-content">
<li><a href="#!">Global Compliance</a></li>
<li><a href="#!">TIR Enterprise</a></li>
</ul>
</div>
</div>
<!-- /.logoAndProductContainer -->
</header>
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-links-item" aria-current="page">
<a href="./index.html" class="nav-links-link">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
</ul>
</div>
<footer class="nav-footer">
<button
aria-label="Your Account"
class="
icon-btn icon-btn__light
nav-footer__userButton
tooltipped
dropdown-trigger
"
type="button"
data-position="top"
data-target="account-dropdown"
data-tooltip="Your Account"
>
<i class="material-icons">account_circle</i>
</button>
<ul id="account-dropdown" class="dropdown-content">
<li><a href="#!">My Account</a></li>
<li><a href="#!">Preferences</a></li>
<li><a href="#!">Log Out</a></li>
</ul>
<button
aria-label="Settings"
class="
icon-btn icon-btn__light
nav-footer__settingsButton
tooltipped
"
type="button"
data-position="top"
data-tooltip="Settings"
>
<i class="material-icons">settings</i>
</button>
<button
aria-label="Help"
class="
icon-btn icon-btn__light
nav-footer__helpButton
tooltipped
"
type="button"
data-position="top"
data-tooltip="Help"
>
<i class="material-icons">help</i>
</button>
</footer>
</div>
<!-- /.sovosNavContent -->
</nav>
<header class="page-header">
<div class="title-bar">
<nav class="breadcrumbs" aria-label="breadcrumb">
<ol class="breadcrumbs-list">
<li class="breadcrumbs-list-item">
<a href="./">Home Page</a>
</li>
<li class="breadcrumbs-list-item">
<a href="./">Current Page</a>
</li>
</ol>
</nav>
<div class="titleRow">
<h1 class="titleRowTitle h4" role="heading">
Page Title
<button
aria-label="Edit Title"
class="icon-btn"
type="button"
>
<i class="material-icons">edit</i>
</button>
</h1>
<div class="btn-group title-bar-actions">
<button
aria-label="Action Menu"
class="icon-btn sovosIconMenu dropdown-trigger"
type="button"
data-target="titlebarActionMenu"
>
<i class="material-icons">more_vert</i>
</button>
<ul id="titlebarActionMenu" class="dropdown-content">
<li><a href="#!">Refresh</a></li>
<li><a href="#!">Help</a></li>
<li><a href="#!">Sign Out</a></li>
</ul>
<button
class="btn waves-effect waves-light"
tabindex="0"
type="button"
>
Action
</button>
</div>
</div>
</div>
<div class="hero-banner">
<div class="hero-banner-left-column">
<h2 class="hero-banner-title">Banner Title</h2>
<h6 class="hero-banner-subtitle">
Hero Banner Subtitle
</h6>
</div>
</div>
</header>
<main tabindex="-1" class="main-content" id="main-content">
<div class="content-container">
<section>
<h3>Example Title</h3>
<p>Content Goes here</p>
</section>
</div>
<!-- /.content-container -->
</main>
</div>
<!-- /.layout -->