Markup Styles and Sidebar Options

This is the new lead-in style for our articles. It can be found in the "styles" drop down called "Story Lead In". Type your content in paragraph style, sleect and choose "story lead in" from the styles menu.

Our new site offers us some opportunities for presenting content. It's cleaner, and styled in a way that all web parts, headers, and other elements work together visually. Read on for some tips on formatting your content.

We'll start with an easy one: Here's how a block quote looks on our new site:

"This is a block quote. It is indented slightly, and will span the remaining length of the container. We don't imagine a need for very long pull quotes like this, but we're eager to see how you might use this on your pages."
-First Last, Title, Organization

You can also use the "Content Left" and "Content Right" sections, below, to create columns that are fully responsive, and simply stack on top of each other on mobile. This breaks content up nicely on full screens, but remains easily readable on mobile. Check it out here:

This is the "Content Left" container. On mobile, this container will stack above the Content Right container. You can use any of our markup styles here, buttons, or images. It behaves just as a typical content section does. You can even use some web parts here.

This is your "Content Right" container. On mobile, it will stack below Content Left. Just like the Content Left section, you can use this as you would any typical content section.

Heading Styles

Let's talk about font style and heading hierarchy. Above, under your browser's URL bar, you have your Styles ribbon. This includes styles for Paragraph, Headings 1 through 4, Alternate Headings 1 through 4, Arrow and Button Link styles, Block Quotes, and Bullets. You'll see examples of those throughout this page. When you highlight text, and hover over a style in the ribbon, the text will preview in that style for you. Click the style button, and the style is set.

If you want to see them all in action, check out the Font Styles below.

Heading hierarchy

Portrait images should have a max width of 250px.

When we're talking about heading hierarchy, we simply mean using heading styles in a specific order. Using them in the correct order is important for SEO and for consistency. The short explanation is, you start at Heading 1 and go up from there. The full explanation is a bit more complicated. Let's dive in.

On this page, the page title is formatted automatically in Heading 1 style. You should never use Heading 1 for anything else -- each page has only ONE Heading 1: the page title.

Next, your Section Titles are automatically formatted as Heading 2. Generally, you won't need to use Heading 2 anywhere else in the main body. You will use Heading 2 in the sidebar for all of your sidebar headings. Using H2 there will help readers differentiate between different sidebar sections.

If you notice that you need to break down content within your sections, you'll go to the next header style: Heading 3. The header for this subsection ("Heading Heirarchy") is styled with Heading 3. Should your Heading 3 section need to be broken down even more, you can use Heading 4.

Heading Alternates

Generally speaking, you won't need to use heading alternates. However, if you find you have a specific need the other headings won't satisfy, give the alternates a try! We also can't encourage you enough to please reach out to us. We are always happy to help you think through the correct formatting. In the meantime, here's one example of how heading alternates might be used:

Heading Alternate Example

Above, you'll see Heading 1 Alternate. I like to use heading alternates in these content left and right columns, but that isn't the only way you can use them.

Alternate Heading Hierarchy

I wanted to show you how you'd use hierarchy with the alternates. Since our alternates aren't used by default anywhere on the page, you'll start with Heading 1 Alternate and work your way down to Heading 4, as you need them for sections.

Heading 2 Alternate

Above is your heading 2 alternate. You can see it's slightly smaller than Heading 1, and the font color is dark blue, rather than black.

Font Styles

These are your traditional Heading 1 through Heading 4 heading styles.

Heading 1 sample text

This is the Heading 1 ribbon style. It is equivalent to an H1, and can appear only once per page. The page title field is automatically styled as a H1. Do not use this heading style anywhere on a page.

Heading 2 sample text

This is the Heading 2 ribbon style. It is equivalent to an H2. Section headers are automatically styled as H2s.

Heading 3 sample text

This is the Heading 3 ribbon style. It is equivalent to an H3. If you have any subsections within your major page sections, those sections headers would likely be styled with H3.

Heading 4 sample text

This is the Heading 4 ribbon style. It is equivalent to an H4. You would use an H4 header if you had any subsections within your H3 sections.

If you get confused about style hierarchy, reach out to the Digital Strategy team for help.

These are additional alternate styles. You'll rarely need to use these, but they are available for you to work with.

Heading 1 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus, ut aliquam dolor tristique.

Heading 2 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus, ut aliquam dolor tristique.

Heading 3 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus.

Heading 4 alternate sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada mauris quis metus dapibus, ut aliquam dolor tristique.

NOTE: Please do not use any of the styles under the "Text Styles" header in the Styles dropdown. Those are out-of-the-box styles, and not styles approved by design and web.

Notifications use the "Emphasis" style. These are used very sparingly for critical and time-sensitive information, and appear at the top of a relevant page -- examples include notifications about resources/staff being unavailable, a change in operations due to COVID, imminent changes in fees, etc.

