Language

Formatting Guide - (h1 - same as Page Title)

Your Guide to Perfectly Formatted Pages (Large Heading or h2)

Allenmore C Building

This document serves as an example for well "formed" documents throughout this website. Following these simple guidelines will help users to find information in a quick and simple fashion as well as help to optimize the site for search engines.

Using Headers Effectively, Medium Heading or (h3)

Dividing pages by using section headers helps to turn your content into easily digestible chucks. This page structure allows visitors to quickly scan a page for the information they are looking for.

Every page should include a Tagline, which is the h1 at the top that represents what the page is about; the should also match the page title which is defined in the "Page Title" field of page properties.

The Content field is the h2 for the page and should be a headline for the page.

The rest of the page should follow a descending structure of h2 through h3.

Content Styles, Medium Heading or (h3)

Additional styles and tags can also help to improve access to information across your site and break up the content into sections.

Links (h3)

When creating links in your content it is important to give them as much context as possible. It is best for the link to contain words directly related to the page being linked to. For example saying, "Update your contact information through our profile update form," instead of, "To update your profile click here" for a page linking to a profile update form. To take that even a step further the words "profile", "update", and maybe even "form" would be included in both the page heading h1 and in the page display name under page properties for the page being linked to.

Blockquotes (h3)

If a blockquote or indention to set off a section of text is needed, you may use either the "Align Indent" button which will use the tag BLOCKQUOTE with additional style to render text in such a manner. It indents the text by 40 pixels on the left and right and retained the other font styles of the normal text paragraphs. Other header styles may be used in conjunction with the blockquote to render headlines within the indent text, as demonstrated above. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

Unordered Lists (h3)

Unordered lists are simply bulleted lists. All styles for bulleted list have been set using the CSS. Hit return once to create a new bulleted item and hit return twice to close the bulleted list and create a new paragraph below the list. You may insert a bulleted list inside of another list to create a secondary level and outline effect. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

  • Sample list item one
  • Sample list item two that is longer than the first
  • Good style recommends having at least three bullets per list
  • But you can have more (no br / tag after the list)

No br / tag is needed after a bulleted or unordered list to space properly. All spacing is defined by the CSS.

Ordered Lists (h3)

Ordered lists are numbered bulleted lists. All styles for the ordered list have been set using the CSS. You may use the HTML editor's numbered list button to create an ordered list. Hit return once to create a new numbered item and hit return twice to close the list and create a new paragraph below the list. Ordered lists are useful for creating directions. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

List Title (strong)

  1. Sample list item one
  2. Sample list item two that is longer than the first
  3. Good style recommends having at least three bullets per list
  4. But you can have more (no br / after the list)

Images (h3)

There are several styles which can be applied to images to help format your pages.

Sample Image - Float Left

Float Left (h3)

In this example the image had a style of "float: left". This will float the image to the left so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.

Sample image - Float RightFloat Right (h3)

In this example the image had a style of "float: right". This will float the image to the right so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.

Image Radius and Margin

WordAll images on the page have a 15-pixel margin and 5-pixel radiused corners by default. You can turn these off by altering the HTML.

Turn off the round corners:

style="border-radius:0px;"

Alter the margins different ways. Here are some examples:

style="margin-top: 0px;"
style="margin: 0px 0px 10px 0px;"
style="margin-top: 0px; margin-left: 0px;"

Add the style tag into the image tag like this to turn off the round corner and the right margin:

img alt="Sample image" src="/files/library/38c520c0a702cb08_t.jpg" style="border-radius:0px; float: right; margin-right: 0;" title="Sample image"

Making a Button

Using the button class in a link will turn it into a button. Just add the class like this to the source:

<a class="btn" href="#">Call to Action</a>

Looks like this:

Call to Action

Sidebar Headline h4

The image to the left is a Large size image inserted in the Content 1 tab.

Side Column subhead

Use h4 for a Side Column subhead when needed. It's narrower horizontally than bolded paragraph text and may help fitting to the column.

Use a return before the h4, but not after.

Linked pdf documents should have an icon. This icon has the radius and margin altered.

class="pdf"

Add the above class to the anchor link in HTML to make the PDF icon visible on the document link.

MyChart Mobile

Stay better connected to your health with the MyChart mobile app.

MultiCare Virtual Care

Virtual Care

Talk to a doctor anytime

MultiCare Virtual Care gives you anytime access to a doctor through your computer, phone or our mobile app. Video, phone and e-visits available. It’s an affordable option for quality medical care.

Start Your Visit