Basic/WYSIWYG Styles
These basic styles and components should be available to editors in wysiwyg areas. Editors can use these styles to format content on detail pages and in the text regions of more complex components.
In this section:
Text Styles
Basic Text
Font styles, weights, sizes and colors are usually set by the stylesheet and cannot be changed. Most components will use Noto Sans as the font for body copy. In some wysiwyg areas, you may also be able to choose Noto Sans Bold or Noto Sans Italic.
Other Text Components
Some other text styles that may be available:
Blockquote
Reiciendis illum asperiores non possimus quia. Et eum et velit aut consequatur.
The blockquote element is intended for long excerpts of quoted material from other sources. Don't confuse the blockquote with the Pullquote Component, which is a stylized editorial component used for calling attention to short quotations.
Horizontal Line
To help visually divide sections of content, the library has two options for horizontal lines:
Simple solid horizontal line: use to subtly separate areas of content.
Bold dotted line: use sparingly and thoughtfully to separate large areas of content. Too many dotted lines can make content difficult to scan.
Headlines
Heading styles are defined by the stylesheet and cannot be edited. Heading levels 2-6 are shown here. The H1 level is reserved for page headers only and is not available in the wysiwyg.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
It is important that heading levels on a page go in order. For example, an H3 can be followed by another H3 or an H4, not an H5. This is an important part of making your content accessible. Read WebAIM's recommendations about headings for more information.
Links and Buttons
Most text links will be styled automatically by the stylesheet. This is an example of a default text link. To make your links stand out, the library provides a few options. Use link modifiers judiciously! Too many can make it difficult for users to read the page and find the information they need.
Fancy link style to call attention to important links within a text region. You can use the fancy link style on a single, standalone link, or on short lists of links. For link lists of six or more, use the default text link style for best readability.
Button-style link to make a single link stand out at the bottom of a paragraph or text region. If you have several links you want to highlight, use fancy links instead not buttons.
Lists
Wherever possible, break lists hidden in paragraphs out into bulleted (unordered) or numbered (ordered) lists to make content easier to scan.
Unordered/Bullet List
- Eligendi Quas Odio Illum
- Ut Beatae Consectetur Tempora
- Hic Est Dolorem Aut
Ordered/Numbered List
- Quia Vero Ducimus Deserunt
- Placeat Temporibus Qui Quo
- Autem Ut Eligendi Et
The library provides two formatting options for when you need looser or tighter formatting for your list items. These can be applied to either ordered lists or unordered lists.
Loose List
- Iure Et Sunt Non
- Nesciunt Totam Ullam Non
- Delectus Earum Autem Nesciunt
- Animi Et Sed In
Tight List
- Doloremque Rerum Exercitationem Earum
- Maxime Quia Cupiditate Quos
- Hic Ad Voluptatem Quia
- Ab Veniam Ex Eum
Media: Images and Video
Quick photography guide:
- Aspect ratio: 16:9
- Maximum size: 2000px wide x 1125px tall
-
Minimum sizes:
- 1680px wide x 945px tall for images that will touch the edges of the page (images in Page Headers or Edge to Edge Teasers)
- 1000px wide x 562.5 tall for all other images
- The CMS has a max upload size of 20mb, but a 20mb image is very large and should not be used as a target size.
Image Cropping Tutorial
This video shows an example of how to prepare images for the website using a free online photo editing tool.
Photography Style
Photography is a key tool for showing our diverse and dynamic community.
The photography style is light, airy and natural. Use natural light whenever possible.
Avoid unnatural angles (acceptable in detail shots with shallow depth of field).
People play a key role in defining the subject matter of our photography. Finding the humanity in our stories helps us connect to our audience in a powerful way. Object shots or shots of projects and innovations can and should be used in a supporting role.
Architectural photography can give a sense of place, highlighting the distinct look of the Emory campus. Focus on details, and let these photos take a back seat to the topical and people-focused imagery.
University Photo Resources
For university photo resources please visit Emory Photo/Video.Captions and Credits
Any image or video can have optional captions and credits associated with it.
Image link that indicates a video
For cases where a linked image should indicate that the story or content behind the link includes a video, but not be a video itself, a video-indicator class exists to style the image with a play icon.
Basic Content Layouts
The library provides two simple ways to arrange content in two columns. If you need a more complex layout, see the Components Guide.
Floating content left and right
When you float an image, callout, or other small component to the left or right, it will expand up to 50% the width of the available space and other content will flow around it:
Basic Two Column
If you want to arrange content in two equal columns, without floating/content flowing below, use a basic two column layout:
First column. Aspernatur nisi voluptatibus aliquam voluptas soluta unde voluptatem et. Quas ex ab pariatur animi ullam corrupti. Qui voluptatum beatae assumenda labore. Repellat voluptatem quo natus et ut expedita vitae sit.
Second column. Recusandae veniam quidem quo nesciunt assumenda id. Nostrum quam distinctio aut id. Nisi aut sit sit et sit. Qui distinctio autem sit quia ut adipisci odit corrupti.
Data Tables
For tabular data, the library provides a two table styles: