Web Components Demo

Introduction

Below are some of the more used custom components on the PRL website, with markup and instructions. All components below exist as individual components in the Mura back-end "Components" section. These can be inserted and further edited on any website page.

Bullet points

In addition to regular bulleted lists, the stylized option offers more space and contrast around the bulleted material.

  • Unordered List - Bullet 1
  • Bullet 2
  • Bullet 3
<!-- Stylized Unordered List -->    
<div class="prl-bulletpoint-fancy">
  <ul>
    <li>Unordered List - Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
  </ul>
</div>
  1. Ordered List - Bullet 1
  2. Bullet 2
  3. Bullet 3
<!-- Stylized Ordered List -->    
<div class="prl-bulletpoint-fancy">
  <ol>
    <li>Ordered List - Bullet 1</li>
    <li>Bullet 2</li>
    <li>Bullet 3</li>
  </ol>
</div>

Buttons

Buttons trigger a reaction on press.

Use active verbs for button language, such as:

  • "Find Out More"
  • "View All Events"
  • "Apply Here"

Don't use passive language, such as:

  • "More"
  • "More Information"
  • "Events."

Primary button

The main PRL button, which fills with color on hover and press.

<!-- Raised Button -->
<div>
  <a class="prl-btn" href="#">Find Out More</a>
</div>

Secondary arrow button

The secondary button includes an arrow animation on hover to indicate a link.

Find Out More

<!-- Button With Animated Arrow -->
<div>
  <a class="prl-arrow-btn" href="#">Find Out More</a>
</div>

Tertiary flat button

The flat button is primarily used in cards. Although it can be used on its own, the secondary button, with arrow animation, is a better visual indicator for links.

<!-- Flat Button -->
<div>
  <a class="prl-flat-btn" href="#">Find Out More</a>
</div>

Back to top button

Shrink the browser window to see an example on this page. The button consists of a "chevron circle up" fonticon, uses the secondary PRL red color, and is set on the bottom right corner of mobile and tablet screens only. On press, the user is redirected to the top of the page, with an added jQuery scroll effect.

<!-- Back To Top Button -->
<div><a class="prl-back-to-top-btn" href="#"><span class="fa fa-chevron-circle-up">&nbsp;</span><span class="sr-only">Chevron circle up</span></a></div>

Cards

