5 #components-universal Universal Components

Universal design components are reusable designs that can be applied using just the CSS class names specified in the component. These components are available to any site using the Cosmic theme and/or the UOBanner module.

5.1 #components-universal.collapse-menu Collapse Menus

Collapse menus are unordered lists that collapse on mobile unless toggled. Collapse menus are used in the subfooter region on http://uoregon.edu

Examples
Default styling

A toggle-able menu which collapses on small screen sizes.

.collapse-menu--collapsed
The menu when it is collapsed (triggered by Javascript).

A toggle-able menu which collapses on small screen sizes.

<p>A toggle-able menu which collapses on small screen sizes.</p>

<figure style="width: 50%; max-width: 300px;">

	<div class="collapse-menu [modifier class]">
		<h3 class="collapse-menu__title">Campus Links</h3>
		<ul class="collapse-menu__list">
			<li class="collapse-menu__item"><a href="http://around.uoregon.edu/">News</a> <span class="low-priority">|</span> <a href="http://calendar.uoregon.edu/">Events</a></li>
			<li class="collapse-menu__item"><a href="//uoregon.edu/maps">Maps</a> <span class="low-priority">|</span> <a href="//uoregon.edu/directions">Directions</a></li>
			<li class="collapse-menu__item"><a href="//uoregon.edu/azindex">A–Z Index</a></li>
			<li class="collapse-menu__item"><a href="//uoregon.edu/findpeople">Find People</a></li>
		</ul>
	</div>

</figure>

5.2 #components-universal.feature Content Cards

Content cards are self contained chunks of content. Cards can support many different elements such as titles, subheads, teasers, images. Examples of this can be seen on the homepage of Around the O: http://around.uoregon.edu/

Examples
Default styling

A card with a photo, title, and subhead used for a story listing for a news article.

A story listing card.
February 15

Bio student first at UO to win Gates Cambridge Scholarship

.card--large
A wider display of the card, usually used on full page listings.

A card with a photo, title, and subhead used for a story listing for a news article.

A story listing card.
February 15

Bio student first at UO to win Gates Cambridge Scholarship

<p>A card with a photo, title, and subhead used for a story listing for a news article.</p>

<figure style="width: 50%; max-width: 300px;">
  <figcaption>A story listing card.</figcaption>

  <div class="card [modifier class]">
  	<div class="card__photo"><img src="resources/sample-rect-med.jpg"></div>
  	<div class="card__subhead">February 15</div>
  	<h4 class="card__title">Bio student first at UO to win Gates Cambridge Scholarship</h4>
  </div>

</figure>

5.3 #components-universal.grid Grids

A responsive grid system for website content defined entirely by classes. These grids will be up to the defined number of columns wide, but will reduce to less columns in smaller spaces to fit the content comfortably. These Grids will automatically fill all available space with the grid-item subelements.

Examples
Default styling
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--2col
A 2 column Grid
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--3col
A 3 column Grid
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--4col
A 4 column Grid
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--5col
A 5 column Grid
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--2col-40-60
A 2 column grid split 40%/60%
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--2col-60-40
A 2 column grid split 60%/40%
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--flush
A grid where all grid-items are flush with each other
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
.grid--strict
A grid that will never allow larger items on incomplete rows
First Grid Item
Second Grid Item
Third Grid Item
Fourth Grid Item
Fifth Grid Item
<figure style="width: 100%; max-width: 1024px;">
  	<div class="grid [modifier class]">
	  <div class="grid__item"><div style="background:lightgreen; width: 100%; height: 75px;">First Grid Item</div></div>
	  <div class="grid__item"><div style="background:lightgreen; width: 100%; height: 75px;">Second Grid Item</div></div>
	  <div class="grid__item"><div style="background:lightgreen; width: 100%; height: 75px;">Third Grid Item</div></div>
	  <div class="grid__item"><div style="background:lightgreen; width: 100%; height: 75px;">Fourth Grid Item</div></div>
	  <div class="grid__item"><div style="background:lightgreen; width: 100%; height: 75px;">Fifth Grid Item</div></div>
	</div>
</figure>

5.4 #components-universal.hide Hide Toggles

Hide toggles are used to hide elements under certain situations (mobile phones, etc.).

Examples
Default styling
This text will only display under certain circumstances.
.hide--mobile
Objects hidden on mobile.
This text will only display under certain circumstances.
.hide--tablet
Objects hidden on tablets.
This text will only display under certain circumstances.
.hide--desktop
Objects hidden on desktop.
This text will only display under certain circumstances.
<div class="hide [modifier class]">This text will only display under certain circumstances.</div>

5.5 #components-universal.listing Listings

A listing is a list of items with a photo and text, such as a list of articles or profiles.

Examples
Default styling
This is the listing title.
This is the listing subhead.
This is the listing teaser.
.listing--photo-left
A listing with the photo on the left
This is the listing title.
This is the listing subhead.
This is the listing teaser.
.listing--photo-right
A listing with the photo on the right
This is the listing title.
This is the listing subhead.
This is the listing teaser.
<figure style="width: 100%; max-width: 1024px;">
  <div class="listing [modifier class]">
    <div class="listing__row">
      <div class="listing__photo">
        <img src="resources/sample-rect-med.jpg" />
      </div>
      <div class="listing__content">
        <div class="listing__title">This is the listing title.</div>
        <div class="listing__subhead">This is the listing subhead.</div>
        <div class="listing__teaser">This is the listing teaser.</div>
      </div>
    </div>
  </div>
</figure>

5.6 #components-universal.section-header Section Headers

Section headers are linkable bars at the top of a section of content which describes the content and provides a link to more of that type of content.

Examples
Default styling
.section-header--green
A green section header (default).
.section-header--gold
A gold section header.
.section-header--brown
A brown section header.
.section-header--blue
A blue section header.
.section-header--teal
A teal section header.
<a class="section-header [modifier class]" href="/news/academics-and-research/">
  <h2 class="section-header__title">Academics &amp; Research</h2>
  <span class="section-header__link">All Stories</span>
</a>

5.7 #components-universal.hamburger-menu Hamburger Menu Functionality

The hamburger menu button and sidebar handle the main navigation on small screens where a horizontal navbar would be too large.