1 #components Components

Styles for chunks of content

1.1 #components.accordion Accordion

A collapsible accordion element.

Module: accordion_set
Paragraphs
Panels
Views

Example
Accordion title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Quis est tam dissimile homini. Teneo, inquit, finem illi videri nihil dolere.

Accordion title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Quis est tam dissimile homini. Teneo, inquit, finem illi videri nihil dolere.

Accordion title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Quis est tam dissimile homini. Teneo, inquit, finem illi videri nihil dolere.

<div class="accordion-container clearfix">
    <div class="accordion-toggle" tabindex="0">
        <span>Accordion title goes here</span> <svg class="f6 icon icon-arrow-right4"><use xlink:href="/sites/all/modules/custom/oswego_icons/symbol-defs.svg#icon-arrow-right4"></use></svg></div>
    <div class="accordion-content padding-top-2">
        <div class="container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Quis est tam dissimile homini. Teneo, inquit, finem illi videri nihil dolere.</p>
        </div>
    </div>
</div>
<div class="accordion-container clearfix">
    <div class="accordion-toggle" tabindex="0">
        <span>Accordion title goes here</span> <svg class="f6 icon icon-arrow-right4"><use xlink:href="/sites/all/modules/custom/oswego_icons/symbol-defs.svg#icon-arrow-right4"></use></svg></div>
    <div class="accordion-content padding-top-2">
        <div class="container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Quis est tam dissimile homini. Teneo, inquit, finem illi videri nihil dolere.</p>
        </div>
    </div>
</div>
<div class="accordion-container clearfix">
    <div class="accordion-toggle" tabindex="0">
        <span>Accordion title goes here</span> <svg class="f6 icon icon-arrow-right4"><use xlink:href="/sites/all/modules/custom/oswego_icons/symbol-defs.svg#icon-arrow-right4"></use></svg></div>
    <div class="accordion-content padding-top-2">
        <div class="container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Quis est tam dissimile homini. Teneo, inquit, finem illi videri nihil dolere.</p>
        </div>
    </div>
</div>

1.2 #components.button-row Button row

Useful for displaying up to 4 buttons.

Example
Early Action Regular Decision International Transfer 
<div class="button-row buttons-4">
    <a href="https://www.oswego.edu/admissions/freshman-apply" class="button btn-white">Early Action </a>
    <a href="https://www.oswego.edu/admissions/freshman-apply" class="button btn-white">Regular Decision </a>
    <a href="https://www.oswego.edu/admissions/international-student-admission" class="button btn-white">International </a>
    <a href="https://www.oswego.edu/admissions/transfer-admissions" class="button btn-white">Transfer </a>
</div>

1.3 #components.buttons Buttons

Call to Action buttons should be defined as either a primary or secondary buttons. In a given page or section, there should be only one primary call to action. This acts as a visual cue to the user, adding emphasis to the single most important action on the page.

There may be multiple secondary calls to action. It’s best practice to never have more than three buttons on a single page.

Links or link lists may be used as tertiary calls to action, and are effective when placed in context.

Buttons can be create with HTML, WYSIWYG, or by using other components that use buttons such as "Call to action panel", "Content callout", and "Button row"

Examples
Default styling
Here's a button
.btn-green
Alternative style that outlines the button
Here's a button
.btn-white
A bigger button (This can be used in conjunction with other modifier classes)
Here's a button
.btn-arrow
A text button with an arrow
Here's a button 
<a href="#" class="o-btn [modifier class]">Here's a button</a>
<button class="o-btn [modifier class]">Button Element</button>
<input type="button" class="o-btn [modifier class]" value="input[type='button']"/>

1.4 #components.card Card

These are best used in a 2 column or 3 column layout

Example

Tuition and Aid

Tuition and fees at Oswego are more than 10% lower than the national average for public universities. U.S. News & World Report recognized Oswego among its 2019 top-ten Best Value Schools in the Northeast.

