<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">Item 1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
disclosure-nav-item-with-submenu mobile-depth-cutoff">
Item 1.1
</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed
mobile-visible">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 1.2
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 1.3
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 1.4
</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">Item 2</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.1
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.2
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.3
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.4
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 3</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Item 4</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.1
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.2
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.3
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.4
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 5</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 ">
<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=" " />
<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">
<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=" " />
<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">
<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=" " />
<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">
<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=" " />
<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.