Toggle Accessibility Tools

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.

Accordion

Description

The accordion is a collapsible container which allows the user to show and hide content. The collapsible functionality is useful for displaying long chunks of content without overwhelming the user.

The accordion features include: expandable buttons with primary color background and white text; collapsible section titles with primary color font-color; dividers between accordion sections. See the example below:

Section 1

This is the first section

Section 2

You could include any type of content within an accordion, including tables, images, etc.

Solar panels on an evening

 

Markup

The accordion is a progressive web component, designed for accessible use. It requires very little markup to write, which facilitates editing. The markup applies to one accordion section. You can string multiple accordion sections together. Each accordion section requires the following markup:

  • <prl-accordion-section>: this component should wrap all the accordion content.
  • <h2>: this is the section title. Make sure to include an id attribute for accessibile browsing.
  • Content: this includes tables, text, images, etc. This content is what is hidden or shown.

Warning: due to the way Mura's CKEditor works, only edit accordion markup in the back-end. Any inline editing will break the accordion component. Markup follows:

<!-- Accordion -->    
<prl-accordion-section>
  <h2 id="section-title">Section Title</h2>
  <p>Content goes here. Doesn't have to be <p>. Can be text, images, etc.</p>
</prl-accordion-section>

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

See the example on the bottom right of 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, thanks to a jQuery scroll effect.

<!-- Back To Top Button -->
<div><a class="prl-back-to-top-btn" href="#"><span class="fa fa-chevron-circle-up" role="button"></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 below: 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).

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

DOE Funding Support / Acknowledgments Tag

Use this at the end of news stories that are funded by the DOE-BES grant. Alternatively, the content could be modified to acknowledge other grant sources or scientific collaborators. 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

    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="prl-figure-container">
      <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

    College of Natural Sciences layouts formats

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

    Custom web layouts

    The research, news, faculty, staff, and events pages are designed with custom layouts. The pages are styled with CSS (included in the prlCustomCSS file that loads on the website) and some internal content is displayed through custom components in Mura.

    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>

    Tooltips

    The following is an icon with a tooltip that expands on mouse hover or keyboard focus.

    <!-- Tooltip  -->
    <span aria-describedby class="prl-tooltip" role="tooltip" tabindex="0">
        <!-- The icon -->
        <i aria-hidden="true" class="fa fa-info"> </i>
        <!-- The id value below links to the parent's aria-describedby attribute
        value. Both values are generated automatically through a JS script -->
        <span aria-hidden="true" class="prl-tooltip-info" id>
          <strong>Word</strong> This space is reserved for the word definition.
          The definition can be quite long and the tooltip adjusts its
          size accordingly.
        </span>
    </span>

    A tooltip can alternatively extend from right to left, like so:

    <!-- Tooltip From Right Side  -->
    <span aria-describedby class="prl-tooltip" role="tooltip" tabindex="0">
        <i aria-hidden="true" class="fa fa-smile-o"> </i>
        <!-- Add extra prl-tooltip-info-right class -->
        <span aria-hidden="true" class="prl-tooltip-info prl-tooltip-info-right" id>
          This tooltip goes the other way, starting from right to left.
        </span>
    </span>

    Usage considerations

    Tooltips are useful to display additional content that is optional for the user to see and which might otherwise clutter that user's web experience if included in the main body. Examples of appropriate tooltip usage include: secondary address information or word definitions in news stories.

    The tooltip icons derive from the College of Natural Sciences custom icon font (see Fonticon section on this page). It is recommended to wrap the icons in a HTML <i> tag. Although not the best semantic use of the <i> tag, it is preferrable to the <span> tag which is prone to be deleted by Mura's WYSIWYG if the wrapped content is left empty.

    Tooltip content displays as white text against a background of primary PRL color. Tooltips are accessible to screen readers and keyboard navigation.

    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 lighter for elegance, with light grey text.

    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="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>