This page shows examples of how various IT Connect formatting guidelines are used.
Please do not save any changes you make to this page.
- Page table of contents
- Important message box
- Procedure of steps and actions
- Buttons and calls to action
- Code snippets
- Blockquotes
- Related content, service catalog, and forms
- Icon box grid
- Cards with photos
- Accodion
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 ———-
———- 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 ———-
- Start with an ordered/numbered list of setps
- They will be given headings of Step and Action and wrapped in a box
- 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 ———-
———- 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.
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.
[itc_cards]
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 ———-
Section
Section
Section
———- End Copy/Paste ———-