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.