OHSU logo
OHSU Onward logo
Four OHSU faculty invited to join National Cancer Moonshot

OHSU Onward Style Guide

This document contains information pertaining to the styles used witin https://www.onwardohsu.org/. To edit onwardohsu.org, please visit https://www.onwardohsu.org/user and login. The style guide features the ability to swap the page theme to preview section colors, located within the menu. Click the menu and select a color to swap the theme.

Note: The Style Guide does not exist within drupal so content links may be broken (Search, glossary content links).


Table of Contents


Typography

Important: The H tags differ in size between blog posts and modules.

All type treatment on onwardohsu.org uses variations of the Lato font family. The font can be freely downloaded on Google fonts. See Lato on Google Fonts. All text uses CSS media queries to scale the font to the screen resolution. Do not set the font sizes using the CMS as the font sizes will not scale accordingly. Resizing the browser window on this page will demostrate the font sizes at various screen sizes. Below are demostrations of the font-sizes between blog posts and modules.

Blog Post styles

Module H tags do not pick up the page's theme color

H1 Blogpost headline

H2 Blogpost headline spans make bold text

H3 Blogpost headline spans make bold text

H4 Blogpost headline

H5 Blogpost headline
H6 Blogpost headline: I am auto centered and auto caps

Default body text style looks like this

<p><strong>Typography</strong></p>
<h1>H1 Blogpost headline</h1>
<h2>H2 Blogpost headline <span>spans make bold text</span> </h2>
<h3>H3 Blogpost headline <span>spans make bold text</span></h3>
<h4>H4 Blogpost headline</h4>
<h5>H5 Blogpost headline</h5>
<h6>H6 Blogpost headline: I am auto centered</h6>
<p>Default body text style looks like this</p>

Module styles

Module H1, H2, H3 pick up the page's theme color

H1 module headline

H2 module headline spans make bold text

H3 module headline spans make bold text

H4 module headline

H5 module headline
<p><strong>Typography</strong></p>
<h1>H1 headline</h1>
<h2>H2 headline <span>spans make bold text</span> </h2>
<h3>H3 headline <span>spans make bold text</span></h3>
<h4>H4 headline</h4>
<h5>H5 headline</h5>
<h6>H6 headline: I am auto centered</h6>
<p>Default body text style looks like this</p>

links

Link treatments come in two main flavors: underlined and button. These require adding a class in the HTML source using the CMS.

<a class="btn">Default Button</a>

Default Button

<a href="" class="underline">class underline link</a>

Apply color, see the color list below.

Default Button <span class=" dark-cyan"><a class="btn">Default Button</a></span>

class underline link

Any link can bring up a video modal by adding data-video="video-url" and "watch-video" class. Video-URL must be the actual URL to the Vimeo video:

<a href="#" class="underline watch-video" data-video="https://vimeo.com/37878497">Test video</a>

Test video


Icons

Icons can be used in the text editor by using HTML.

<i class="icon-arrow-up"></i>

icon-play

icon-play-circle

icon-arrow-up

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-arrow-right-circle

icon-twitter

icon-youtube

icon-linkedin

icon-facebook

icon-hamburger

icon-search

icon-document-fold

icon-document-text

Example

Check Out This youtube Video <a href="https://www.youtube.com/watch?v=Dqmaukyg3mg" target="_blank" class="btn">Check Out This youtube Video <i class="icon-youtube"></i></a>

