6 #components Components

Design components are reusable designs that can be applied using just the CSS class names specified in the component. These components require the cosmic theme to use.

6.1 #components.billboard Billboard

A billboard is a large content spotlight for marketing sites.

Example
Hero Envelope Title
Hero Envelope Body.
Call to Action
<div class="billboard ">
    <div class="billboard__container">
        <div class="billboard__photo">
            <img height="540" width="1440" class="media-element file-default" src="resources/sample-rect-med.jpg" alt="">
        </div>
        <div class="billboard__content">
            <div class="billboard__content__title">Hero Envelope Title</div>
            <div class="billboard__content__body">Hero Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
</div>

6.2 #components.button-photo Button Photos

Button photos are photos with a caption overlay that link to some content. These can be used for large button styles in a grid.

Examples
Default styling

Photo with a captioned overlayed on it that links to content.

A captioned photo button.
Here is the photo caption
.button-photo--noshade
A caption with no shade for dichromatic images.

Photo with a captioned overlayed on it that links to content.

A captioned photo button.
Here is the photo caption
.button-photo--bottom-gradient
A caption on the bottom of the photo with a gradient shade.

Photo with a captioned overlayed on it that links to content.

A captioned photo button.
Here is the photo caption
<p>Photo with a captioned overlayed on it that links to content.</p>

<figure style="width: 50%; max-width: 300px;">
  <figcaption>A captioned photo button.</figcaption>

  <a class="button-photo [modifier class]" href="/">
  	<span class="button-photo__photo"><img src="resources/sample-rect-med.jpg"></span>
  	<span class="button-photo__caption">Here is the photo caption</span>
  </a>

</figure>

6.3 #components.cta-button Call To Action Button

A button with a box around it for emphasized links and calls to action.

Examples
Default styling
:hover
Gentle green background transition.
<p>
  <a class="cta-button [modifier class]" href="https://uoregon.edu">Call to Action Button</a>
</p>

6.4 #components.envelopes Envelope

An envelope is a full-bleed rectangular content block.

Examples
Default styling

Envelope Title

Here is some content inside this envelope.

.envelope--standard
An envelope with standard top/bottom padding.

Envelope Title

Here is some content inside this envelope.

.envelope--narrow
An envelope with a small amount of top/bottom padding.

Envelope Title

Here is some content inside this envelope.

.envelope--flush
An envelope with no top/bottom padding.

Envelope Title

Here is some content inside this envelope.

.envelope--parallax
An envelope with a parallax background.

Envelope Title

Here is some content inside this envelope.

.envelope--style-black
An envelope with black background and white text.

Envelope Title

Here is some content inside this envelope.

<div class="envelope [modifier class]" style="background-image: url('resources/sample-background.png');">
  <h2>Envelope Title</h2>
  <p>Here is some content inside this envelope.</p>
</div>

6.4.1 #components.envelopes.feature Feature Envelope Text Left/Right

A feature envelope is a full-bleed rectangular content block with a flush photo on one side.

Examples
Default styling
Feature Envelope Title
Feature Envelope Text
Call to Action
.envelope-feature--text-left
A feature envelope with a photo on the right and text on the left.
Feature Envelope Title
Feature Envelope Text
Call to Action
.envelope-feature--text-right
A feature envelope with a photo on the left and text on the right.
Feature Envelope Title
Feature Envelope Text
Call to Action
<div class="envelope-feature [modifier class]" style="background-image: url('resources/sample-background.png');">
  <div class="envelope-feature__countainer">
      <div class="envelope-feature__photo"><img src="resources/envelope-feature-image.jpg" /></div>
      <div class="envelope-feature__content">
          <div class="envelope-feature__content__title">Feature Envelope Title</div>
          <div class="envelope-feature__content__body">Feature Envelope Text</div>
          <div class="cta-button">Call to Action</div>
      </div>
  </div>
</div>

6.4.2 #components.envelopes.feature-top Feature Envelope Text Top/Bottom

A feature envelope is a full-bleed rectangular content block with a flush photo as a tall background.

Examples
Default styling
Feature Envelope Title
Feature Envelope Text
Call to Action
.envelope-feature--text-top
A feature envelope with a photo background and text near the top.
Feature Envelope Title
Feature Envelope Text
Call to Action
.envelope-feature--text-bottom
A feature envelope with a photo background and text near the bottom.
Feature Envelope Title
Feature Envelope Text
Call to Action
<div class="envelope-feature [modifier class] context--foreground-light" style="background-image: url('resources/sample-background.png');">
  <div class="envelope-feature__countainer">
      <div class="envelope-feature__photo"><img src="resources/bg-gray-2.png" /></div>
      <div class="envelope-feature__content">
          <div class="envelope-feature__content__title">Feature Envelope Title</div>
          <div class="envelope-feature__content__body">Feature Envelope Text</div>
          <div class="cta-button">Call to Action</div>
      </div>
  </div>
</div>

6.4.3 #components.envelopes.hero Hero Envelope

