--- title: Sidebar brand slug: sidebar/brand path: ../ --- {% extends "layouts/default.html" %} {% block page %}

{{ title }}

The .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.
{% include 'code/sidebar-brand/basic.html' %}
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

Wrapper

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.
{% include 'code/sidebar-brand/wrapper.html' %}

Background

Apply a background color defined by the .sidebar-light or .sidebar-dark skins to the .sidebar-brand element or a wrapper.
{% include 'code/sidebar-brand/bg.html' %}
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

Border

Apply a 1px solid border bottom with the color defined by the .sidebar-light or .sidebar-dark skins to the .sidebar-brand element or a wrapper.
{% include 'code/sidebar-brand/border.html' %}
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
{% endblock %}