Web Style Guide

Use h1 to h6 elements only for headings. Styles should not be used to make text bold or italicized--the WYSIWYG editor should be used in those cases.




Headers

Use h1 to h6 elements only for headings. Styles should not be used to make text bold or italicized--the WYSIWYG editor should be used in those cases.

h1

 

Heading Level One

h1 styles are set in Museo typeface and are used for page titles, and placed in the header section of a page. There should only be one h1 style per page.

h2

Heading Level Two

h2 styles are set in Museo typeface and are used for section titles within a page. There can be multiple h2 styles per page.


h3

Heading Level Three

h3 styles are set in Museo typeface and are used after having used at least one h2.

h4

Heading Level Four

h4 styles are set in Museo typeface and are used after having used at least one h3.

h5

Heading Level Five

h5 styles are set in Futura typeface and are used after having used at least one h4.

h6

Heading Level Six

h6 styles are set in Futura typeface and are used after having used at least one h5.

Paragraph Text:

This is body copy set in Futura. Lorem ipsum dolor sit amet, per lorem atqui at, nam eu scripta fabulas consectetuer, vis ne graeco laboramus concludaturque. Qui cu velit ancillae omittantur. Et homero habemus molestiae has, prodesset assueverit suscipiantur id cum. Ei eos malorum constituam definitiones. Suavitate qualisque imperdiet cum ex. Ea docendi repudiare adipiscing pro




Call To Action (CTA)

CTAs are indicated by orange buttons that may read "Read More", "Download", or "xxxxxx". The use of orange is used sparingly throughout the site, to emphasize the importance of these navigational elements. CTAs appear at the end of a block of left-aligned text, and the button should be right-aligned, but may be left-aligned in some cases.

Inserting CTAs Into Webpages:

You will need the following code to insert a CTA button into a webpage. Using the WYSIWYG editor, switch to HTML, and paste this code into the area you want the button to appear. Switch the editor back to design mode and use the link manager to update the CTA's hyperlink.

<div class="buttonwrap buttonb">
<a href="#">Read More</a>
</div>



Logos

The use of AADE's logo should follow the guidelines outlined in our AADE Brand Identity and Style Guidelines.

Program or sub-brand logos are used on the website as a visual cue to the user, to help orient them with the site. These logos should be harmonious with the overall look and feel of the AADE website, and should not display larger than the AADE logo as displayed on the homepage (roughly 200x100px).

When possible, to address variations between logos, use a reversed version on a color from AADE's primary or secondary palette.

Diabetes Education Accreditation Program


In This Section

About AADE