A hero envelope is a large content spotlight in envelope format, replacing the old "feature" component.

Examples
Default styling
Hero Envelope Title
Hero Envelope Body.
Call to Action
.envelope-hero--text-left
A hero envelope with text on the left.
Hero Envelope Title
Hero Envelope Body.
Call to Action
.envelope-hero--text-right
A hero envelope with text on the right.
Hero Envelope Title
Hero Envelope Body.
Call to Action
.envelope-hero--shade
A hero envelope with shaded background instead of gradient.
Hero Envelope Title
Hero Envelope Body.
Call to Action
<div class="envelope-hero [modifier class]">
    <div class="envelope-hero__container">
        <div class="envelope-hero__photo">
            <img height="540" width="1440" class="media-element file-default" src="resources/sample-rect-med.jpg" alt="">
        </div>
        <div class="envelope-hero__content">
            <div class="envelope-hero__content__title">Hero Envelope Title</div>
            <div class="envelope-hero__content__body">Hero Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
</div>

6.4.4 #components.envelopes.stories Stories Envelope

A stories envelope contains two story blocks used to replace the use case for slideshows.

Example
Hero Envelope Title
Hero Envelope Body.
Call to Action
Hero Envelope Title
Hero Envelope Body.
Call to Action
<div class="envelope-stories ">
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img height="540" width="1440" class="media-element file-default" src="resources/envelope-stories-bg.jpg" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Hero Envelope Title</div>
            <div class="envelope-stories__body">Hero Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
    <div class="envelope-stories__story">
        <div class="envelope-stories__photo">
            <img height="540" width="1440" class="media-element file-default" src="resources/envelope-stories-bg.jpg" alt="">
        </div>
        <div class="envelope-stories__content">
            <div class="envelope-stories__title">Hero Envelope Title</div>
            <div class="envelope-stories__body">Hero Envelope Body.</div>
            <a class="cta-button">Call to Action</a>
        </div>
    </div>
</div>

6.4.5 #components.envelopes.summary Summary Envelope

A summary envelope is a full-bleed rectangular content block with a flush photo on one side (or as a tall background).

Example

This is a summary of this envelope page.

<div class="envelope-summary ">
  <p>This is a summary of this envelope page.</p>
</div>

6.5 #components.longform Longform Components

Longform components are used to add a unique visual style to longform stories.

Examples
Default styling
Longform Author
Longform Title
This is the longform summary paragraph.
.longform-heading--background
A black background variant of the longform heading.
Longform Author
Longform Title
This is the longform summary paragraph.
<div class="longform-heading [modifier class]">
  <div class="longform-heading__author">Longform Author</div>
  <div class="longform-heading__title">Longform Title</div>
  <div class="longform-heading__summary">This is the longform summary paragraph.</div>
</div>

6.5.2 #components.longform.layout Longform Layouts

Longform layouts allow an editor to provide different content widths for the unique content in a chunk of a longform story.

Examples
Default styling
Longform Author
Longform Title
This is the longform summary paragraph.
.longform-layout--content
A section that ends at the usual content boundary.
Longform Author
Longform Title
This is the longform summary paragraph.
.longform-layout--wide
A section that expands a bit past the usual content boundary.
Longform Author
Longform Title
This is the longform summary paragraph.
.longform-layout--fullbleed
A section that bleeds to the edge of the page.
Longform Author
Longform Title
This is the longform summary paragraph.
<div class="longform-heading [modifier class]">
  <div class="longform-heading__author">Longform Author</div>
  <div class="longform-heading__title">Longform Title</div>
  <div class="longform-heading__summary">This is the longform summary paragraph.</div>
</div>

6.5.3 #components.longform.pullquote Longform Pullquote

Longform pullquotes provide visual emphasis on a quote in a longform story.

Examples
Default styling

This is a pullquote for longform story content.

.longform-pullquote--left
Left floated pullquote.

This is a pullquote for longform story content.

.longform-pullquote--right
Right floated pullquote.

This is a pullquote for longform story content.

<div class="longform-pullquote [modifier class]">
  <p>This is a pullquote for longform story content.</p>
</div>

6.6.1 #components.navigation.navbar Navbar

A simple method to get navigation links to appear in one line.

<div id="navigation" class="navbar">
  <nav id="main-menu" role="navigation">
    <ul class="links clearfix">
      <li class="menu-1238 first"><a href="/news/academics-and-research" title="">Academics &amp; Research</a></li>
      <li class="menu-1240"><a href="/news/campus-news" title="">Campus News</a></li>
      <li class="menu-1242"><a href="/news/student-life" title="">Student Life</a></li>
      <li class="menu-1241"><a href="/news/workplace" title="">Workplace</a></li>
      <li class="menu-1247 last"><a href="http://uonews.uoregon.edu/journalists" title="">For Journalists</a></li>
    </ul>
  </nav>  
</div>

6.6.2 #components.navigation.pager Pager

Paged navigation is a list of page numbers when more than 1 page of content is available.

