Search

Using Images in Mega Panels

Page

A flexible Mega Panels layout works best when images are properly sized.  An example use-case would be having three panels in a row, each with an image that fills the width of each panel. 

Screenshot of three panels, each with an example image filling the space inside

In order for the image to fill the space allowed in the panel, create the images with the correct width to correspond with the size of the panel.

Typography

Page

Iowa State University has digital font recommendations. One of these recommendations is to use the font called Nimbus Sans. This font is available through Adobe Typekit. ISU has a license to use the font for digital development. Nimbus Sans is the base font for the Suitcase theme. The font family is indicated in CSS as follows: 'Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

Clear Contrast

Page

Text and links in the Suitcase theme have sufficient color contrast with the background. We help content editors maintain this standard by not allowing them to change text color.

Example: Text links are red (hex color code: #cc0000). This red has a contrast ratio of 5.89:1 with a white background which meets the WCAG AA standard of 4.5:1.

clear contrast checker

Meaningful Content

Page

HTML elements like headings, subheadings, lists, and tables carry important meaning, and the correct use of these elements improves the experience and navigation for all users. Suitcase is built on a semantic HTML foundation, and content editors are equipped with the tools to create content with a meaningful structure.

Screencapture of a text editor showing proper use of Headings

Keyboard Navigation

Page

Suitcase sites can be navigated with just a keyboard. How?

  • Users can use the Tab key to move through menu items, links, and form elements in a logical sequence.
  • All menu items, links, and form fields have a clear visual indicator for the currently focused item.
  • Content editors are instructed to make sure their links provide clear context for where a link will go. (Instead of just 'click here')
  • Keyboard navigators also have the option to bypass long navigation menus and 'Skip to Main Content'

 

DrupalCon

Event
Monday, April 24, 2017 - 8:00am to Friday, April 28, 2017 - 5:00pm
Location: 
Baltimore

The Biology IT team will be heading to Baltimore to learn about the latest developments, techniques and advances with Drupal 8.

Event Type: 
Meeting

Pages