brand-band

<div class="slds-brand-band slds-brand-band_large">
</div>

Base

This is the most common use case for the brand band. Our default size is slds-brand-band_medium. This will give the brand band image a height of 12.5rem or 200px.

The brand band has a gradient fade into the background color of the page. A dark variant of the page background color fades down from the top of the brand band.

<div class="slds-brand-band slds-brand-band_medium">
</div>

Brand band sizes

The brand band comes with 3 sizes — small, medium and large. These will adjust the height of the brand band image.

Small:

<div class="slds-brand-band slds-brand-band_small">
</div>

Medium (Default):

<div class="slds-brand-band slds-brand-band_medium">
</div>

Large:

<div class="slds-brand-band slds-brand-band_large">
</div>

Removing the brand band image

If you need to remove the brand band image from the component, you can simply pass in slds-brand-band_none to only display the page background color.

<div class="slds-brand-band slds-brand-band_none">
</div>

Using the group background image

<div class="slds-brand-band slds-brand-band_medium slds-brand-band_group">
</div>

Using the user profile background image

<div class="slds-brand-band slds-brand-band_medium slds-brand-band_user">
</div>