Page Documentation

How to start adding content

To add content to your new Page, you'll need to add the metadata when adding a new page

Metadata

  • Title
  • Page Type
  • Overview
  • Related Content
  • Classifications
  • Owner and other fields
  • Viewable by

Title

The main title of the content. It's required for all content.

Page Type

The page type allows us to identify the type of page it is. We can use that to group like pages and as a sort in other Views. If you're missing a type, please add new ones to the Page Type taxonomy.

Overview

A short summary of the content. This shows up on the Page and in search results. It's essential to add this for search engine optimization and federated search. Keep it short, and descriptive as possible.

Related Content

Allows you to group types of related content, either internal or external URLs.

Classifications

Will include UCSF-wide taxonomies, that are still in the working, but will include your site-specific classifications. 

Owner and other fields

Includes last updated, notes on the page, who owns this content, and any administrative tags you need to track and group content.

Adding content

After you save the page, you'll see the title and overview show up on the page. To add content to the page, you need to use Layout. This will give you the ability to add sections and blocks.

Sections

You can think of your content in rows. The section sets up a row of content. You will have these choices:

  • Layout
  • Administrative label
  • Style

Layout

You can choose between 1-4 columned layouts. You can add components to each of the columns. They can be moved between columns.

Administrative label

You don't need to fill this out, but it is helpful for other editors to know what this section is for. Use a descriptive label, e.g. List of News Articles or Our Areas of Focus.

Style

Allows editors to assign a background color based on the color theme you choose in settings. White is the default. Here are the other choices:

  • Light Gray Background – Universal light gray
  • Light Color Background – The lightest color based on the theme
  • Medium Color Background – The medium color based on the theme
  • Dark Color Background – The darkest color based on the theme
  • Navy Background – Universal navy
     

Basic Text Block

The Basic Text Block is the most-used component. It's a basic text area with a title. Use this for all content that doesn't need a special design component.

Accordions

Accordions allow editors to long lists of content in a easy-to-scan format. Accordions should only be used for content like FAQs. The Accordion Title should have enough information that the Accordion Body doesn't need to be shown for users to know what's inside. Please don't use these because you want a shorter page. It hides content and users love to scroll and use search for their keywords. If you hide it, they can't find it. It's a major accessibility issue for users with assistive devices.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Steps

Step is a component to allow editors to get a step-by-step process for users to follow.

Step1

First thing you need to do

Description of what this step will entail, with lists, images, links to documents, or a main call to action (CTA).

Step2

Next thing you need to do

This will give you and example of the call to action (CTA).

This links to the homepage

If you need to quote someone or a document, use this component!