---
name: title-bar
url: /title-bar
title: Title Bar
---
Title Bar
Basic HTML
You can create a Title-bar with this basic HTML
Additional Options
You can easily customize Title-bar with these classes:
.primary = primary color
.dark = dark color
.left = float content left
.right= float content right
.center = center content
Sass Mixins
Write a title bar with a custom class using our mixins.
.custom-title-bar {
// Extend the base selector to get core structural styles
@extend %title-bar;
// Add visual styles with this mixin
@include title-bar-style(
$background: #fff, // Background color
$color: #000, // Text color
$border: 1px solid #000,
$padding: 1rem
);
}
Note that the names of the left
, right
, center
, and title
classes are changed in the settings variables—see below.
Sass Variables
You can customize with Title Bar with these variables in _settings.scss:
$titlebar-center-width: 50%;
$titlebar-side-width: (100% - $titlebar-center-width) / 2;
$titlebar-background: #eee;
$titlebar-color: #000;
$titlebar-border: 1px solid #ccc;
$titlebar-padding: $global-padding;
$titlebar-item-classes: (
center: 'center',
left: 'left',
right: 'right',
title: 'title',
);