好色先生

Build accessible webpages focused on the user experience鈥攚eb developer or not!

For brand consistency, all UCM-approved web styling is documented here for quick reference. In combination with editorial guidelines and knowledge of the overall brand, CSUDH pages are built with a focus on clearly organized information that is helpful to our audience.

Contact Multimedia Designer, Hillary Griffin, to have these options added to your page.

Elements & Components

• Colors
• Typography
• Headings
• Links
• Buttons
• Notification Bars
• Blockquotes
• Horizontal Rules
• Event Block
• News Block
• Labels
• Accordions
• Image Cards

How to Add HTML to a Page

1. Open the page in CM1 and select 鈥淓dit.鈥�
2. Open a widget in the CM1 editor. The most common widget to use is the "Rich Text." Accordions use widgets titled "This widget is empty."
3. In the widget window, locate the 鈥淭ools鈥� dropdown menu in the widget editor toolbar and select 鈥淪ource Code.鈥�
4. Copy the HTML code for the desired component from this page and insert it where needed in the source code window.
5. Select 鈥淥k鈥� to apply and return to the widget.
6. Select 鈥淪ave鈥� to apply changes and return to the page editor.

Colors

Typography

Font Family

The Proxima Nova font family is used for all text, with specific files used for bold and italic. The font-weight attribute is not used, as this alters the intended look of the font family. Because these fonts are already the default across the site, no user input is required.

Intro Styling

An intro-styled paragraph provides flavor text or a concise summary of the page content. Think of it as a hook to encourage visitors to read further. Intros are used as the first line of text in the body of the page.

<p class="intro">Open your page with some intro text.</p>

Applying the Intro Styling

1. Open the first text-editing widget in the editor.
2. In the editor menu, open the "Tools" menu and select "Source Code."
3. Add <p class="intro">Open your page with some intro text.</p> as your first line of code.
4. Replace Open your page with some intro text. with your own intro.
5. Select "OK" to close the Source Code window.
6. Save changes before closing the widget.

Headings

Headings help organize information, provide an opportunity to use anchor links, and generally help users skim a page for the content they need. Headings are used in numerical order, from 1 to 6.

<h1> Heading 1 (Page Titles)

On the CSUDH site, heading 1, or <h1>, is used for the title of each page. Since <h1> should only be used once per page, it should not be manually added in the page editor.

<h2> Heading 2

<h2> is the first heading that users can manually add to a page.

<h3> Heading 3

<h4> Heading 4

<h5> Heading 5

<h6> Heading 6

Heading Usage

Adding Headings

1. Open a widget in the editor.
2. Enter desired heading text and highlight, or highlight existing text you wish to reformat. This text should be on its own line, separate from regular paragraphs and other headings.
3. With the text highlighted, navigate to "Formats" in the editor menu.
4. In the submenu, select "Headings," then choose a heading from resulting options.
5. Save changes before closing the widget.

Links

