Body Standards

The page body, located below the agency header, includes global navigation, breadcrumb trail, main content area and any other content areas. Layout and organization of the page body is at the discretion of the agency. The page body uses:

  • A background color of white (#FFFFFF).
  • Text based headers (H1 - H6) rather than graphics to provide for accessibility.
  • Headers that provide sufficient contrast for accessibility.

For more information please read, State of Alaska Website: Look and Feel Standards (doc)

CSS

This guide uses a development version of the CSS, for production system please reference the minified versions:

<link href="//webcontent.alaska.gov/style/soa/20141010/alaskaGov.min.css" type="text/css" rel="stylesheet" media="all">

<link href="//webcontent.alaska.gov/style/soa/20141010/print.min.css" type="text/css" rel="stylesheet" media="print">

Page Content Examples

Below are several examples using the State of Alaska CSS to style content.

Header Examples

Header1 <h1>

Header2 <h2>

Header3 <h3>

Header4 <h4>

Header5 <h5>
Header6 <h6>

Any header can be a section header and given a bottom border. Example:

Section Header6 <h6 class="sectionHeader">

Link Example

Default Link

Please note that link behavior in a paragraph differs from default.

Link Example within a paragraph.

List examples

Standard unordered list <ul>

  • blah
  • blah
  • blah

Unordered list with no bullets <ul class="noBullet">

  • blah
  • blah
  • blah

Standard ordered list <ol>

  1. item #1
  2. item #2
  3. item #3

Definition List

Term #1
Definition of term #1
Term #2
Definition of term #2

Paragraph Examples

This is a standard paragraph with several lines of text. Please note that with some other items on the page that the standard width is too long to be comfortable scanned/read. This will pose problems for some users. It is recommended that other layout elements be used to create a satisfactory reading experience.

This is a paragraph to demonstrate the behavior of links within a paragraph.

Reusable Classes

There are several useful reusable classes that are consistent on many State of Alaska web pages.

For extra top space on elements that need to stand out visually. <p class="space"> (Please only use on non-header elements as it will remove the margins on headers.)

Floats & Clearing

This paragraph floats left <p class="left">

This paragraph floats right <p class="right">

This paragraph clears both floats <p class="clear"> (Often empty <div class="clear"></div> are used to correctly lay out content after floats are used.

Hidden

For accessibility a hidden class will be used to move content off the visible screen. <p class="hidden"> (Obviously not done on this paragraph or the text would not be displayed. Please check source for example code.)

Columns

Columns can be used to help lay out content on the page. Typically these will be <div> tags that are floated to one side or another.

Columns 1 of 2 <p class="column left">

Column 2 of 2 <div class="column left">

Wide Column 1 of 2 <p class="columnWide left>

Wide Column 2 of 2 <p class="columnWide left">

3-Columns 1 of 3

<div class="column3 left">

3-Columns 2 of 3

<div class="column3 left">

3-Columns 3 of 3

<div class="column3 left">

Please remember to clear after floating columns to prevent odd layout issues.

<div class="column clear">

Center

To center text you can use a center class. This is generally not recommended for headers or paragraph text, as it does not create a visual edge for the reader to scan. However, it can be used occasionally to draw attention to specific text or an image.

Example <p class="center">

Example with image <p class="center">

Box

To separate content into a container with a border use class="box"

Example #1: Box without a header <div class="box">

Example Box with header

Example #2: Box with a header (use <h2>)

Example Box with header

Example #2: Box with a header <h2>

Header 2 is generally used outside the box elements, but can be use in the box, but needs to be adjusted.

Example Box with Boxtop and Header

Example #3: Box with top <div class="box boxTop"> and header <h3>

Puts a larger border on the top of the box when needed.

Please note that I have added a 20px top margin to each <div> tag above so that they will display clearer

Alternative Layouts

If your content would be served with a two (or three) column layout. You can use <div> tags with ID's of main and sidebar (and optional columns in main as indicated below.

Main

Content is inside <div id="main">

Main can be separated into columns

<div id="col_one">

<div id="col_two">

Please note that I have added borders to the <div> tags above so that they will be easier to see. The CSS does not have borders.