Wordmark
The wordmark component may be used as a visual label for a section of pages on your website. The wordmark text should inform the user what overall section of the website they are viewing.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Structure and layout
Demo
Usability best practices
For optimal visability, the wordmark should be placed at the top of the page, beneath the navigation, and above any content.
Consider using wordmark when:
- there is a distinct theme or topic that has entire section of pages
- a subsite that does not require its own primary navigation
Usage examples:
- ward subsites
- golf course sections of pages
Do
Use wordmark when it's necessary to establish a land post to remind users of the space they are currently in.
Don't
Do not use wordmark for a single page.
Do not use wordmark when other navigation elements have already clearly indicated the theme or subsite the users are at.
Do not use wordmark to group pages or sections that have no clear relationship.
Do not replace breadcrumbs or navigation with wordmark.