The CSUDH site has a default setting for links that adjusts the color to burgundy (HEX #860038) and adds an underline.

Example

Clear and descriptive links are critical so the user understands the purpose and/or destination.

Link Usage

Adding Links

1. Open a widget in the editor.
2. Add and highlight the text you wish to link.
3. With the text highlighted, navigate to "Edit" and then select "Insert Link." You can also select the link icon in the toolbar, titled "Insert/Edit Link."
4. Add your destination URL in the "URL field." Keep target set to none. The title should be informative, such as the destination's page title.
5. Select "Ok" to return to the widget window.
6. Save changes before closing the widget.

Buttons

The main call to action on a page will often be found in the form of a button. Examples are:

• Registering for an event
• Submitting a form or response
• Downloading a file

<a class="button-default" href="URL Goes Here">Default Button</a>

<a class="button-ghost" href="URL Goes Here">Ghost Button</a>

Button Usage

Adding Buttons

1. Open a text-editing widget in the editor.
2. In the widget menu, open the "Tools" menu and select "Source Code."
3. Copy the button codes from this page and add where needed.
4. Replace URL Goes Here with the destination URL e.g. .
5. Select "OK" to close the Source Code window.
6. Save changes before closing the widget.

Notification Bars

Notification bars and labels are used to denote additional useful or time-sensitive content. Use no more than 3 in total on a page.

 <p class="note">Add your note text here.</p>
         

                 <p class="alert">Add your alert text here.</p>
                 

Notification Bar Usage

Adding Notification Bars

1. Open a text-editing widget in the editor.
2. In the widget menu, open the "Tools" menu and select "Source Code."
3. Copy the notification bar codes from this page and add where needed.
4. Replace Add your note/alert text here. with your text.
5. Select "OK" to close the Source Code window.
6. Save changes before closing the widget.

Blockquotes

Blockquotes are used for breaking up large sections of text, as well as setting tone and ambience on a page. They work well for:

• featuring quotes where appropriate,
• emphasizing a distinctive passage or the main takeaway of the page,
• or introducing a key value that contributes to the unit鈥檚 mission or the university鈥檚 strategic plan.

Limit the quote to about 10 lines on desktop (including line breaks and quote credit, if applicable).

We are a community of lifelong learners dedicated to discovery and personal growth and the ongoing development of skills and talents, cutting-edge research, and artistic contributions that serve to strengthen the cultures and communities of which we are all a part.

CSUDH Strategic Plan

 <blockquote> 
                <p>This is an example of a blockquote inside a blockquote-container. Separation between surrounding content is more defined.</p>
                <! --Optional credit line --> 
                <span>Author Here</span>
        </blockquote>
         

Adding Blockquotes

1. Open a text-editing widget in the editor.
2. In the widget menu, open the "Tools" menu and select "Source Code."
3. Copy the blockquote code from this page and add where needed.
4. Replace This is an example of a blockquote inside a blockquote-container. Separation between surrounding content is more defined. with your quote.
5. Replace Author Here with your citation, or delete the entire <span> tag if not applicable.
6. Select "OK" to close the Source Code window.
7. Save changes before closing the widget.

Horizontal Rule

Use horizontal rules or <hr> to define a transition in topic or to break up sections such as horizontal-layout events. Example shown above this section's title.

Adding Horizontal Rules

1. Open a text-editing widget in the editor.
2. Place the cursor where the horizontal rule should appear.
3. In the widget menu, open the "Insert" menu and select "Horizontal line."
4. Save changes before closing the widget.

You can also:

1. Open the widget menu's "Tools" menu, select "Source Code."
2. In the Source Code window, add <hr>where needed.
3. Select "OK" to close the Source Code window.
4. Save changes before closing the widget.

Event Block

The two-column event list allows for an image at left and text at right.

• Use the single row for when you have up to two events to list.
• Use the event grid when you have more than two events to list.听
• To make one event stand out among four or more, feature it in a single row above the grid, as shown in the following example.

Single Row for One or Two Events

Title of Event Here

听 00:00 a.m./p.m. | 听 Building Room

Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here.

RSVP for Toro Industry Days

Event Grid for Two or More Events

ASI Spring Fling

听 Month DD, YYYY | 听 00:00 a.m./p.m. | 听 Building Room

Browse the night market, with dozens of local vendors and games. Close out the evening with a live performance by a special musical guest.

Spring Concert Series

听 Month DD, YYYY | 听 00:00 a.m./p.m. | 听 Building Room

Featuring our very own faculty and students.

Resume Workshop

听 Month DD, YYYY | 听 00:00 a.m./p.m. | 听 Building Room

Build from scratch or bring in your latest draft. Learn how to craft a concise elevator pitch. Snacks provided.

Text-Only Event Block

No relevant images for your events? Have multiple instances of the same event? Use this imageless variation to prioritize the dates.

Inside the Event Block

Image

Title

The title is automatically styled and should not be changed. Titles should be linked to the same destination as the button, typically a registration page on Toro Link.

If you are not providing any links in your event block, remove the <a> tag from the title.

Date and Time

The event-dateline class will style this <p> tag with burgundy and adjust the top margin.

Event Description

The event-description class will help you keep your description succinct, as it truncates the text after 3 lines. Save your full schedule, speaker bios, and other details for the dedicated event page (Toro Link, Eventbrite, etc).

Button

Link to your event's registration or full details page by updating the <a> tag with your destination URL.

• Use the default-button class when listing just one event block or when you want to prioritize one out of the rest.
• Use the ghost-button class when listing two single-row events that have the same priority.

Event grids do not use buttons since they are all competing for attention. The event title serves as the main link.听

<div class="event-row-single"> 
        
                <div class="event-image">
                <!-- If you are using a link for this event, add it to this image by replacing the # below. --> 
                                <a href="#" rel="noopener noreferrer" target="_blank">
                                <!-- Image should be 700x350px, or larger ratio of 2:1. To add your image, replace the URL in the src quotes below with the CM1 asset path. Don't forget to update the alt text. --> 
                <img src="/Assets/csudh-sites/brand/images/web/25-web-placeholder-event-700x350.png"
                                width="100%" alt="Toro Industry Day with Kathy     Lara and Nicolas Cisneros">
                </a>
        </div> 
        
                <div class="event-details">
                        <!-- Title of Event -->
                                <h3 class="grid-content-title">Title of Event Here</h3> 
                                <!-- Month DD, YYYY | HH:MM a/p.m. --> 
                <p class="event-dateline">January 01, 20XX | 1:30 p.m</p> 
                <!-- Event Description. Text truncates after 3 lines. Save full details for registration page. --> 
                <p class="event-description">Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here. Description of event here.</p> 
                <!-- Button for RSVP. Label to show where user will go or do. Do not use "Read More". Replace # below with your URL -->
                <a class="button-default" href="#">Event Details</a>
        </div>
                
</div>

<div class="event-grid-container">

        <div class="grid-col">
                <div class="event-image">
                        <!-- Image should be 700x350px, or larger ratio of 2:1. If you are using a link for this event, add it to this image by replacing the # below. --><a href="#" rel="noopener noreferrer" target="_blank" title="CSUDH">
                        <img alt="Toro on grey background" height="auto" src="/Assets/csudh-sites/brand/images/web/25-web-placeholder-event-700x350.png" title="Placeholder Image" width="100%" /></a>
                </div>
                
                <div class="grid-content">
                        <!-- TITLE OF EVENT -->
                        <h2 class="grid-content-title hover-title"><a href="#">ASI Spring Fling</a></h2>
                        <!-- DAY, MONTH DD, YYYY | HH:MM p.m. -->
                        <p class="event-dateline"><i class="fas fa-calendar" aria-hidden="true"> </i> Month DD, YYYY | 
          <i class="fas fa-clock" aria-hidden="true"> </i>
          00:00am/pm PDT</p>
                        <!-- EVENT DESCRIPTION -->
                        <p class="event-description">Browse the night market, with dozens of local vendors and games. Close out the evening with a live performance by a special musical guest.</p>
                        </div>
        </div>
        
        <div class="grid-col">
                <div class="event-image">
        <!-- Image should be 700x350px, or larger ratio of 2:1. If you are using a link for this event, add it to this image by replacing the # below. -->
        <a href="#" rel="noopener noreferrer" target="_blank" title="CSUDH"><img alt="Toro on grey background" height="auto" src="/Assets/csudh-sites/brand/images/web/25-web-placeholder-event-700x350.png" title="Placeholder Image" width="100%" /></a>
        </div>
        
                <div class="grid-content">
                <h2 class="grid-content-title hover-title"><a href="#">Spring Concert Series</a></h2>
                <p class="event-dateline"><i class="fas fa-calendar" aria-hidden="true"> </i> Month DD, YYYY | 
          <i class="fas fa-clock" aria-hidden="true"> </i>
          00:00am/pm PDT</p>
                <p class="event-description">Featuring our very own faculty and students.</p>
                </div>
        </div>
        
        <div class="grid-col">
                <div class="event-image">
        <!-- If you are using a link for this event, add it to this image by replacing the # below. --><a href="#" rel="noopener noreferrer" target="_blank" title="CSUDH">
                        <!-- Image should be 700x350px, or larger ratio of 2:1. To add your image, replace the URL in the src quotes below with the CM1 asset path. Don't forget to update the alt text. -->
                        <img alt="Toro on grey background" height="auto" src="/Assets/csudh-sites/brand/images/web/25-web-placeholder-event-700x350.png" title="Placeholder Image" width="100%" /></a>
        </div>
        
                <div class="grid-content">
                        <h2 class="grid-content-title hover-title"><a href="#">Resume Workshop</a></h2>
                <p class="event-dateline"><i class="fas fa-calendar" aria-hidden="true"> </i> Month DD, YYYY | 
          <i class="fas fa-clock" aria-hidden="true"> </i>
          00:00am/pm PDT</p>
                <p class="event-description">Build from scratch or bring in your latest draft. Learn how to craft a concise elevator pitch. Snacks provided.</p>
                </div>
        </div>
        
        </div>

Add the Event Blocks to Pages

1. Open a text-editing widget in the editor.
2. In the widget menu, open the "Tools" menu and select "Source Code."
3. Copy the single event row code from this page and paste where needed.
4. Add in the image: Locate <img> tag and replace the URL in quotes with your CM1 image path. It will be something like "/Assets/csudh-sites/department/images/image-name.jpg."
5. Add alt text: Replace the alt text in quotes with a concise description of the image. If the image contains text, the alt text should state it.
6. Link the image (if applicable): locate <a href="#" rel="noopener noreferrer" target="_blank"> and replace # with your destination URL.
7. Add the event title: replace Title of Event Here with the event title.
8. Link the event title: If applicable, replace the # in the title's <a> tag with the URL.
9. Select "OK" to close the Source Code window.
10. Save changes before closing the widget.

News Block

Featured news should provide teaser text and link to the full story on another page.

News Grid with Images

News Story One

Month DD, YYYY

Browse the night market, with dozens of local vendors and games. Close out the evening with a live performance by a special musical guest.

News Story Two

Month DD, YYYY

Featuring our very own faculty and students.

News Story Three

Month DD, YYYY

Build from scratch or bring in your latest draft. Learn how to craft a concise elevator pitch. Snacks provided.

Text-Only News Grid

Labels

Use labels to indicate a new offering. They can be applied to headings and regular text.

This H2 Heading Introduces Something New

This H3 Heading Introduces Something New

This burgundy badge indicates that something has closed or is unavailable. Closed

This green badge indicates that something is open or available. Open

Note This note badge is used at the beginning of a paragraph to highlight an important line of text.

Accordions

Use accordions to nest content that is applicable to specific audiences.听

For example, a page detailing the steps reporting work hours for student assistants and full time staff may be different. Student assistants can quickly find the appropriate accordion by title and open it to reveal the information inside. Otherwise, the student assistant has to wade through all employee steps (if they are listed first on the page), which increases cognitive load.

Because users will only need the information in one of the accordions, the remaining information can be condensed and effectively hidden in the accordion.

Accordion Usage

Add the Accordion to Pages

<div class="perc-widget">
                <div class="csudhAccordionSection">
                        <div class="accTitle">Accordion Title</div>
                        <div class="accContent">
                                <div class="rxbodyfield">
                                <p>Accordion content goes here.</p>
                                </div>
                        </div>
                </div>
        </div>

Image Cards

Pages that act as a hub for links can feature image cards for visual interest.听

Overlay Cards

It is recommended to limit use of these cards to 6 items. Photos should be relevant to the linked pages (e.g. a photo of a student in a car linked to a page about parking).

Stacked Image Cards

Use these cards when more than 6 cards are needed. The separation of image and text makes it easier to skim through the list.

Card One

Card Two

Card Three

Card Four

Card One

Card Two

Card Three

Card One听

Card Two