<ul class="pager ">
  <li class="pager__item">
    <a title="Go to first page" href="/admin/content">« first</a>
  </li>
  <li class="pager__item">
    <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 1" href="/admin/content">1</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 2" href="/admin/content?page=1">2</a>
  </li>
  <li class="pager__current-item">3</li>
  <li class="pager__item">
    <a title="Go to page 4" href="/admin/content?page=3">4</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 5" href="/admin/content?page=4">5</a>
  </li>
  <li class="pager__item">
    <a title="Go to next page" href="/admin/content?page=3">next ›</a>
  </li>
  <li class="pager__item">
    <a title="Go to last page" href="/admin/content?page=4">last »</a>
  </li>
</ul>
<ul class="tabs ">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>
<ul class="tabs--secondary">
  <li class="tabs--secondary__tab is-active"><a href="#" class="tabs--secondary__tab-link is-active">Content <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Display</a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Settings</a></li>
</ul>
<ul class="tabs ">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>
<ul class="tabs--secondary">
  <li class="tabs--secondary__tab is-active"><a href="#" class="tabs--secondary__tab-link is-active">Content <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Display</a></li>
  <li class="tabs--secondary__tab"><a href="#" class="tabs--secondary__tab-link">Settings</a></li>
</ul>

6.7 #components.sprites Sprites

Sprites provide images and iconography.

6.7.1 #components.sprites.share Share Links

Share links are buttons to share content on social media.

Example
<div class="service-links">
  <div class="service-links-facebook">Share on Facebook</div>
  <div class="service-links-twitter">Share on Twitter</div>
</div>

6.7.2 #components.sprites.socialicon Social Media Icons

Social media icons can be used for button links to social media accounts.

Example
<div class="socialicon-facebook">Facebook Link</div>
<div class="socialicon-twitter">Twitter Link</div>
<div class="socialicon-youtube">Youtube Link</div>
<div class="socialicon-instagram">instagram Link</div>
<div class="socialicon-linkedin">linkedin Link</div>
<div class="socialicon-flickr">Flickr Link</div>
<div class="socialicon-googleplus">Googleplus Link</div>
<div class="socialicon-pinterest">Pinterest Link</div>
<div class="socialicon-rss">RSS Link</div>
<div class="socialicon-email">Email Link</div>

6.8 #components.timeline Timeline

A timeline is a vertical arrangement of items that represent dates and deadlines.

Examples
Default styling

Four available styles:

  • White (timeline__card--white)
  • Blue (timeline__card--blue)
  • Orange (timeline__card--orange)
  • Green (timeline__card--green)

Cards are dynamically positioned to the left and right of the timeline.

  • Aug 1, 2017

    Card Title

    This is an example of a white timeline card. It features a date, title, and teaser text.

  • Aug 1, 2017

    Card Title

    This is an example of a white timeline card. It features a date, title, and teaser text.

.timeline--modifier
A different color variant.

Four available styles:

  • White (timeline__card--white)
  • Blue (timeline__card--blue)
  • Orange (timeline__card--orange)
  • Green (timeline__card--green)

Cards are dynamically positioned to the left and right of the timeline.

  • Aug 1, 2017

    Card Title

    This is an example of a white timeline card. It features a date, title, and teaser text.

  • Aug 1, 2017

    Card Title

    This is an example of a white timeline card. It features a date, title, and teaser text.

<p>Four available styles:</p>
<ul>
  <li>White (timeline__card--white)</li>
  <li>Blue (timeline__card--blue)</li>
  <li>Orange (timeline__card--orange)</li>
  <li>Green (timeline__card--green)</li>
</ul>
<p>Cards are dynamically positioned to the left and right of the timeline.</p>

  <ul class="timeline">
    <li class="timeline__list-item">
        <div class="timeline__indicator"><span class="timeline__icon"></span></div>     
        <div class="timeline__card timeline__card--blue">      
        <small class="timeline__subhead">Aug 1, 2017</small>
        <h4 class="timeline__title">Card Title</h4>   
        <div class="timeline__body">
          <p>This is an example of a white timeline card.  It features a date, title, and teaser text.</p>
        </div>
      </div>
    </li>
    <li class="timeline__list-item">
      <div class="timeline__indicator"><span class="timeline__icon"></span></div>       
      <div class="timeline__card timeline__card--green">  
        <small class="timeline__subhead">Aug 1, 2017</small>
        <h4 class="timeline__title">Card Title</h4>  
        <div class="timeline__body">
          <p>This is an example of a white timeline card.  It features a date, title, and teaser text.</p>
        </div>
      </div>
    </li>
  </ul>

6.9 #components.videos Videos

Video wrappers provide css code to make video embeds resize responsively. Inspired by https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Example
<div class="media-youtube-video media-youtube-1">
  <iframe class="media-youtube-player" width="560" height="340" title="On Display | The 2016 Graduate Research Forum" src="//www.youtube.com/embed/GjFAxwWEb9g?wmode=opaque&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen="">Video of On Display | The 2016 Graduate Research Forum</iframe>
</div>