View Tuition and Aid 
<div class="card">
    <img class="card-image" src="https://www.oswego.edu/admissions/sites/www.oswego.edu.admissions/files/styles/card_image/public/20140506cd74admiss0785.jpg?itok=QLlj3bbu" width="450" height="253" alt="">

    <div class="card__copy">
        <h3 class="card__title">Tuition and Aid</h3>
        <div class="card__body">
            <p><span>Tuition and fees at Oswego are more than 10% lower than the national average for public universities.&nbsp;U.S. News &amp; World Report recognized Oswego among its 2019 top-ten Best Value Schools in the Northeast. </span></p>
        </div>
        <a href="http://oswego.edu/tuition" class="button btn-arrow">View Tuition and Aid </a>
    </div>
</div>

1.5 #components.contact Contact block

Provides a contact block. This typically include office location, phone number, email, and other important contact information.

Example

Office

Physics department

294 Shineman

Contact

Phone: 315.312.3044
Email: physics@oswego.edu

Hours: 8-11:45am
Monday - Friday

Social media?

<div class="contact-info-main">
    <div class="row">
        <div class="col-sm-4"><!--- FIRST COLUMN --->
            <p class="b ttu tracked whitney f7 tc-og">Office</p>
            <h2>Physics department</h2>
            <p>294 Shineman</p>
        </div>
        <div class="col-sm-4"><!--- SECOND COLUMN --->
            <p class="b ttu tracked whitney f7 tc-og">Contact</p>
            <p>Phone: 315.312.3044<br> Email: <a href="mailto:physics@oswego.edu">physics@oswego.edu</a></p>
            <p>Hours: 8-11:45am<br>Monday - Friday</p>
        </div>
        <div class="col-sm-4"><!--- THIRD COLUMN --->
            <p class="b ttu tracked whitney f7 tc-og">Social media?</p>
            <p></p>
        </div>
    </div>
</div>

1.6 #components.cta Call-to-action callout

A component that provides some accompanying text to one or two buttons that provide calls to action.

Example

Paragraphs module comes with a new "paragraphs" field type that works like Entity Reference's. Simply add a new paragraphs field on any Content Type you want and choose which Paragraph Types should be available to end-users. They can then add as many Paragraph items as you allowed them to and reorder them at will.

Download Paragraphs Testing second button 
<div class="cta-callout clearfix ">
  <div>
    <p>Paragraphs module comes with a new "paragraphs" field type that works like Entity Reference's. Simply add a new paragraphs field on any Content Type you want and choose which Paragraph Types should be available to end-users. They can then add as many Paragraph items as you allowed them to and reorder them at will.</p>
  </div>
  <div class="cta-callout__buttons">
    <a href="https://www.drupal.org/project/paragraphs" class="o-btn btn-green">Download Paragraphs</a>
    <a href="http://www.google.com" class="o-btn btn-arrow">Testing second button</a>
  </div>
</div>

1.7 #components.featured-content Featured content

This component is great for promoting something news-worthy or timely. Beware that if the headline or body text is too long, the component will not display properly. Try to keep the headline limit to 55 characters and the body to 150 characters.

Example

Dr. Casey Raymond receives the 2017 SUNY Oswego President's Award for Teaching Excellence

The 2017 SUNY Oswego President's Award for Teaching Excellence will honor chemistry faculty member Dr. Casey Raymond, who garnered praise in more than a dozen letters of support from colleagues and alumni for his 14 years of challenging, supporting and inspiring his students.

