Alert

Alerts can be used to show temporary messages (e.g. notifications about Pfister / HHI office closures). They are an extension of the default Bootstrap alert module.

Info

<div class="full-width alert alert--info alert-dismissible">
	<div class="alert__container">
		<div class="alert__kicker">Helpful Tip</div>
		<div class="alert__text">
			<div class="alert__kicker">Helpful Tip</div>
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Warning

<div class="full-width alert alert--warning alert-dismissible">
	<div class="alert__container">
		<div class="alert__kicker">Heads Up!</div>
		<div class="alert__text">
			<div class="alert__kicker">Heads Up!</div>
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Success

<div class="full-width alert alert--success alert-dismissible">
	<div class="alert__container">
		<div class="alert__kicker">Success!</div>
		<div class="alert__text">
			<div class="alert__kicker">Success!</div>
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Danger

<div class="full-width alert alert--danger alert-dismissible">
	<div class="alert__container">
		<div class="alert__kicker">Oh Snap!</div>
		<div class="alert__text">
			<div class="alert__kicker">Oh Snap!</div>
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Icon + Text

Info Alert with Icon

<div class="full-width alert alert--info alert-dismissible">
	<div class="alert__container">
		<div class="alert__icon"><i class="icon-info"></i></div>
		<div class="alert__text">
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Warning Alert with Icon

<div class="full-width alert alert--warning alert-dismissible">
	<div class="alert__container">
		<div class="alert__icon"><i class="icon-notification"></i></div>
		<div class="alert__text">
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Success Alert with Icon

<div class="full-width alert alert--success alert-dismissible">
	<div class="alert__container">
		<div class="alert__icon"><i class="icon-checkmark-outline"></i></div>
		<div class="alert__text">
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Danger Alert with Icon

<div class="full-width alert alert--danger alert-dismissible">
	<div class="alert__container">
		<div class="alert__icon"><i class="icon-warning1"></i></div>
		<div class="alert__text">
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Text Only

<div class="full-width alert alert--info alert-dismissible">
	<div class="alert__container">
		<div class="alert__text">
			In honor of the President’s Day Holiday, our offices will be closed Monday Feb. 19, 2018. We will resume operational hours on Tuesday Feb. 20, 2018 from 6:30am to 4:30pm PST.
		</div>
		<button class="alert__close js-close-alert"><i class="icon-close"></i></button>
	</div>
</div>

Sidebar

<div class="row d-md-flex">
	<div class="col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9 sidebar">
		<ul class="list-menu sidebar__menu">
			<li class="sidebar__item list-menu__heading sidebar__heading">Sidebar Menu</li>
			<li class="sidebar__item"><a href="#" class="sidebar__link">Page Link</a></li>
			<li class="sidebar__item"><a href="#" class="sidebar__link">Page Link</a></li>
			<li class="sidebar__item"><a href="#" class="sidebar__link state-active">Current Page</a></li>
			<li class="sidebar__item"><a href="#" class="sidebar__link">Page Link</a></li>
			<li class="sidebar__item"><a href="#" class="sidebar__link">Page Link</a></li>
			<li class="sidebar__item"><a href="#" class="sidebar__link">Page Link</a></li>
		</ul>
	</div>
	<div class="col-md-8 col-sm-push-4 col-lg-9 col-lg-push-3">
		<h2>Main Column Content</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto eaque et ex facere fugiat labore,
			laudantium maiores minima pariatur quae, quaerat, quas soluta tempora velit voluptates? Dolor labore officia
			provident!</p>
		<p>Eligendi facilis itaque voluptas! Deleniti non, placeat porro possimus praesentium veritatis voluptatibus.
			Aspernatur, blanditiis deserunt dicta eius excepturi fugit hic maiores porro quam, quibusdam quidem repellat
			tempora, totam voluptates voluptatibus!</p>
	</div>


</div>

Load Indicator

The loading indicator is used in places like product filtering and project filtering when there are actions taking place in the background, like an API POST or GET method. It is mostly used with Vue.js components

In the vue.js component there is typically a data property that will be set to true when the API request is made to cause the component to display, Ex: v-if="loadingResults". When the component receives the data back from the api in the return request this is set back to false causing the load indicator to disappear once complete.

<div class="load-indicator state-loading" v-if="loadingResults === true">
	<div class="load-indicator__indicator"></div>
	<span class="load-indicator__text">Loading</span>
</div>
<div class="load-indicator-cover" v-if="loadingResults === true"></div>

See More Expander

The see more expander helps conceal large portions of content for real estate space on the screen. When "See More" is clicked it will reveal everything that is concealed.

A data attribute on the container div data-max-height sets how tall you want the container before it cuts off. Please set in pixels, not in percentage.

<div class="see-more-expander js-see-more" data-max-height="200">
		<div class="see-more-expander__content">
			<div class="see-more-expander__content-wrap js-see-more-inner">
				(place content here)
			</div>
		</div>
		<a href="#" class="see-more-expander__link" data-title="@Html.GetString("WorkbenchProject.SeeMore")"></a>
	</div>