Templated formatting options for IT Connect pages

Last updated: June 20, 2023
Audience: ITC Content Managers

This page shows examples of how various IT Connect formatting guidelines are used.

Use these examples as a template by using copy/paste from the “edit” screen of this page onto your own content.
Please do not save any changes you make to this page.

Page table of contents

Note: Use appropraite heading levels for accessibility and semantic HTML structure. This example uses heading level 3, which may not be appropriate for each heading you are using.

———- Start Copy/Paste ———-

Heading for section 1

Section text here…

Heading for section 2

Section text here…

Heading for section 3

Section text here…

———- End Copy/Paste ———-

Note: You can use the “anchor” icon in the toolbar to insert an anchor before the heading for the section. Use a unique name. Then, use the “link” icon in the toolbar to link to the correstponding anchor using the same unique name proceeded by a hastag (#uniquename).


Important Information Box

Use this format to highlight infomration very prominently, if you really want readers to notice it.

———- Start Copy/Paste ———-

This is a message you really want people to notice. It works best if it is at least two or three sentences long. If the message is shorter, bolding it would likely work better.

———- End Copy/Paste ———-


Procedure of steps and actions

Use this format to list out an ordered serires of steps/actions a user must take.

———- Start Copy/Paste ———-

  1. Start with an ordered/numbered list of setps
  2. They will be given headings of Step and Action and wrapped in a box
  3. Highlight the entire ordered list and select:
    Format > Formats > IT Connect Elements > Procedure

———- End Copy/Paste ———-


UW style buttons

UW Brand “Call to action” buttons that prominenty highlight links. Use sparingly to display prominent link.

———- Start Copy/Paste ———-

Call to action

———- End Copy/Paste ———-


Code snippet

Use this to place code on the page. If you paste a code sample into the visual editor, the coding elements will be converted to character codes and will display on the page (e.g., to display HTML).

———- Start Copy/Paste ———-

<div class="author-info">
       <?php the_author(); ?>
       <p class="author-desc"> <small><?php the_author_meta(); ?></small></p>
</div>

———- End Copy/Paste ———-


Block Quote

Use block quotes to highlight or stylize quotes or key information. An alternative to the important information box.

———- Start Copy/Paste ———-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam leo enim, laoreet eget tristique ac, porta at velit. Sed laoreet ex ac odio efficitur faucibus. Sed ut maximus lacus, ac dapibus lacus. Fusce ipsum nulla, malesuada in fermentum quis, lacinia nec ex.

———- End Copy/Paste ———-


Related content, service catalog, and forms

Use this box to link to related content that is elsewhere on the site (if it doesn’t show up in the left-side menu already), service catalog entries, or intake forms for UW Connect. These can not be placed on a page using copy/paste rely on the user interface for placement. Read more about how to add them here.


Icon box grid

Use the icon box grid to funnel users to other content. It presents a scannable way for users to choose options. These can not be placed on a page using copy/paste rely on the user interface for placement. Read more about how to add them here.

  • Option 1
    This is the first option, of more than one option.
  • Option 2
    This is the second option, of more than one option.

Cards with photos

Use cards with photos to add visual flare to pages and link to featured content. These can not be placed on a page using copy/paste rely on the user interface for placement. Read more about how to add them here.

Card headline for first card

Enter a description of what to expect when clicking on this cards headline or button.Call to action text

Card headline for second card

Enter another description of what to expect when clicking on this cards headline or button.Call to action text


Frequently Asked Questions

Use the accessible accordion shortcode for fequenly asked questions. The questions is the title (“Example”), and the areak between the shortcode brackets (“Section”) is the answer.

———- Start Copy/Paste ———-

Collapsable Accordion

Section

Section

Section

———- End Copy/Paste ———-