Skip to main content

Style Guide

This page features all of the general styles to be used throughout page layout for the website. Use it as a guide when creating plugins, email templates or new page types.

Intro sentences on the site (like this one) should be short and friendly. They can include links and additional styling.

Most of our web styles and colors come from the new guides published by Penn, which helps to align the new Nursing site with others across campus. The addition of the Roboto Slab Font is provided by Google Fonts, and serves as a casual, humanist addition to our collection of available type.

Text Styling and Recommendations:

This is Header 2

This is the largest header available to content editors - it should be used to introduce big topics or sections.

This is Header 4

Great for moving and guiding your readers down the page

This is Header 6

The smallest header, perfect for columns and labeling details. It will automatically convert text to uppercase, which helps it to stand out at a smaller size.

The editor toolbar also contains a “horizontal line” button, which can divide the text area and help differentiate between topics. The line will always stretch to fill the width of its container.

You can use the “block quote” element to highlight text in an editable area. This style will increase the text size and add a light left rule.

For shorter line breaks–
like this one! - you can press Shift+Enter while editing paragraph text. This is often useful for addresses or other contact info.

Editors have access to regular bulleted lists:

  • Temporibus autem quibusdam et aut officiis debitis?
  • Aut rerum necessitatibus saepe eveniet.
  • Ut et voluptates repudiandae sint.

As well as numbered lists:

  1. Temporibus autem quibusdam et aut officiis debitis?
  2. Aut rerum necessitatibus saepe eveniet.
  3. Ut et voluptates repudiandae sint.

When inserting a video, you’ll most often use the default settings: width of 100% and height:auto. This will make the video look great on every page and device!


Widgets and Dynamic Content

All of the global widgets can be added to various page areas and will adapt to fill their container. Though they are able, very few widgets will ever span the full width of the page - most of the time they will appear in the left page body, or in a column or sidebar. 

Below is an example of the “My News” widget - it will show three stories in the selected group, unless there are no stories, in which case it will default to stories in the “Core Site” group.

  • A.S.P.E.N. Honors Irving

    Penn Nursing ’s Sharon Y. Irving, PhD, CRNP, FCCM, FAAN , Assistant Professor, has been awarded a Distinguished Nutrition Support Nurse Service Award from the American Society for Parenteral and Enteral Nutrition (A.S.P.E.N.)

  • Penn Nursing Study Links Nurse Work Environments and Outcomes

    Nurses play critical roles in patient safety and are often the last line of defense against medical errors and unsafe practices. Considerable research has explored the relationship between the nurse work environment and a variety of patient and nurse quality and safety outcomes. But until now, no synthesis of this body of research has been made to clearly articulate the association between nurse work environments and health care quality, safety and patient and clinician well-being.

  • Congratulations to the 2019 Penn Nursing Faculty Award Recipients

    All the honorees will be recognized during the Student-Alumni-Faculty Awards Ceremony on Friday, May 17, at 4:00 pm in the Ann L. Roy Auditorium of Fagin Hall.

Below is an example of the “My Profiles” widget - it will show three profiles in the selected group.

Below is an example of the “My Files” widget - it will show three files in the selected group, unless there are no files, in which case it will not appear at all.

Below is an example of a “My Events” widget. It will show three events in the selected group, unless there are none, in which case it will show three events from the “Core Site” group. You may need to refresh the page upon save in order for the small calendar icons to appear.

Upcoming Events:

  • Apr
    Juliet Larkin-Gilmore, PhD Candidate, Vanderbilt University

    Homesick: Native Families, Health, and Mobility, 1900-1920

    American Indians today still grapple with the traumas that federal boarding schools inflicted on generations of Indigenous families. In this Bates Center seminar series, Juliet Larkin-Gilmore focuses on the Mohaves (Aha Macavs) of the Lower Colorado River and examines how they and Office of Indian Affairs (OIA) administrators encountered the boarding school health crisis in the early twentieth century.  
  • Apr
  • Apr

    Peace Corps Community Health Outreach Volunteer (Mozambique, East Africa)

    Join us for Global Bites – a special lunch hour where Penn Nursing community members and their guests share stories of their global engagement, at home and abroad.  ABSN student Beth Humphrey presenting!