Title Lockup

The title pattern is a lock up of components that can be used within headers of pages and panels or by itself in a card or tile.
Demo and Developer Guidelines


Titles can contain the following elements: avatar, heading, subheading, and actions. The placement of these elements cannot be rearranged within the defined title lock up. These elements can be removed depending on the use case.

Visual Placeholder

Any one of 3 elements can be used in the space – avatar, icon or image. There will be 
a fixed area of 40px by 40px with a corner radius of 4px.


Any heading style (H1, H2,h3) can be used in the heading section. Titles should always have a heading. All headings will be title case. Our link color can be used if needed.


There should be a maximum of 3 actions visible in the lockup. If there are more than 3 the third action will be an overflow dropdown to house the remaining actions. Actions can include buttons and dropdowns.


Text Wrapping

The heading and subheading will wrap when the widths of the text fills the available space. We suggest having the text wrap to 2 lines to keep the content concise.


If the title needs to reorganize based on the view port width the heading and subheading would wrap while the actions remain inline with the heading.