Sidebars

When it comes to sidebars, you have many options. However, there are a few rules we'd like you to follow when prioritzing your sidebar content. Please read the below and the approved examples in this page's sidebar.

Registration and other calls to action (CTAs)

If you're creating a page about a specific program where you're asking the user to perform a specific ation (register, watch/listen, apply, sign up, etc), a call to action (CTA) should be your first item in your sidebar. (See an example at the top of this page's sidebar).

Your call to action will always go in the "Button Content" section. When you put a link in this section and style it with Button Link style, the button will turn green, our default CTA color. In any other section, the button will be blue.

Reports

Landscape images should have a max width of 400px.

For any pages or articles about reports, a link to download the report is likely your first priority. You can see this example in the second slot on the right sidebar. Notice the button to download is blue, because it's not in the top "Button Section." Include the PDF notation in the button text.

House ads

Up next are house ads. If you don't have a call to action or report to place at the top, consider a house ad. You can see an example of our HENA house ad on the right, above "More on XX Topic." These are kept in the house ads folder in our image library. Every house ad must be linked appropriately—it cannot simply be a stand-alone picture. Other than HENA, we recommend house ads for Annual Meeting or REHE, and there may be others in future.

On the Subject of Engage (Disregard)

Please note, ACE Engage is no longer reflected across acenet, so you can disregard this section. Retaining it on the page for reference and/or a similar product is developed that requires similar treatment.

When you can, tie Engage into your pages. This could be a linked mention in the page content, a promo in the sidebar, or a tile somewhere on the page.

As a sidebar promo

When you add a sidebar promo-ing Engage, please use the approved format and text seen in the sidebar of this page. Your header will always be an H2 saying "Find More on ACE Engage", followed by copy that includes the boilerplate copy shown at right. Depending on the situation, you might also choose to use an approved description Marketing has used in its emails.

If using a button linking to a specific piece of content, always use appropriate verbs (ie. "Watch the Webinar" or "Listen to the Audio"). The button link should open in a new tab. Please ensure the link you use came directly from WSO or someone on the Engage team (Engage URLs are tricky and if you just copy the URL you see in your browser, it may not work for other users).

As noted above, if the Engage content is at the top of your sidebar and you have a specific piece of content to point users to, calls to action such as these should go in your Button Content section, to generate a green button.

There is also standard boilerplate that should be included below each button or link, prompting new users to create an account. This text is styled with Paragraph, with the font size reduced to 9px using the text formatting options in the top ribbon. Please reach out to WSO if you need help styling the small text.

As a mention in main content

Please add links to Engage content within body text whenever relevant. As with sidebar Engage links, please confirm your links with someone before adding to the page.

Finally, when talking about Engage in News Room stories, add one of the following boilerplate messages to the end of your page:

Interactive discussion makes ACE Engage a dynamic learning platform. Engage users collaborate to shape conversations around higher education and address challenges collectively. Log in or create a complimentary account today.
ACE Engage, our peer-to-peer online learning platform, is home to a community of higher education leaders with a shared mission: to enhance student success and achieve institutional goals. ACE Engage is complimentary for a limited time. Log in or create a complimentary account today.
ACE built ACE Engage specifically for higher education leaders. The peer-to-peer online learning platform offers on-demand access to a curated content library, microcourses, peer groups, and more. ACE Engage is complimentary for a limited time. Log in or create a complimentary account today.
ACE Engage provides a confidential space for higher education leaders to connect, collectively address day-to-day challenges, share curated resources and practices, and shape conversations about the future of higher education. ACE Engage is complimentary for a limited time. Log in or create a complimentary account today.

New Column Header
We no longer use the H2 style for this. Type your header in paragraph text, select and choose "Column Header" in the styles drop down.

Registration

March 14-16, 2020

Marriot Marquis San Diego Marina
San Diego, CA

Recording

This event took place on April 1, 2020. Watch the recording at the link below.

Watch the webinar, "Our Best Ever Webinar," which was recorded on April 1, 2020.

Watch

Find More on ACE Engage

A recording of “Whither HEA Reauthorization” is now available on ACE Engage^®, ACE’s peer-to-peer learning platform. ACE Engage includes access to a curated content library, microcourses, exclusive events, and more.

Watch the Webinar
(If you are not currently an ACE Engage user, learn more about joining or create your account.)

Download (PDF)

Maroon Notepad WP Title

This is how the maroon notepad looks on a page. Headings will default to white.

For example, this is an H3

Notepads are a nice way to break up your content if you need to, or draw attention to something unique.

White Notepad WP Title

This is how your white notepad will look on a page. You can see the background color within the border is just a shade lighter than the color of your page. Again, it's helpful as an option to break up content or bring in some extra attention to whatever is put here.