Learn More 
<div class="featured-content relative clearfix">
    <div class="featured-content__image" style="background-image: url()">
        <img src="//picsum.photos/800/600">
    </div>
    <div class="padding-top-1 padding-bottom-1 featured-content__body">
        <h2>Dr. Casey Raymond receives the 2017 SUNY Oswego President's Award for Teaching Excellence</h2>

        <p>The 2017 SUNY Oswego President's Award for Teaching Excellence will honor chemistry faculty member Dr. Casey Raymond, who garnered praise in more than a dozen letters of support from colleagues and alumni for his 14 years of challenging, supporting and inspiring his students.</p>
        <a href="https://www.oswego.edu/news/story/positive-reactions-support-teaching-award-casey-raymond" class="o-btn btn-arrow">Learn More</a>

    </div>
</div>

1.8.1 #components.imageblock.fancyimage Image block

Image block y'all featuring 350px x 200px image

Markup: hbs/image-block.hbs

Style guide: components.imageblock Fancy image block

Image block y'all featuring 350px x 200px image and a 25 x 25 icon

Example

Title goes here

Lorem ipsum dolor sit amet, consectetur.

 
<div style="width: 50%;">
  <div class="image-block-fancy">
    <a href="#" class="image-block-link">
      <img src="http://www.placehold.it/350x200">
      <div class="image-block-content">
        <h2 class="image-block-title">Title goes here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
      </div>
    </a>
  </div>
</div>

1.9.1 #components.lists.unordered Lists

Styles for different kinds of lists

Style guide: components.lists Unordered Lists

Styles for unordered lists

Example
  • This is a pretty cool list item
  • This is another cool list item
  • This list item, for some reason, isn't cool
    • Sub item numero uno
    • Sub item numero dos
    • Sub item numero tres
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quidem.
  • Lorem ipsum dolor sit amet.
<ul class="">
  <li> This is a pretty cool list item</li>
  <li> This is another cool list item</li>
  <li> This list item, for some reason, isn't cool
    <ul>
      <li> Sub item numero uno</li>
      <li> Sub item numero dos</li>
      <li> Sub item numero tres</li>
    </ul>
  </li>
  <li> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quidem.</li>
  <li> Lorem ipsum dolor sit amet.</li>
</ul>

1.10 #components.news-feed News feed

This contains a row of 3 news blocks pulling news content from the Office of Communications and Marketing's news site.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="row news-item-tease">
    <div class="col-sm-4">
        <img class="teaser-image" src="http://placehold.it/500x375">
        <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h3>
    </div>
    <div class="col-sm-4">
        <img class="teaser-image" src="http://placehold.it/500x375">
        <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h3>
    </div>
    <div class="col-sm-4">
        <img class="teaser-image" src="http://placehold.it/500x375">
        <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h3>
    </div>
</div>

1.11 #components.quick-facts Quick facts

A component to display simple infographics

Examples
Default styling

Fast facts

110+

Majors, minors and programs from accounting to zoology.

7,100

Undergraduate students

17:1

Student/faculty ratio

.bg-textured
Gives a textured grey background

Fast facts

110+

Majors, minors and programs from accounting to zoology.

7,100

Undergraduate students

17:1

Student/faculty ratio

<div class="horizontal-panel [modifier class]">
    <div class="container">
        <h1 class="horizontal-panel-headline">Fast facts</h1>
        <div class="row">
            <div class="col-sm-4 quick-fact-item">
                <div class="quick-fact-metric">110+</div>
                <div class="metric-description"><p>Majors, minors and programs from accounting to zoology.</p></div>
            </div>
            <div class="col-sm-4 quick-fact-item">
                <div class="quick-fact-metric">7,100</div>
                <div class="metric-description"><p>Undergraduate students</p></div>
            </div>
            <div class="col-sm-4 quick-fact-item">
                <div class="quick-fact-metric">17:1</div>
                <div class="metric-description"><p>Student/faculty ratio</p></div>
            </div>
        </div>
    </div>
</div>

1.12 #components.sidebar Sidebar Elements

Styles for sidebar content

Example

Sidebar heading

<h4 class="sidebar-heading">Sidebar heading</h4>
<ul class="sidebar-link-block">
  <li><a href="#">Here be a link</a></li>
  <li><a href="#">Here be a link</a></li>
  <li><a href="#">Here be a link</a></li>
  <li><a href="#">Here be a link</a></li>
  <li><a href="#">Here be a link</a></li>
