Page Elements Example

This box is a WYSIWYG editor, which stands for "What You See is What you Get." It allows users to edit content without forcing them to utilize HTML code to do so. Any good WYSIWYG will contain styling buttons at the top (just like a word processor) to assist you as you create your copy. Something to Note: if you decide to paste text into a WYSIWYG, it will attempt to recreate the styling from the document from which you copied the text. This can create some strange styling issues.  For that reason, it is important to utilize the "Paste as plain text" icon in the WYSIWYG buttons at the top of this editor (it looks like a clipboard with a little "T" in the bottom right-hand corner). 

But What About Styling? (Note the Header to Denote a New Section)

While the default for body copy is style-free, body copy can be styled for distinct purposes, such as: 

  • Lists! (for reference, this is called an "unordered list." It is useful for lists that are too cumbersome to write out in the body of a paragraph. 
  1. This is a different type of list, called an "ordered list." it is useful for listing steps in a process (for example: a grant proposal)
    1. Lists can also be "nested." Nesting a list in the WYSIWYG is the same process as nesting a list in word processor (hit "enter," then "tab" while the list is toggled)  
  2. hitting "enter" twice, will return end your nested list and return you to the level above.
  • Ordered and unordered lists are to be used when a list includes whole phrases. 

Emphasis

When emphasis is needed, copy should be bolded. If at all possible, this should be limited to one or two words. Please do not bold whole sentences, and please do not add extra styling (i.e. italics or underline, ALL CAPS). And please do not add color to any copy. There are specific best practices when utilizing color in web copy (this is for Accessibility concerns and the colors on our website were chosen specifically to comply with those concerns). 

Works of Art, Song Titles, Publications, Etc.

As per the Department style guide, major titles (such as The Grapes of Wrath) are italicized in running copy. This includes: 

  • Book Titles
  • Magazines and Newspapers
  • Film Titles
  • Play Titles
  • Song Titles

This does not include:

  • Website Titles
  • Program Titles (i..e The Organizational Grant Program)
  • Job Titles

Links

To include a hyperlink  to a different page (such as LA County's homepage) in running copy, you must click on the "chain" icon in the WYSIWYG buttons. To add a hyperlink:

  1. highlight the copy to which you'd like to add a link
  2. click the chain icon
  3. paste the link into the URL window. 
    • note: if this link leads to an external website, you must define the "Target." To define the target, click the middle tab (labeled "Target) and select " New Window (_blank)" from the drop down menu.
  4. While the copy is still highlighted add "underline" styling and "bold" styling to it.
    • note: this is one of the few instances where multiple styling can be utilized over a single line of copy.

Note: When including links in your copy, try to avoid "sighted" language such as phrases like "Click Here." Instead, try to include a phrase that can be used to infer where where the link will direct a user. And, if at all possible, never  paste a full length URL into running copy. If you have a specific "call to action," then:

Use a button

Text Alignment

In general, text should be "Left Aligned." The one exception to this rule is when using a phrase (such as an application deadline) that you would like to call out. In an instance such as that, single phrases can be centered. To further differentiate them, they can be offset by hyphens and bolded (another exception to the guidelines about bolded text). For example:

-Application Deadlines are important, so they should be as visible as possible- 

 

Header 1

Header 3

Header 4

This is text. Generally, it will not be styled. However, styling may be utilized for emphasis, lists, captions, and to notate works of art, publications, songs, etc. More on this later.

Hyperlink (<a> tag)

Button

 

Accordions are often used to limit the amount of scrolling that a user must d in order to interact with a webpage. They give the user agency about whether or not they want to engage with the material contained within. For example: our Second District Grant page contains two accordions at the top with info about eligibility. 1.) "Eligible Organizations," 2.) "ineligible Organizations."

This allows the user easy access, but does not force them to scroll through the information every time they visit the page. 

Note: Unfortunately, other paragraph elements can not be nested within an accordion. To nest these elements, they must be hand coded.

Text

This is a callout

Small callouts are utilized to direct folks to pages of interest (where more emphasis than a hyperlink is necessary) and important documents.