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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/615749e1f3de491f608aae76_title_intro2.png)
Anatomy
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6171946e83a02a22a88617d9_title_lu_anatomy.png)
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6171948c2cd34f51fa05e35c_title_lu_vis_place.png)
Heading
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6172f8233bc148435e1c0f49_title_lu_heading_corect.png)
Correct
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6172f82d26805868bdb339c1_title_lu_heading_incorect.png)
Incorrect
Actions
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6172f8597156aa35d00689a4_title_lu_actions.png)
Bahavior
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6172f8a496984240391c525d_title_lu_behavior.png)
Responsiveness
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.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6172f8c274f3f9cf019cc70a_title_lu_behavior2.png)
Specifications
Styling/Padding
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6172f8ffb97d56559b1f810b_title_lu_spec.png)