Alerts
Alerts are used to present contextual information to convey success, supplemental information, warnings, or errors.
VariantsFully-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:
Now you need to do something else.
With primary and secondary calls-to-action:
You can do one thing, or the other.
Alerts with buttons
Thanks to a font-based icon set, adding icons is as easy as including them before any text.
Well done! You successfully read this important alert message.
Hey there! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Message to agent: Read the following text to the customer before proceeding.
Alerts with icons
Thanks to a font-based icon set, adding icons is as easy as including them before any text.
Well done! You successfully read this important alert message.
Hey there! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Message to agent: Read the following text to the customer before proceeding.
Simple alerts
Well done! You successfully read this important alert message.
Hey there! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Message to agent: Read the following text to the customer before proceeding.
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.
Alerts with links
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.
You can now edit your account preferences on your Account Settings page. Don't forget to check your settings.
Light alerts
Use Light Alerts when you don't need to be quite so bold with your message.
You successfully read this important alert message.
This alert needs your attention, but it's not super important.
Better check yourself, you're not looking too good.
Change a few things up and try submitting again.
Alert Messages
Use Alert Messages when you need to provide some feedback, and the other variants just seem like too much.
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.
Collapsibles
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.
Accordions
"Accordions" are a set of drawers where only one can be open at one time.
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.
Content Sections
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 Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
If there is no section body, the component moves from section header to table without interruption.
Section title
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Footer
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
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
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.
Popovers
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:
Tab Panels
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.
Fade effect
To give your tabs a softer – and more noticeable – interaction, add a fade effect.
Tables
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.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Striped
Zebra-striping can be added to larger table rows when such a treatment would increase the legibility/usability of a table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Full borders
Full borders can be added, but this treatment should obly be used when absolutely necessary.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Hover effect
As with stripes, add a hover state to rows when such a treatment would increase the legibility/usability of a table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Condensed table
When space is at a premium, tables can be made more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Roomier table
When space is not at a premium, tables can be made roomier by adding cell padding.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Contextual classes
Use contextual classes to color table rows or individual cells.
| Class | Description |
|---|---|
| Active | Applies the hover color to a particular row or cell |
| Success | Indicates a successful or positive action |
| Info | Indicates a neutral informative change or action |
| Warning | Indicates a warning that might need attention |
| Danger | Indicates a dangerous or potentially negative action |
| # | Row heading | Row heading | Row heading |
|---|---|---|---|
| 1 | Row content | Row content | Row content |
| 2 | Success row content | Row content | Row content |
| 3 | Row content | Row content | Row content |
| 4 | Info row content | Row content | Row content |
| 5 | Row content | Row content | Row content |
| 6 | Warning row content | Row content | Row content |
| 7 | Row content | Row content | Row content |
| 8 | Danger row content | Row content | Row content |
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 heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Tooltips
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
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.
Wells
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.
Variable "Depth"
If you want less emphasis on the content in your Well, you can use .shallow to give a flatter appearance to your content.