Footer

The footer component, located at the bottom of each page, provides contact information and resource links for your visitors. The footer fulfills most of the content requirements in the VCU Web Standards and Guidelines.

Markup

Footer columns

The footer has three distinct columns:

1. Left - Required contact information
2. Middle - Optional HTML content
3. Right - Optional social media links

On smaller devices, these columns will stack vertically in this order.

The left and right columns of the footer may not be used for purposes other than displaying contact information and social media links. Site authors have the ability use the middle column as they see fit or they can leave it blank. We suggest using to link to related VCU resources under a "Helpful resources" heading.

Social icons

When implementing this component, please use the corresponding Font Awesome social media icon for the platforms below:

• Facebook - fab fa-facebook-f
• Instagram - fab fa-instagram
• LinkedIn - fab fa-linkedin-in
• Pinterest - fab fa-pinterest-p
• Snapchat - fab fa-snapchat-ghost
• Tumblr - fab fa-tumblr
• Twitter - fab fa-twitter
• Vimeo - fab fa-vimeo-v
• Wordpress - fab fa-wordpress-simple
• YouTube - fab fa-youtube
• TikTok - fab fa-tiktok

Please use the fas fa-link icon when linking to a platform not listed above.

VCU standards

Underneath the footer columns is a row of links to:

• VCU's privacy statement
• VCU's accessibility statement
• A link to email VCU's Webmaster (this must be webmaster@vcu.edu as it creates a ticket in the university's IT Support System)
• A link to view the current page in a "text-only" version
• A link to the Compass Web Framework's homepage
• A date when the page was last updated

On smaller devices, these links will stack vertically in this order.

Javascript

There is no footer specific javascript included.

T4 implementation

The footer is implemented in T4 as the "Footer" Compass content type, meaning its classes retain the .cwf- prefix.

Social icons are automatically inferred by the URL of the social links used in the content type. If an icon cannot be matched to the URL, a generic link icon is used instead.

Areas

This content type should only be used within the global "Site-Footer" section to have it displayed globally within the footer area.

Injectors

In the "Injectors" field of the footer content type, the following injectors can be used:

• id:{custom_id} - Overrides the default, T4 ID of the footer with a custom ID.
• class:{custom_classes} - Adds custom classes to the footer.
• style:{custom_styles} - Adds custom styles to a style attribute of the footer.
• before:{custom_html} - Adds custom HTML before the footer.
• after:{custom_html} - Adds custom HTML after the footer.