Content Selection

In many of our interfaces, we provide a way to select content items to take action on or to reveal additional details.

Content Selection

Unlike selection states on form fields or navigation (universal, tabs, filter panels), content selection is usually directly associated with the primary action. Because of this, content selection uses variations of our primary action color: Action.


State Indications

Selectable content items have three states: unselected, hovered and selected. Selection states are indicated with visual attributes including: Select Background, Select Edge, Select Outline, Select Mark and supported by increased text contrast.

One or more selection state indications should be used at a time. Context determines which indications are appropriate. For common cases, see the examples below.


Select Background

Select Background is the color of the item’s region. A Select Background color is determined by state.

Use Select Background for text-based selectable regions with visible backgrounds.

Select Background

Select Background should stretch to the edges of the affected region.

Select Background - Do / Don’t

Division lines adjacent to a selected (or hovered) region should be replaced by bold (2px) Level 0 lines.

Select Background - Do / Don’t


Select Background Colors

Use these colors for with respective states in appropriate environments for Select Background.


LE Selection Bg

rgba(230, 247, 255, 1.0)

LE Selection Bg Hover

rgba(240, 250, 255, 1.0)

DE Selection Bg

rgba(0, 56, 82, 1.0)

DE Selection Bg Hover

rgba(0, 44, 64, 1.0)


Select Edge

Select Edge is a thick (4px) stripe on one end of a selected item. A Select Edge color is determined by state.

Use Select Edge for selectable regions, especially when indicating an associated content panel.

Select Edge

If a selection does not reveal an additional content panel, the Select Edge should be on the left of the region for vertical lists and on the top of horizontal lists.

Select Background - Do / Don’t

When a selection reveals additional content panel, the Select Edge should always be on the side adjacent to the revealed content. This helps associate the item with the content and is consistent with tab navigations.


Select Edge Colors

Use these colors for with respective states in appropriate environments for Select Edge.


LE Selection Edge

rgba(0, 156, 227, 1.0)

LE Selection Edge Hover

rgba(127, 215, 255, 1.0)

DE Selection Edge

rgba(0, 156, 227, 1.0)

DE Selection Edge Hover

rgba(0, 103, 150, 1.0)


Select Outline

Select Outline is a thick (4px) outline to indicate selection state on visual content, such as video thumbnails or images. A Select Outline color is determined by state.

Use Select Outline for selectable visual content that does not have a visible background.

Select Outline


Select Outline Colors

Use these colors for with respective states in appropriate environments for Select Edge.


LE Selection Outline

rgba(0, 156, 227, 1.0)

LE Selection Outline Hover

rgba(0, 156, 227, 0.5)

DE Selection Outline

rgba(0, 156, 227, 1.0)

DE Selection Outline Hover

rgba(0, 156, 227, 0.5)


Select Mark

Select Mark is a prominent indication that multiple items in a group can be selected at the same time.

Use Select Mark to designate Multi-Selection mode. The Select Mark should only be used with Multi-Selection.

Select Mark


Text Contrast

Increased text contrast supports focus.

Use increased text contrast for selected and hovered states of text-based selectable items. On the flip side, unselected items may have reduced contrast to support the selected item.

Text Contrast


Multi-selection

Multi-selection is a mode for selecting and taking action on several items at the same time.

Multi-Selection Mode Shift

This primary action should present itself when the first of multiple actions is selection. The action state change and use of the Action color reinforce the relationship between the items and the action.

Multi-Selection


Examples

Below are common examples of selectable groups of content that require with recommendations for state indications.

Selection with Content List


Selection with Table Row


Selection with Visual Grid


Complex Selectable Regions

Selectable regions without sub-actions or additional states are easier to use and to design. While it is encouraged to use selection alone, it isn’t always practical for robust interfaces.

Selectable regions sometimes require sub-actions (buttons, links) and different states (such as expansion and activation). In cases such as these, selection indications should be handled very delicately.


Implementation

The color values for Select Background, Select Edge and Select Outline are available for web, iOS, Android and React Native.

The Select Mark icon is available in Sketch.


Uniform Icons

A Sketch file with the starter set of icons used to design Hudl interfaces.