Search

Keyboard Navigation

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'

 

Mini Panels

The Mega Panels module bundled with Luggage allows site builders to create Panel layouts and place them in blocks. 

Example Mini Panels

In this example a Mini Panel block contains a Mega Panels layout. Each pane contains a Custom Block with a link styled as a button.

Multiple Ways to Find Pages

All content in Luggage can be found multiple ways, which makes navigating websites easier for everyone to use.

Search

Luggage's powerful faceted search allows users to search all content in a few different ways:

  • By keyword
  • By category
  • By tag
  • By content type

There's no need to know exactly where a page exists in the page structure.

Resize Text

The Suitcase theme allows users to increase the text size to up to 200%. When text is resized, it resizes proportionally and the layout of pages and components is not compromised. 

Try it yourself!

iOS: hold down Command and tap + until the text is 200% bigger.

Windows: hold down CTRL and tap + until the text is 200% bigger.

Responsive Tables

Tabular data is best displayed in HTML tables, but sometimes large tables do not fit on small screens making the table information unreadable. Suitcase Interim makes tables responsive so the layout of the tables adapt to small screens.

View a responsive table demo.

How?

When content creators add tables to their pages, news articles, or other types of content, Suitcase Interim automatically detects the table and makes it responsive. 

Table Examples

Table without headers

banana cucumber
apple green bean
orange squash

 


Table with top row header

Fruit Vegetable
banana cucumber
apple green bean
orange squash

 

Luggage Feature Examples

Note: For an overview of the many sites using Luggage, click the Showcase menu.

Below is a list of the various features available in the Luggage platform, with a few website examples for each.

Colors

Iowa State University has specific primary and secondary colors defined as part of the ISU brand standards. Essentially, these are the colors which may be used throughout the Suitcase theme.

Primary colors

#cc0000

Accessible Image Content

Per WCAG 2.0, non-text content should have a text-based alternative accessible to screen readers. Suitcase supports this standard by providing content creators with an "alternative text" (often abbreviated as alt text) field for adding image descriptions. Alt text should not be too long so that screen reader users are not inconvenienced.

Screenshot of "alternative text" field for adding image descriptions

About Luggage

Luggage was a platform for creating websites, targeted at academic websites for departments and researchers.

Note: Luggage has been superseded by the ISU Sites+ platform.

Pages