Titles

Titles are stylized headings that call out important information or data. They are comprised of a title bar, headline, and caption. Title text styles and color can be customized.

Default title

To create a title start with a <div> tag and add the class .title. Insert a <span> tag with the class .bar to create the title bar and a <div> tag with the class .title-text for the title content. Finally, wrap title headers in <h3> tags and title captions in <h6> tags and insert them into the .title-text <div> tag.

 
<div class="title">
<span class="bar"></span>
<div class="title-text">
<h3>Title Element</h3>
<h6>Caption</h6>
</div>
</div>
 

Bar modifiers

Increase the width of the title bar or customize title bar color by adding .is-wide or .has-bg-status-$status classes to the bar's <span> tag.

 
<div class="title">
<span class="bar is-wide"></span>
<div class="title-text">
<h3>Title Element</h3>
<h6>Caption</h6>
</div>
</div>
<br>
<div class="title">
<span class="bar has-bg-status-success"></span>
<div class="title-text">
<h3>Title Element</h3>
<h6>Some Caption</h6>
</div>
</div>
 

Text content modifiers

Title text content is fully customizable. Replace <h3> or <h6> tags with an <a> tag or any <h1> to <h6> tag. Add .is-regular or .upper classes to text elements to create regular or uppercase text. Finally, customize text color by adding .is-status-$status or .is-$color-$value classes to text elements.

 
<div class="title">
<span class="bar"></span>
<div class="title-text">
<h2 class="is-regular is-status-success">This is styled</h2>
<h6 class="upper is-grey-600">Some Caption</h6>
</div>
</div>
 

Variables

You can use these variables in a override.css file to customize this component.