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 GuidelinesAnatomy
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.
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.
Correct
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.
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.
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.
Specifications
Styling/Padding
Specifications
Styling/Padding