--- title: Sidebar brand slug: sidebar/brand path: ../ --- {% extends "layouts/default.html" %} {% block page %}
The{% include 'code/sidebar-brand-basic.html' %}.sidebar-brand
class can be used on any element, but with a few differences depending on where it's used. When used as a direct child element of the.sidebar
container, the.sidebar-brand
element will have a fixed height, matching the height of the navbar by default.
CSS Class | Description |
---|---|
.sidebar-brand |
Applies the basic style of the sidebar brand |
Sass variable | Description |
---|---|
$sidebar-brand-size |
Defines the sidebar brand font size |
$sidebar-brand-weight |
Defines the sidebar brand font weight |
$sidebar-dark-brand-color |
Defines the sidebar brand text color when using the .sidebar-dark skin |
$sidebar-light-brand-color |
Defines the sidebar brand text color when using the .sidebar-light skin |
$sidebar-brand-height |
Defines the height of the .sidebar-brand when used as a direct child element of the .sidebar container |
Wrap the.sidebar-brand
element into another element inside the.sidebar
container to use a fluid height and group the sidebar brand with other elements.
Apply a background color defined by the{% include 'code/sidebar-brand-bg.html' %}.sidebar-light
or.sidebar-dark
skins to the.sidebar-brand
element or a wrapper.
CSS Class | Description |
---|---|
.sidebar-brand-bg |
Applies the sidebar brand background color defined by the sidebar skin. Can be applied directly to the .sidebar-brand element or a wrapper. |
Sass variable | Description |
---|---|
$sidebar-dark-brand-bg |
Defines the sidebar brand background color when using .sidebar-brand-bg and the .sidebar-dark skin |
$sidebar-light-brand-bg |
Defines the sidebar brand background color when using .sidebar-brand-bg and the .sidebar-light skin |
Apply a{% include 'code/sidebar-brand-border.html' %}1px solid
border bottom with the color defined by the.sidebar-light
or.sidebar-dark
skins to the.sidebar-brand
element or a wrapper.
CSS Class | Description |
---|---|
.sidebar-brand-border |
Applies a 1px solid border bottom to the sidebar brand element using the border color defined by the sidebar skin. Can be applied directly to the .sidebar-brand element or a wrapper. |
Sass variable | Description |
---|---|
$sidebar-dark-brand-border-color |
Defines the sidebar brand border color when using .sidebar-brand-border and the .sidebar-dark skin |
$sidebar-light-brand-border-color |
Defines the sidebar brand border color when using .sidebar-brand-border and the .sidebar-light skin |