Accessibility
Formatting of text and content must follow Accessibility Guidelines to comply with federal Section 508 standards.
- Inaccessible text will be immediately fixed upon discovery.
- Any file discovered that is not accessible will be removed 1 week after notification to ensure federal compliance and more importantly, access for people with disabilities.
Image Sizes
- Images are in a 16:9 ratio. Aim for maximum size of 825 x 464 pixels.
- Resolution should be 96 or 150 pixels.
- Have less than 20% text.
- Color contrast must be clear.
Hero Images
- New Size - Hero Image for Interior Page: 825 x 464 pixels
This new size matches the standard maximum size, and image ratio of 16:9. - Hero Image for Landing Page: 1355 x 870 pixels
Standard Images
Images fit in all designs at a 16:9 ratio. Crop and save images on pages.
- Large: 825 x 464 pixels. Maximum size for all images.
- Medium: 640 x 360 pixels. Use with Carousel snippet and Video component.
- Small/Thumbnail: 480 x 270 pixels. Use with Generic Block - Image List snippet and Card Slider snippet.
Biography Images
All images in on the biography pages will be displayed in a square format.
- Square: 480 x 480 pixels
Web Styles
These web styles are already built into the SMC Content Management System.
Headings use Poppins:
Heading 2
Heading 3
Heading 4
Paragraph text uses Proxima Nova and can be displayed in both bold and italic when necessary.
Samples of Text Formatted for the Website
Bulleted Lists
These should be used for any list of items that do not need to follow a chronological order.
- List item.
- List item.
- List item. etc.
- Sub-List item.
- Sub-List item.
- Sub-List item. etc.
Ordered Lists
These should be used for any list of items that need to follow a chronological order.
- List item.
- List item.
- List item. etc.
Links and Buttons
Links are indicated by the SMC blue color and an underline.
Links to external, non-SMC, websites should open in a new browser window or tab.
Links to documents like PDF files or Microsoft documents should also open in a new browser window or tab, and include an icon to indicate the type of file they are linking to:
Link to a PDF File.
Link to a Microsoft Word Document.
"Call to Action Buttons" are used to stand out from the text on the page and indicate special links.
"Grid Buttons" are used to display a list of buttons that need to stand out as graphic navigation to sub-sections of a main page or section. They can be split into horizontal lists of 1, 2, 3, 4, 5, or 6 across:
Tables
Tables should be used for tabular data only. Tables are not used to visually organize the content on the page. Tables need to conform to Accessibility Guidelines, please contact the Web and Social Media Office to help format tables properly.
Examples of approved table styles:
Default Table
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| First Column Cell | Table Cell | Table Cell |
| First Column Cell | Table Cell | Table Cell |
| First Column Cell | Table Cell | Table Cell |
| First Column Cell | Table Cell | Table Cell |
Data Table
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| First Column Cell | Table Cell | Table Cell |
| First Column Cell | Table Cell | Table Cell |
| First Column Cell | Table Cell | Table Cell |
| First Column Cell | Table Cell | Table Cell |
New Design Tools
- Assets – pre-made, specific content that can go on many pages, like forms and embed codes.
- Components – form-based templates, like buttons, galleries, and buttons
- Snippets – table-based templates, like accordions, carousels, and tables.