colors

  • .horizon-yellow - default color
  • .light-orange
  • .dark-orange - HIV/AIDs
  • .light-green
  • .dark-green - cancer
  • .light-red
  • .dark-red - Cardiovascular
  • .light-purple
  • .dark-purple - Neurology
  • .light-magenta
  • .dark-magenta - Children
  • .light-cyan
  • .dark-cyan - Eye + Vision
  • .dark-green
  • .marigold - Donor Stories
  • .cornflower - General News
  • .theme-light-grey Light Grey
  • .theme-charcoal-grey Charcoal Grey
  • .theme-almost-black Almost Black
  • .theme-black Black
  • .cobalt
  • .white - (Note that the white background isn't visible, the border is an inline style)
  • .lime - cta button

This is using dark-red

<h3 class="dark-red">This is using dark-red</h3>

Styling Buttons

Default Button Theme Charcoal Grey Theme Almost Black <span class=" dark-cyan"><a class="btn">Default Button</a></span>
<span class="theme-charcoal-grey"><a class="btn">Theme Charcoal Grey</a></span>
<span class="theme-almost-black"><a class="btn">Theme Almost Black</a></span>


Image sizing

Emerge recommends using JPG images (not png or gif) as they will deliver the best quality/file size ratio.

Hero Module - The hero image should be 1920 x 1350. See Example

Panels - The hero image should be 1920 x 750 to 1920 x 1250. See Example

Blog / static page - The blog image should be 900 x 580 (height is variable). See Example

Blog page - top image size should be 940 x 597 See Example, the inline image should be 576 x 384 See example

Bottom CTA - The bottom image should be 1920 x 990 with a black background. See Example

Landing Page - The landing page image should be 1439 x 733 See Example

Multipage - Since these are inputed via the Rich Text Field, these can be any size, but recommended is to do use an image of 1165px wide (the height can be as tall you want). To match the Video size, 1165 x 655. Be sure to make sure the Rich Text in the HTML does not enter a width or a height.

All the slide images need to be 1920px wide, this means for half wide images, the image just needs to be treated to allow for white space.


005 Blog/Stories Image sizing


Stories Preview Module - 600 x 300

Stories Gallery Module - The images are fit inside the parent container, any size can be used but if you'd like images not have grey bars, you'll want to use 1920 x 1200 for high rez or 1200 x 750.

Stories Magazine Module - The magazine is designed for an image that's portrait (using the 8 3⁄8” x 10 7⁄8” or 5 3⁄8” x 8 3⁄8” standard ), this can accept any image. The recommended size is 1000px x 1300px or whatever is closest to this

Blog style


Blockquotes

"It’s worked out beautifully, Hope helps us do our job – caring for the emotional and developmental needs of our patients and helping them cope with being in a hospital."

<bdi>
<p><em>"It’s worked out beautifully, Hope helps us do our job – caring for the emotional and developmental needs of our patients and helping them cope with being in a hospital."</em></p>
</bdi>

Accordion

The accordion requires particular HTML structure in order for the javascript to detect and work with the content. It uses wrapper div, accordion to create a block of accordions, then pairs of accordion-toggles and accordion-content.

Write a check

Make a Gift Online

Lorem ipsum dolor sit amet mauris eu turpis.

Call Us

Vivamus facilisisnibh scelerisque laoreet.

Accordions are multi piece element that need a wrapper div with a accordian. Multiple accordions can be close

<div class="accordion">
<h4 class="accordion-toggle">Write a check <i class="icon-arrow-down"></i></h4>
<div class="accordion-content default " style="display: none;">
<p>Print our <a href="" class="underline">OHSU Foundation</a> or <a href="" class="underline">Doernbecher Foundation</a> pledge form and mail to:
<br><br>
OHSU and Doernbecher Foundations<br>
Mail Stop 45<br>
PO Box 4000<br>
Portland, OR 97208-9852
</p></div>

<h4 class="accordion-toggle active">Make a Gift Online <i class="icon-arrow-down"></i></h4>
<div class="accordion-content" style="display: block;">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>

<h4 class="accordion-toggle">Call Us <i class="icon-arrow-down"></i></h4>
<div class="accordion-content" style="">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>

Module Glossary


Text + Media Module

FORWARD 
FASTER

At OHSU, we take on the toughest questions and the biggest challenges. Curing AIDS. Preventing blindness. Defeating cancer.

We are the torchbearers, leading the way to transform human health. We don't let up, because to us, the impossible is unacceptable.

Together, we can illuminate the next discovery. We can map the next frontier of medicine and wellness. How fast depends on you.

The future is waiting. Onward.

Text + Text Module

MAKING
ROOM FOR
INNOVATION

To set the stage for a new era of innovation, we are building a new facility to accelerate discovery and help us reach more patients with better options, sooner. The building will be named the Elks Children's Eye Clinic, in recognition of a significant gift from the Elks Youth Eye Service (EYES). The building will also house the Macular Degeneration Center, the Translational Clinical Trials Center and space for additional research and patient care needs. We expect to break ground in July 2017.




Thin Message Bar Module


This is a test for the thin message bar, it is for text.




Serial Story Module


The Need for
Early Detection

Bryce Olson: The Need for Early Detection, EPISODE 1 Bryce Olson: The Need for Early Detection, EPISODE 2

Too many patients die or suffer debilitating treatments because their disease is caught too late. That’s why we’re investing $1 billion to develop new ways of finding lethal cancers at their earliest, most treatable stage.

Bryce Olson is currently fighting metastatic stage IV prostate cancer. As a young man with no family history of the disease, his symptoms went undiagnosed for far too long. Early detection would have helped Bryce, and he's become a strong advocate for finding new ways to detect cancer early, when treatment is most effective. 

Something else feels broken. Treatments for metastatic prostate cancer are not curative. The hormone therapies, chemotherapies and burgeoning immunotherapies can give a guy like me several more years, but I’m not expected to see my 6-year-old daughter graduate from high school.




Donation Module


HELP US DISCOVER
SOLUTIONS ​TO
DEBILITATING DISORDERS

Give Online Other ways to give




Columns Module


Demonstration title copy

Donec vitae porttitor nulla. Suspendisse ultricies volutpat fringilla. Morbi varius cursus lacus ut vulputate. Donec facilisis bibendum nisl, quis bibendum lacus. Mauris id tellus venenatis, mollis leo et, faucibus leo. Aenean euismod sapien non purus vulputate, non posuere nisi tincidunt. Aenean commodo vel risus sed ultricies. Ut vulputate sollicitudin mauris, a dapibus nulla congue sed. Maecenas iaculis dictum congue. Quisque sed tortor ipsum.

In vel mollis diam, id laoreet massa. Maecenas in sem fringilla, aliquam sapien non, sagittis sapien. Pellentesque vitae elementum nulla, vel dictum odio. Mauris ultrices porta elit non ultrices. Sed rhoncus elit et varius rhoncus. Maecenas lobortis arcu vitae velit egestas gravida. Phasellus mattis semper posuere.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla feugiat bibendum rutrum. Fusce nec pretium augue, ac sodales sapien. Maecenas a egestas nulla. Maecenas accumsan nec turpis non aliquam. Sed rhoncus pharetra lorem et porta. Suspendisse potenti. Mauris eget sapien sit amet lectus dictum tempor eget non lectus. Mauris pretium tellus varius ipsum elementum auctor porta at magna.




Hero Module


ONWARD

Imagine a world without AIDS. Without cancer. Without blindness. At Oregon Health & Science University, we’re more than imagining that world. We’re creating it. By the end of 2020, we’ll raise more than $2 billion to transform human health.


E-News Signup Module

Onward E-News

Sign up to receive our latest campaign news, updates and stories in your inbox




Landing Page Module


Our passion is cancer. And how to defeat it.

We fight cancer the way you would battle your worst enemy--relentlessly, from dawn to dusk, and then some. We're focused on a revolutionary way to defect cancer: Early detection. We are not content to stop cancer in its tracks. We intend to stop it before it makes any tracks. The advanced science of early detection will someday save thousands of lives, and more. Make that day come sooner.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolorem necessitatibus voluptatem. Quas officia labore esse molestias. Quae quia, fugit quo officia molestiae, eaque corporis, modi iste pariatur sed perspiciatis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolorem necessitatibus voluptatem. Quas officia labore esse molestias. Quae quia, fugit quo officia molestiae, eaque corporis, modi iste pariatur sed perspiciatis.


Multiple Page Module

This is a headline

Donec vitae porttitor nulla. Suspendisse ultricies volutpat fringilla. Morbi varius cursus lacus ut vulputate. Donec facilisis bibendum nisl, quis bibendum lacus. Mauris id tellus venenatis, mollis leo et, faucibus leo. Aenean euismod sapien non purus vulputate, non posuere nisi tincidunt. Aenean commodo vel risus sed ultricies. Ut vulputate sollicitudin mauris, a dapibus nulla congue sed. Maecenas iaculis dictum congue. Quisque sed tortor ipsum.

Pages


<

The Title of this Video page goes here

Cancer
June 15, 2016

One year ago today, we met the Knight Cancer Challenge. Watch a special video message from Brian Druker, M.D., on this anniversary. One year ago today, we met the Knight Cancer Challenge. Watch a special video message from Brian Druker, M.D., on this anniversary.

<

The Title of this page goes here

Cancer
June 15, 2016
Four OHSU faculty invited to join National Cancer Moonshot

One year ago today, we met the Knight Cancer Challenge. Watch a special video message from Brian Druker, M.D., on this anniversary. One year ago today, we met the Knight Cancer Challenge. Watch a special video message from Brian Druker, M.D., on this anniversary.

Retinopathy of prematurity (ROP) is a blinding eye disease that strikes premature infants — and is one of the leading causes of childhood blindness. If spotted early, it can be treated. But if an ophthalmologist misses the signs, the disease develops quickly. Thanks to the work of Michael F. Chiang, M.D., and his team, Casey Eye Institute is leading the nation in developing methods to diagnose ROP with more accuracy and speed. Our goal is to ensure that every child in the world has access to that crucial expertise.

Dr. Chiang’s research has transformed our ability to reach patients in time with expert diagnosis and care. He is leading a number of national research projects that aim to prevent ROP by connecting newborns to experts more quickly using digital images. He is also pioneering methods of improving the accuracy with which specialists can diagnose ROP by using computers to analyze electronic images of a child’s eye, and he is working with Casey’s genetics experts to uncover the genetic underpinnings of ROP.

Led by Dr. Chiang, Casey’s new Ophthalmics Informatics Center is building a network of screening programs that connects patients across the region and around the world to expert diagnostics using highly-detailed digital images, giving everyone access to expert, timely vision-preserving services — regardless of where they live.

Chiang’s unique ability to combine several different approaches (he’s trained in both informatics and ophthalmology) has established Casey as a world-leader in ROP, medical informatics and telemedicine. His team’s work is helping to improve the way we deliver every kind of health care.

We're working to end blindness, be part of this powerful vision.

6.14.16 | Doernbecher Children's

Give Comfort

6.14.16 | Heart Disease

Give Time


The title of this magazine page goes here

Cancer
June 15, 2016

Subscribe Today

Click here to sign up and receive our ONWARD magazine in the mail -absolutely free. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Subscribe Today

To start receiving our monthly ONWARD magazine in the mail, enter your information below.

Subscribe
featured
6.14.16 | Heart Disease

Give Time

6.14.16 | Doernbecher Children's

Give Comfort


X