Alerts are used to present contextual information to convey success, supplemental information, warnings, or errors.

Variants

Fully-featured examples (all the bells & whistles)

There are many add-ons to alerts, including icons, dismiss controls, and call(s)-to-action.

Okay, so we lied... these don't have all the bells and whistles. When you have one or more calls-to-action, you should not use a dismiss (×) button.

With only one call-to-action:

With primary and secondary calls-to-action:


Alerts with buttons

Thanks to a font-based icon set, adding icons is as easy as including them before any text.






Alerts with icons

Thanks to a font-based icon set, adding icons is as easy as including them before any text.

Simple alerts

Dismissible alerts

Alerts can be made to be dismissible. This is not recommended for error alerts and any alerts that contain critical calls-to-action.

Links wihtin standard alerts should be white, with an underline that disappears on hover. For contextual help links, the text decoration remains the same but, again, all in white.

Light alerts

Use Light Alerts when you don't need to be quite so bold with your message.

Alert Messages

Use Alert Messages when you need to provide some feedback, and the other variants just seem like too much.

Accessibility Callout

Accessibility Considerations for Alerts

Be sure to use the appropriate role on the alert parent container, as well as providing an alternative labeling mechanism for any "close" buttons. Be sure to make sure all calls-to-action are keyboard focusable and can be triggered in such a manner as well.

For when you have a lot of information to compartmentalize, or have other need for progressive disclosure.

Drawers

Use the links below to show and hide their corresponding content sections.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordions

"Accordions" are a set of drawers where only one can be open at one time.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Accessibility Callout

Accessibility considerations for Collapsibles

Be sure to add aria-expanded to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the in class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

Additionally, if your control element is targetting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you may add an additional aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

While not always necessary, compartmentalizing content is occasionally required. For those situations, try a content section on for size.

Basic example

A content section is an assembly of a header with an icon, and additional content – including paragraphs, lists, tables, and even video or other imagery (such as infographics).

Icon colors in content sections

Icons in section headers are intended to act as visual waypoints while supporting the WTW brand identity. As such, the icons should use colors from the WTW tertiary color palette.

Section title - Level 2

Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Section title - Level 3

Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Section title - Level 4

Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Section title - Level 5

Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

With tables

Add any non-bordered table within a bucket for a seamless look. If there is body copy under the header, an extra border is added to the top of the table for separation.

Section title

Some default section content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

If there is no section body, the component moves from section header to table without interruption.

Section title

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

One of the single biggest ways to achieve coherent branding across multiple properties—without compromising on elements like global navigation, etcetera—is with the footer.

To maintain coherence, it is recommended that you keep links to 4 - 5, floated left, inline with one another. Place the copyright information in a container that is floated right with text-align: right; applied, with the Willis Towers Watson logo below.

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Accessibility Callout

Accessibility Considerations for Modals

Auto-focus all modals

Depending on what framework you choose—or how you choose to build your own framework—you may need to explicitly set focus to modals via JavaScript. This is due to how HTML5 defines it's semantics, and how those definitions may conflict with the autofocus attribute in some cases.

You'll also want to make sure you trap focus to elements within the modal. Allowing AT users to navigate "behind" any modal might be confusing, and could also hinder them from making important decisions.

Role, and other ARIA considerations

Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself.

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

Examples

Static example

A rendered modal with header, body, and set of actions in the footer.

Live example

Modals come in three sizes. An example of each can be found below.

Remove animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Varying modal content based on trigger button

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget.

...more buttons...

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Static examples

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

You can also implement them without the Title Bar:

Popover top, aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right, aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom, aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left, aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live examples

Four directions

Contextual example – with "Dismiss on next click" enabled

Popovers can be made to dismiss themselves when you click elsewhere on the page. This is the recommended implementation for contextual-help implementations of popovers.

Raw denim jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan , butcher voluptate nisi qui.

Contextual example – when a separate control is needed

If something that already recieves an action from the customer, such as a form element with a label, requires contextual help, use an icon to invoke popovers.

Contextual Help Cursor

Through testing this cursor was developed for use on contextual help links, such as those invoking popovers and — in some cases — modals:

help cursor containing a pointing hand overlaid by a question mark
cursor: url(~/pointer-help.png) 10 0, pointer;

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Nested tabs are not allowed

This would create a confusing experience for users.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, william dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Fade effect

To give your tabs a softer – and more noticeable – interaction, add a fade effect.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, william dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Tables are for tabular data

This should go without saying, but it is important to reiterate that tables were intended for tabular data only. The use of tables for layout has long since been frowned upon in the web development industry. There are measures that can be taken to make AT read a "layout" table as such, but the best practice it to restrict the use of tables to displaying data.

Variants

Tables incorporate light padding and only horizontal dividers. It may seem redundant, but given the widespread use of tables for other widgets like calendars and date pickers, this allows for easly visual recognition of tabular data.

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Striped

Zebra-striping can be added to larger table rows when such a treatment would increase the legibility/usability of a table.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Full borders

Full borders can be added, but this treatment should obly be used when absolutely necessary.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Hover effect

As with stripes, add a hover state to rows when such a treatment would increase the legibility/usability of a table.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Condensed table

When space is at a premium, tables can be made more compact by cutting cell padding in half.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Roomier table

When space is not at a premium, tables can be made roomier by adding cell padding.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Contextual classes

Use contextual classes to color table rows or individual cells.

ClassDescription
ActiveApplies the hover color to a particular row or cell
SuccessIndicates a successful or positive action
InfoIndicates a neutral informative change or action
WarningIndicates a warning that might need attention
DangerIndicates a dangerous or potentially negative action
#Row headingRow headingRow heading
1Row contentRow contentRow content
2Success row contentRow contentRow content
3Row contentRow contentRow content
4Info row contentRow contentRow content
5Row contentRow contentRow content
6Warning row contentRow contentRow content
7Row contentRow contentRow content
8Danger row contentRow contentRow content
Accessibility Callout

Conveying meaning to assistive technologies

Using color to add meaning to a table row or individual cell only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.

Responsive tables

Create responsive tables to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, a difference will not be seen in these tables.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other widgets.

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell

When you don't have enough content for a popover, use a tooltip.

Static examples

Four options are available: top, right, bottom, and left aligned.

Live Examples

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions

Accessibility Callout

Accessible tooltips for keyboard and assistive technology users

For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a tabindex="0" attribute.

Use the well as a simple effect on an element to give it an inset effect. Small, Regular, and Large versions – with varied padding and corner-radii – are available.

Look, I'm in a small well!
I'm in a regular well!
I'm in a large well!

If you want less emphasis on the content in your Well, you can use .shallow to give a flatter appearance to your content.

I'm in a "shallow" well!