</ul>

1.13 #components.spotlight Spotlight

A component to spotlight faculty, staff, or students.

Examples
Default styling

Spotlight

Little Kitten, '17

Department of Feline Studies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid, quod res alia tota est? Non autem hoc: igitur ne illud quidem. Duo Reges: constructio interrete. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Aut unde est hoc contritum vetustate proverbium: quicum in tenebris?

Watch video
Placeholder
spotlight-gold
Alumni gets a gold treatment

Spotlight

Little Kitten, '17

Department of Feline Studies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid, quod res alia tota est? Non autem hoc: igitur ne illud quidem. Duo Reges: constructio interrete. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Aut unde est hoc contritum vetustate proverbium: quicum in tenebris?

Watch video
Placeholder 
<div class="node node-spotlight spotlight  clearfix padding-top-1 padding-bottom-2 [modifier class]">
    <div class="spotlight__content">
        <p class="ma0 ttu tracked spotlight__title f7 b">Spotlight</p>

        <h3 class="ma0">Little Kitten, '17</h3>
        <h4 class="mt0 mb3">Department of Feline Studies</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid, quod res alia tota est? Non autem hoc: igitur ne illud quidem. Duo Reges: constructio interrete. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Aut unde est hoc contritum vetustate proverbium: quicum in tenebris?</p>
        <a href="https://www.youtube.com/watch?v=YLDbGqJ2KYk" class="o-btn btn-arrow">Watch video</a>
    </div>

    <img class="panopoly-image-original" src="http://placekitten.com/g/200/200" alt="Placeholder">

</div>

1.14 #components.tables Tables

Table styles

Examples
Default styling
Table Head 1 Table Head 2 Table Head 3 Table Head 4
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
.table-centered
Use this class if you'd like the data in your table to be centered
Table Head 1 Table Head 2 Table Head 3 Table Head 4
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
.table-striped
Use this class if you'd like the rows of your table to be striped
Table Head 1 Table Head 2 Table Head 3 Table Head 4
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
.table-hover
Use this class if you'd like a hover effect on your table rows
Table Head 1 Table Head 2 Table Head 3 Table Head 4
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
.table-bordered
Adds a border on all sides of the table and cells
Table Head 1 Table Head 2 Table Head 3 Table Head 4
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1
Table body cell 1 Table body cell 1 Table body cell 1 Table body cell 1 
<table class="table [modifier class]">
  <thead>
    <tr>
      <th>Table Head 1</th>
      <th>Table Head 2</th>
      <th>Table Head 3</th>
      <th>Table Head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
    </tr>
    <tr>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
    </tr>
    <tr>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
    </tr>
    <tr>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
    </tr>
    <tr>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
      <td>Table body cell 1</td>
    </tr>
  </tbody>
</table>

1.15 #components.video-broll Video B-Roll Infographic

An infographic treatment that really pops. Best if used in groups of 3.

Example

4,400

Students Live on Campus

#1

Campus Food in Central NY 

<div class="infographic-container tc ig-vid-bg">
    <div class="infographic w-100 ph4 pv6">
        <iframe src="https://player.vimeo.com/video/292783679?background=1" frameborder="0" data-ready="true"></iframe>
        <p class="infographic-num text-color-green mercury f0 b lh-title mb2">
            4,400
        </p>
        <p class="lh-title">
            Students Live on Campus
        </p>
    </div>
    <div class="infographic w-100 ph4 pv6">
        <iframe src="https://player.vimeo.com/video/292783711?background=1" frameborder="0" data-ready="true"></iframe>
        <p class="infographic-num mercury f0 b lh-title mb2">
            #1
        </p>
        <p class="lh-title">
            Campus Food in Central NY
        </p>
    </div>
</div>