<div class="bux-mar-tb-sp-32">
<h1> Microinteraction demo </h1>
</div>
<h2>Menu Hover Effects </h2>
<div class="bux-mar-tb-sp-48">
<div class="bux-menu-wrapper">
<div class="bux-container bux-grid bux-container__menu ">
<nav id="bux-main-menu" aria-label="Main Navigation" class="disclosure-nav disclosure-nav-orientation-horizontal">
<ul class="bux-menu">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link bux-menu__link--active disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Level 1 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
bux-menu__link--active disclosure-nav-item-with-submenu mobile-depth-cutoff">
Level 2 Link
</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed
mobile-visible">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link bux-menu__link--active">Level 3 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 4 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 5 Link</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 5 Link</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 4 Link</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 3 Link</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Level 1 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 1 Link</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Level 1 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 1 Link</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="bux-mar-top-sp-48">
<h2> Button Hover Effect</h2>
</div>
<div class="bux-mar-tb-sp-16">
<button class="bux-button">
Primary
</button>
</div>
<div class="bux-mar-top-sp-48">
<h2> Card Hover Effects</h2>
</div>
<div class="bux-grid bux-mar-tb-sp-16">
<div class="bux-grid__cell">
<div class="bux-card " role="group" aria-label="Card">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />
<div class="bux-card__content">
<h3 class="bux-card__heading">
<span>Card Heading</span>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="bux-card__cta">
<a href="#">
<span>Call to Action</span>
</a>
</div>
</div>
</div>
</div>
<div class="bux-grid__cell">
<div class="bux-card bux-card--linked-headline" role="group" aria-label="Card">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />
<div class="bux-card__content">
<h3 class="bux-card__heading">
<a href="#" class="bux-card__heading--link">
<span>Card Heading</span>
</a>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="bux-grid__cell">
<div class="bux-card bux-card--storytelling" role="group" aria-label="Card">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />
<div class="bux-card__content">
<span class="bux-card__taxonomy">
Optional Taxonomy
</span>
<h3 class="bux-card__heading">
<a href="#" class="bux-card__heading--storytelling-link">
<span>Card Heading</span>
</a>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<span class="bux-card__read-time">3-minute read</span>
</div>
</div>
</div>
</div>
<div class="bux-grid bux-mar-tb-sp-16">
<div class="bux-grid__cell">
<div class="bux-card bux-card--gray" role="group" aria-label="Card">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />
<div class="bux-card__content">
<h3 class="bux-card__heading">
<span>Card Heading</span>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="bux-card__cta">
<a href="#">
<span>Call to Action</span>
</a>
</div>
</div>
</div>
</div>
<div class="bux-grid__cell">
</div>
<div class="bux-grid__cell">
</div>
</div>
<div class="bux-mar-tb-sp-32">
<h1> Microinteraction demo </h1>
</div>
<h2>Menu Hover Effects </h2>
<div class="bux-mar-tb-sp-48">
{% render '@menu' %}
</div>
<div class="bux-mar-top-sp-48">
<h2> Button Hover Effect</h2>
</div>
<div class="bux-mar-tb-sp-16">
{% render '@button' %}
</div>
<div class="bux-mar-top-sp-48">
<h2> Card Hover Effects</h2>
</div>
<div class="bux-grid bux-mar-tb-sp-16">
<div class="bux-grid__cell">
{% render '@card' %}
</div>
<div class="bux-grid__cell">
{% render '@card--linked-headline' %}
</div>
<div class="bux-grid__cell">
{% render '@card--storytelling' %}
</div>
</div>
<div class="bux-grid bux-mar-tb-sp-16">
<div class="bux-grid__cell">
{% render '@card--gray' %}
</div>
<div class="bux-grid__cell">
</div>
<div class="bux-grid__cell">
</div>
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
No notes defined.