Cards are entry points to more detailed information. They may contain a photo, text, and a link about a single subject. Cards can be used alone or in a collection (see News page). Use cards to display content that:

  • Comprises multiple data types, like images, movies, and text
  • Does not require direct comparison (users don't compare the images or text)
  • Contains interactive content, such as one or more buttons

Don't:

  • Overload cards with too many actions or extraneous information
  • Include inline links

Design and code resources

The card examples below contain code snippets, but for access to cleaner code, use these options:


Image sources for examples: Cyanobacteria bloom by brewbooks from near Seattle, USA (Grand Prismatic Spring) CC BY-SA 2.0, via Wikimedia Commons; Solar panel: Pexels, CC0 Creative Commons

Basic card

Cyanobacteria bloom by a hot spring

Card Title

The information falls here. Be brief and avoid extraneous information.

<!-- Basic Card -->
<div class="prl-card">
  <!-- Image -->
  <div class="prl-card-image">
    <img alt="" src="" />
  </div>
  <!-- Content -->
  <div class="prl-card-body">
    <h3>Card Title</h3>
    <p>The information falls here. Be brief and avoid extraneous information.</p>
  </div>
  <!-- Buttons -->
  <div class="prl-card-readmore-btns">
    <a class="prl-flat-btn" href="#">Action 1</a>
    <a class="prl-flat-btn" href="#">Action 2</a>
  </div>
</div>

Without image

Card Title

The information falls here. Be brief and avoid extraneous information.

<!-- Basic Card Without Image -->
<div class="prl-card">
  <!-- Content -->
  <div class="prl-card-body">
    <h3>Card Title</h3>
    <p>The information falls here. Be brief and avoid extraneous information.</p>
  </div>
  <!-- Buttons -->
  <div class="prl-card-readmore-btns">
    <a class="prl-flat-btn" href="#">Action 1</a>
    <a class="prl-flat-btn" href="#">Action 2</a>
  </div>
</div>

With bottom border

Card With Bottom Border

The information falls here. Be brief and avoid extraneous information.

Solar panels on an evening

Card With Bottom Border

The information falls here. Be brief and avoid extraneous information.

<!-- Card Without Image and With Bottom Border -->
<div class="prl-card-w-border">
  <!-- Content -->
  <div class="prl-card-body">
    <h3>Card With Bottom Border</h3>
    <p>The information falls here. Be brief and avoid extraneous information.</p>
  </div>
  <!-- Buttons -->
  <div class="prl-card-readmore-btns">
    <a class="prl-flat-btn" href="#">Action 1</a>
    <a class="prl-flat-btn" href="#">Action 2</a>
  </div>
</div>

<!-- Card with Image and Bottom Border -->
<div class="prl-card-w-border">
  <!-- Image -->
  <div class="prl-card-image">
    <img alt="" src="" />
  </div>
  <!-- Content -->
  <div class="prl-card-body">
    <h3>Card With Bottom Border</h3>
    <p>The information falls here. Be brief and avoid extraneous information.</p>
  </div>
  <!-- Buttons -->
  <div class="prl-card-readmore-btns">
    <a class="prl-flat-btn" href="#">Action 1</a>
    <a class="prl-flat-btn" href="#">Action 2</a>
  </div>
</div>

Title overlaying image

Solar panels on an evening

Card Title

The information falls here. Be brief and avoid extraneous information.

<!-- Card With Image and Title Overlay -->
<div class="prl-card">
    <!-- Image-->
  <div class="prl-card-image">
    <img alt="" src="">
    <!-- Title Overlay -->
    <div class="prl-card-image-overlay">
      <h3>Card Title</h3>
    </div>
  </div>
  <!-- Content -->
  <div class="prl-card-body">
    <p>The information falls here. Be brief and avoid extraneous information.</p>
  </div>
  <!-- Buttons -->
  <div class="prl-card-readmore-btns">
    <a class="prl-flat-btn" href="#">Action 1</a>
    <a class="prl-flat-btn" href="#">Action 2</a>
  </div>
</div>

Title overlay and hover effect

Hover effects indicate the presence of a links on cards that do not include visible action buttons. Usage examples include "Related Content" in news articles (See example).
 
Cyanobacteria bloom by a hot spring

Card Title

Optional text can go here too

Cyanobacteria bloom by a hot spring

Card Title

Related Story: This is the summary of the story

<!-- Card With Image and Text Overlay -->
<div class="prl-card-hover-effect">
  <div class="prl-card-image-only">
  <!-- Image-->
  <img alt="" src="">
    <!-- Text Overlay -->
    <div class="prl-card-image-no-summary-overlay">
      <h3>Card Title</h3>
      <p>Optional text can go here too</p>
    </div>
  </div>
  <!-- Link Area -->
  <div class="prl-readmore-fill-container">
    <a href="#">Action 1</a>
  </div>
</div>

<!-- Card With Image, Title Overlay, and Content -->
<div class="prl-card-hover-effect">
  <div class="prl-card-image">
  <!-- Image-->
  <img alt="" src="">
    <!-- Title Overlay -->
    <div class="prl-card-image-overlay">
      <h3>Card Title</h3>
    </div>
  </div>
  <!-- Content -->
  <div class="prl-card-body">
    <p> Related Story: This is the summary of the story </p>
  </div>
  <!-- Link Area -->
  <div class="prl-readmore-fill-container">
    <a href="#">Action 1</a>
  </div>
</div>

Small borderless card

The card takes minimal space and is useful as "Related Content" in news stories (See example). Recommended bootstrap grid definition is "col-sm-6 col-xs-12" class with a "pull-right" class.

Solar panels on an evening
<!-- Small Borderless Card -->
<div class="col-sm-6 col-xs-12 prl-relcontent-body-small pull-right">
<img alt="" src="">
  <!-- Text Area -->
  <div class="prl-relcontent-body-small-link">
    <h3>Card Title</h3>
    <p>Link here.</p>
  </div>
</div>

DOE-BES Funding Acknowledgment

Use this at the end of news stories that are funded by the DOE grant. See News section for usage examples


This work was primarily funded by the US Department of Energy, Office of Basic Energy Sciences.

<!-- Content - DOE-BES Support Tag -->
<hr />
<p class="prl-news-support-tag"><small>This work was primarily funded by the
<a href="https://science.energy.gov/bes/csgb/research-areas/photochemistry-and-biochemistry/">US Department of Energy, Office of Basic Energy Sciences</a>.</small></p>

Faculty & Staff Contact Components

Refer to the brand manual for instructions on adding components found under the "People" folder of the components section in the Mura back-end

Fonticons

Pre-designed icons are useful visual representations that load faster than traditional images. The PRL uses a custom icon font called natsci-icon-font, based on Font Awesome, that has over 300 icons to choose from that span many use scenarios. Icon size, rotation, and other effects can be controlled.

How to use

Fonticons are inserted in the HTML editor. For more, see:

Fonticon Examples

Map Marker:   Map marker

Envelope (2x original size):   Envelope

Spartan Shield (2x original size):  Spartan Shield

Spartan Helmet (4x original size):  Spartan Helmet

    Popover

    This component is used mostly for hover definitions in news stories. Insert the following code at the top of relevant pages. See the brand manual for how to add hover definitions in stories. Popovers will display as a link with an 'expand' fonticon preceding it to indicate it is a popover.

    <!-- Content - Popover -->

    Images

    blank image
    The first line is the caption. Custom CSS will style this.
    By [Name of owner, in italics, with link to original.] Indicate CC0, Public Domain, with link to license.
    <!--Content - Image -->
    <div class="mx-auto d-block mw-100 text-center">
    <!-- 1) could add .row if wanted 2) Using Bootstrap 4 classes to center image-->
      <figure class="prl-figure">
        <img alt="" height="538" src="/sites/_prl/assets/Image/placeholder-              callout-555x365.jpg" width="818" />
        <figcaption>The first line is the caption. Custom CSS will style this.
        <br/>
        <em>By [Name of owner, in italics, with link to original.] Indicate CC0,          Public Domain, with link to license. </em></figcaption>
      </figure>
    </div>

    Layout

    Bootstrap grid system

    The College of Natural Sciences theme uses the Bootstrap grid system that divides the page up into 12 columns across the page. Columns can be combined in various combinations that add up to a total of 12 per row. In the example below, the first row combines twelve 1-column-width columns, the second combines three 4-column-width columns, while the last has a single 12-column-width column.

      Bootstrap grid examples

      How to use bootstrap grid

      Check out the following resources:

      College of Natural Sciences additional layouts

      The CNS theme includes a number of page layouts housed within Mura.

      Custom web layouts

      The research, news, faculty, staff, and events pages have custom layouts. Those are created through Mura components and styled with CSS automatically when added. Contact the PRL communications office for Instructions on how to add these components.

      Narrow container

      The narrow container limits the line length to approximately 65-75 characters per line for an accessible online reading experience. This is ideal for news articles. An example (italics added for contrast):

      When photosynthetic organisms have enough resources to grow – nutrients, the right temperature, enough water – photosynthesis hums along and they thrive.

      But during difficult times – say, nutrients are scarce, or the environment is too cold or dry – neither can the organisms grow nor can they hide from the hostile environment.

      In those cases, they must dial back photosynthesis until the stress blows over. This ability to change the rates of photosynthesis is a matter of life and death. Without it, the organisms produce bad toxins that inflict self-harm that can be fatal.

      <!--Custom Narrow Container -->
      <div class="prl-narrow-container">
        <p>Content goes in here</p>
      </div>

      Typography

      Custom <h2>

      h2 for Primary Pages

      Larger, thinner, capitalized, and uses primary color; used on primary pages for contrast. For examples, see Homepage or About Page.

      <!--Title Page h2  -->
      <h2 class="prl-h2-alternate"> H2 tag </h2>

      h2 for Inner Splash Page

      Default h2 with an added upper margin; used on secondary 'splash' pages, for spacing between blocks of content. For examples, see Research Projects, Graduate Program Overview, and Center for Advanced Algal and Plant Phenotyping pages.

      <!--Inner Page h2  -->
      <h2 class="prl-h2-secondary-spacing"> H2 tag </h2>

      Custom <p>

      Lead <p> for Primary Pages

      Acts as a lead paragraph, with larger font and light grey color. Used for contrast. For examples, see Homepage or About Page.

      <!--Custom p Tag -->
      <h2 class="prl-p-subheader"> Paragraph tag </h2>

      Lead <p> for Secondary Splash Pages

      Acts as a lead paragraph, with larger font and light grey color. Smaller than the lead paragraph styling for Primary Pages. For examples, see Seminars & Events, Graduate Program Overview, Research Areas, etc.

      <!--Custom p Tag -->
      <h2 class="prl-p-subheader-smaller"> Paragraph tag </h2>

      Wells

      Wells are an effective way of highlighting content by adding an inset to it.

      Default well

      This is some text in a well.

      <!-- Well -->
      <div class="well">
        <p>This is some text in a well.</p>
      </div>

      Custom well

      The custom well is slightly darker for elegance, and it has no hover effect.

      This is some text in a prl well.

      <!-- Custom Well -->
      <div class="prl-well">
        <p>This is some text in a prl well.</p>
      </div>

      Informational well with card

      Use this component to nest one or multiple cards in a well. In this case, the well is used to delineate and highlight the card content. See an example here.

      Tracking light wavelength quality

      Cyanos sink or float in water to position themselves favorably in their environments, and the surrounding light quality varies with depth.
      For example, on the surface, cyanos are exposed to rich amounts of red light. As they sink deeper, red light grows scarcer while green light remains abundant. Cyanos constantly track light quality and adjust themselves to capture the most available wavelength at any time

      <!-- Content - Informational Well Section with Cards -->
      <div class="col-md-10 col-md-offset-1 prl-well">
       
      <div class="prl-card-w-border">
         
      <div class="prl-card-body">
         
      <h3>Tracking light wavelength quality</h3>
          
      <p>Cyanos sink or float in water to position themselves favorably in          their environments, and the surrounding light quality varies with              depth.<br />For example, on the surface, cyanos are exposed to rich            amounts of red light. As they sink deeper, red light grows scarcer            while green light remains abundant. Cyanos constantly track light              quality and <a href="https://prl.natsci.msu.edu/news-                          events/news/montgomery-publishes-on-light-harvesting-                          efficiency/">adjust themselves to capture the most available                  wavelength at any time</a>.&nbsp;<br />
        </div>
      </div>