Basic page style guide

Great intro text contains facts about the page and encourages the reader to find out more. An interesting page contains maximum 3 - 4 of the page components below.

Gradient light blue to darker blue image with the words Hero banner image 1883x749 pixels in white font

Français

Scheduled transition page - 2024 09 13

Text component

This is the main content of your page and the most commonly used component on your website.

Writing for the web guidelines  H3

Here are a few writing guidelines to make your web page more readable

Write to a reading grade level of 8 or lower whenever possible  H4

This makes your website accessible to a wider range of users and allows the content to be understood by almost all, with links included


Tips for writing at lower reading grades:  H5
  • break apart sentences when possible, and keep them short
  • avoid jargon, complex words and phrases. Consider adding a glossary for terms your readers may not know
  • use headings and bullet points to break up your content into smaller chunks
  • Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG)
  • use images, illustrations, video and audio to help clarify meaning
Illustration of three individuals of difference age and ethnicities all wearing glasses.
Header size H6

Horizontal Rules



And spacing around them

 

Document links in Body component 

Copy the URL from the media page and insert link into highlighted text.

Documents in text using /sites/default/files/2026-01/PD-170-1bInclusiveEdinABSchools-ResearchReport.pdf

Documents in text using https://teachers.ab.ca/sites/default/files/2026-01/PD-170-1bInclusiveEdinABSchools-ResearchReport.pdf

Accordion component

The accordion is used to group information for a more readable and condensed page format

Node heading #1

Node text block #1 - incorporate all the information under this heading that is required. Ensure to use good writing for the web styles that are articled above

A link can also be added

Node heading #2

Continue with more information about your second item in the text block.

Table styles

Header Row Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Table body Table body Table body Table body Table body
Row 2 Table body  Table body Table body Table body Table body
Row 3 Table body Table body Table body Table body Table body

 

Style 2

Header Row Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Table body Table body Table body Table body Table body
Row 2 Table body  Table body Table body Table body Table body
Row 3 Table body Table body Table body Table body Table body

 

Column head

Header Row Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Table body Table body Table body Table body Table body
Row 2 Table body  Table body Table body Table body Table body
Row 3 Table body Table body Table body Table body Table body

 

Column head 2

Header Row Column 1 Column 2 Column 3 Column 4 Column 5
Row 1 Table body Table body Table body Table body Table body
Row 2 Table body  Table body Table body Table body Table body
Row 3 Table body Table body Table body Table body Table body

 

Use sentence case

Studies have found that it's easier for users to scan content when it is in sentence case as it allows the eye to flow better. By writing in sentence case you are actually helping your users find what they are looking for more quickly. 

Use headings to convey meaning and structure

Use short headings to group related paragraphs and to describe the sections. This provides an easier flow of reading and understanding the content for the user. Heading1 (H1) is only used for page titles and should not be used within the content. Use Heading2 (H2) to break content into smaller, more specific sections. Heading3 (h3) is used as a subheading of H2 (do not skip heading levels e.g. Heading4 (H4) should not be nestled directly under H2). It also breaks it down into smaller sections which is less overwhelming than a wall of text. It provides organization as it helps users find specific content that they might be looking for in a page.

Use lists (bullets, numbers) for groups of related items

Use numbered lists to list steps in a process. Use bulleted lists for lists of links or other information.

Here's a list example

  • item one
  • item two

Here's a numbered example

  1. first item
  2. second item
  3. third item
  4. fourth item
  5. fifth item
  6. sixth item
  7. seventh item
  8. eighth item
  9. ninth item
  10. tenth item - The Alberta Teachers’ Association, as the professional organization of teachers, promotes and advances public education, supports teachers' professional practice and serves as the advocate for its 46,000 members.

Features section one

Shaking hands at Casual Office Gathering

Features 1 header

Features section one summary text. This area uses a large image and an arrow to direct users to primary content

Features section two

Women on phone in library

Features section two—picture one

The first item in the features section two

Women writing on post-it notes

Features section two—picture two

The second item in the features section two

Features section three

Provincial Executive Council chamber a large round wooden desk lined with microphones and chairs facing the center and paintings of nature on the wall.

About PEC

Here is who is on PEC

black and white photo of a caucasian man seated on the ground in a suite, shaking the paw of a rough collie dog.

ATA History

How did the ATA start?

A blue sky background free of clouds. In the foreground is a white building with columns of blue windows. The canadian flag flies from the top of the building. The ATA logo and the text "Alberta Teachers' Association" are also on the front facade.

ATA governance

How is the ATA governed

Features section two columns thumbs

A woman in a hijab using a laptop in a library.

Picture 1—Features section two columns thumbs

The first link in the features section two columns thumbs

Teacher standing in front of a class of young students

Picture 1—Features section two columns thumbs

The second link in the features section two columns thumbs

Profile section component

A placeholder drawing of a woman with no features
Author's name

Author's position

This component is a tool used to highlight staff, local heroes, or volunteers.

Photos should be 560x560px

Text and media component

Woman working in a library
Photo credit is a great use of the image caption
 

The text and media section allows the author to add images to large text components. A meaningful, high-quality image can be a powerful tool to draw users to a page, keep them engaged, or encourage them to take action.

Image alternative text guidelines

  • Provide a short description with only the essential information of what the image represents
  • Exception: When an image is used for a button or call to action, provide alternative text that describes the function of the button (e.g. Submit the form), rather than describing the image
  • If an image including text must be used, include that text within the alternative text description of the image
  • Graphs and diagrams should be clearly summarized in the alternative text

Small call to action component

Use the small call to action to break up the content on the page. Ensure you only place this link once on the page.

Plain text page name

Workshop section component

Workshop Section subtitle

ATA executive secretary Dennis Theobald

Workshop Name

Use the description to sell your readers on signing up for this event. Insure to include the most important information like location, date, time and cost.

ATA executive secretary Dennis Theobald

Person 2

Use the description to sell your readers on signing up for this event. Insure to include the most important information like location, date, time and cost.

Hallway with exit sign highlighted

Book Example 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Multoque hoc melius nos veriusque quam Stoici. Duo enim genera quae erant,.

ATA Magazine Cover Illustration by Rachel Joan Wallis

Book Example 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Multoque hoc melius nos veriusque quam Stoici. Duo enim genera quae erant,.

Sunflowers with a bright blue sky.
Media Only component
 

Contact information component

Second Department contact

email@dept.cc

403 243-1111

Make it easy to find the contact for a staff member or organization by using this component.