Text Styling (H2 Header)
Text Edit Coloring (H3 Header)
Text can be colored for editing purposes ONLY please or a highlight line color can be added. Use these editing features for content in DRAFT only. Remove any color before Publishing.
Text Formatting from other Sources
Text may retain formatting if copied from other sources or text documents as show in the examples below.
Model Hiring Principles and Processes: Principles and practices compiled by faculty, administrators, and chief human resource officers. Resources are separated into pre-hiring, hiring, and post-hiring modules.
Model Hiring Principles and Processes: Principles and practices… This second link shows text copied from a formatted document. The text pasted into this web page is retaining some of the formatting so the link doesn't show the website styling as show above.
Styling anomalies can be avoided by pasting text into the web page without formating, Ctrl + Shift + V (mac Shift + Option + Command + V).
Text Indents
Text can be indented. Netus et malesuada fames ac turpis egestas. In dictum non consectetur a erat.
Laoreet sit amet cursus sit amet dictum.
Massa enim nec dui nunc. Venenatis tellus in metus vulputate eu scelerisque.
Quote Text
This is a quote. Metus vulputate eu scelerisque felis imperdiet proin. Ut lectus arcu bibendum at varius vel. Lorem ipsum dolor sit amet. Morbi tristique senectus et netus et malesuada fames. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Condimentum lacinia quis vel eros donec ac odio tempor orci.
Massa enim nec dui nunc. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Aliquam eleifend mi in nulla. Netus et malesuada fames ac turpis egestas. In dictum non consectetur a erat. Laoreet sit amet cursus sit amet dictum.
- This shows a bulleted list with a nested numbered list.
- At urna condimentum mattis pellentesque id nibh tortor id aliquet.
- Risus nec feugiat in fermentum posuere.
- Quam quisque id diam vel.
- Quam pellentesque nec nam aliquam sem et tortor.
Faucibus vitae aliquet nec ullamcorper. Risus commodo viverra maecenas accumsan lacus vel facilisis. Massa enim nec dui nunc. Venenatis tellus in metus vulputate eu scelerisque
- At urna condimentum mattis pellentesque id nibh tortor id aliquet.
- Risus nec feugiat in fermentum posuere.
- Quam quisque id diam vel.
- Risus commodo viverra maecenas accumsan lacus vel.
- Risus nec feugiat in fermentum posuere.
- Ultrices tincidunt arcu non sodales neque sodales. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Faucibus et molestie ac feugiat sed lectus vestibulum mattis. Integer quis auctor elit sed vulputate mi sit amet.
Line Separator
Horizontal lines can be added.
Aliquam eleifend mi in nulla. Netus et malesuada fames ac turpis egestas. In dictum non consectetur a erat. Laoreet sit amet cursus sit amet dictum.
Buttons
A button can be added to text. You can copy these and update the link and styling or create your own.
- Target- "–self" for linking to a page within this website. Use "_blank" for linking to pages outside of this website which will open in a new browser window.
- Font Size- Make font large enough so it is easily readable. Using all caps helps the button look retain a simple, clean appearance. The text may need to be bold also as I show in these samples.
- Border Radius- this is the amount of curve on the button corners.
- Padding is the space between the text and button edge.
- Background- this is the color of the button. Please use ASCCC colors listed below. Make sure the button text color has enough contrast for accessibility. You can use the WebAim Contrast Checker if needed.
It is preferable if you use ASCCC brand colors for the button:
- ASCCC Purple #8955a5
- ASCCC Bright Teal #24b7a9
- ASCCC Dark Teal #006c70
- ASCCC Blue #4a83c4
- ASCCC Dark Blue #044c7f
- ASCCC Berry #b92083
- ASCCC Dark Berry #7d1f5c
- ASCCC Orange HEX #f05a28
Adding Images into Text
Add images using the image icon on the right, using the old Media Browser. Using this will not have image wrap capabilities so please ping Kyoko or Katie to help with this.
The text offset will need to be hand coded. (style="padding-right:10px" added to source code)
Pellentesque sit. Urna et pharetra pharetra massa massa ultricies mi quis hendrerit. Ut tellus elementum sagittis vitae et. Arcu cursus vitae congue mauris. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Imperdiet dui accumsan sit amet. Orci nulla pellentesque dignissim enim sit. Dolor purus non enim praesent elementum.
H4 header Style
Pretium nibh ipsum consequat nisl vel pretium lectus quam. Id semper risus in hendrerit gravida rutrum. Amet aliquam id diam maecenas. Neque gravida in fermentum et. Diam maecenas sed enim ut sem viverra. Orci ac auctor augue mauris. Lacinia quis vel eros donec ac odio tempor orci dapibus. Et magnis dis parturient montes nascetur ridiculus mus mauris.
Table of Contents
A sidebar Table of Contents can be added by Kyoko if needed as shown on this page. This is useful for event programs or very long pages with a lot of header subjects.
You can also add a Back to Top anchor link. Again we can help do this if needed.
End Note Anchor Links
This paragraph anchor links down to the bottom end note. That note clicks back here. [1]
Heading 2 with anchor link. [2]
The h2 end note links down to bottom anchor but doesn't click back.
Heading 2 with floating anchor.
[2b]
Next element needs to have float 'clear' added as style.
Heading 3 with floating anchor.
Test anchor in paragraph tag. [3]
The div is display inline, the h3 is float left. The paragraph end note doesn't link down but does link back.
Main Content Accordion
An accordion can be added to pages with a lot of extra content like the Guided Pathways Task Force page.
- Test Accordion One
-
Accordion content 1. Eget velit aliquet sagittis id consectetur. Quis viverra nibh cras pulvinar mattis nunc sed blandit. At tempor commodo ullamcorper a lacus vestibulum. Nibh sed pulvinar proin gravida hendrerit. Eget felis eget nunc lobortis mattis. Enim facilisis gravida neque convallis a. Libero enim sed faucibus turpis in eu mi. Facilisi nullam vehicula ipsum a. Enim neque volutpat ac tincidunt vitae.
- Test Accordion Two
-
Accordion content 2. Enim facilisis gravida neque convallis a. Libero enim sed faucibus turpis in eu mi. Facilisi nullam vehicula ipsum a. Enim neque volutpat ac tincidunt vitae. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tables
A Table can be added if needed. For accessibility the first row must be styled as the Table Header with content in each cell. The main table can have empty cells if needed.
Euismod lacinia at quis risus sed vulputate odio ut.
Tristique sollicitudin nibh sit amet. Porttitor leo a diam sollicitudin tempor id. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. In cursus turpis massa tincidunt dui ut ornare lectus. Justo donec enim diam vulputate. Enim nulla aliquet porttitor lacus.
| Dolor Sit Amet | Euismod lacinia |
|---|---|
| tristique sollicitudin nibh sit amet | vulputate enim nulla aliquet porttitor |
| nulla aliquet porttitor lacus | donec enim diam vulputate |
| cursus turpis massa tincidunt | porttitor leo a diam sollicitudin |
Katie or Kyoko can add more styling to the table if needed.
| Gender Identity | Applicant Pool (%) | Appointed (%) |
|---|---|---|
| Female/Feminine Presenting | 60 | 60 |
| Gender Fluid | 2 | 2 |
| Male/Masculine Presenting | 31 | 31 |
| Other/Prefer Not to State | 7 | 7 |
Footnotes
1. Footnote one, in body text.
2. Footnote two, on the end of a heading. Link back to location in content doesn't work.
2b. Footnote two B, on the end of an h2 heading. Link back works. Paragraph margin set so anchor aligns w/heading text.
3. Footnote three, on the end of a heading put in a paragraph tag and combined with the heading tag with a div. It still doesn't link back to location in content.