Our collection of elements has been developed to reflect the most common page and layout components found in help centers. Two examples of elements that feature prominently throughout our themes are:
Buttons
<a class="button button-primary" href="#" role="button">Link</a>
<input class="button button-primary" type="button" value="Input">
<input class="button button-primary" type="submit" value="Submit">
<input class="button button-primary" type="reset" value="Reset">
<button class="button button-primary" type="submit">Button</button>Buttons are used to represent important actions that a visitor can take on the page.
Badges
<span class="badge badge-new">New</span>
<span class="badge badge-open">Open</span>
<span class="badge badge-answered">Answered</span>
<span class="badge badge-hold">Hold</span>
<span class="badge badge-solved">Solved</span>
<span class="badge badge-closed">Closed</span>Badges offer a simple way of labeling elements and can be used to highlight important information.
Some elements, like breadcrumbs and pagination, are responsible for styling HTML produced by Zendesk template helpers. Although you can use these elements elsewhere using your own HTML, to customize the appearance of helper output must use CSS.
When creating novel layouts and designs, we recommend starting with utilities and creating new elements once repeating combinations start to emerge.