Brand Heading

Description

Styled header with brand (self made) font and colored with brand color. Can take an accent if configured to do so. Can be both left or center aligned according to configuration.

Element

  • brand-heading: header with brand font and brand color (purple). Adjusts in size with viewport. There is a specific modifier for the brand-hero brand-heading--hero which is responsible for the color and adding a new size for larger breakpoints. There is also a modifier class brand-heading--small for use in long German words, which is responsible for amending the font-size across different breakpoints.

Variations:

  • text-block__heading-bar--brand: Puts an accent below the header
  • text-block--center: If on an ancestor element of header el, header text and any accent will be centered.
  • brand-heading--hero: for using within the brand hero
  • brand-heading--small: for using within the brand hero, with long words.
  • u-color-white: modifier added to change text color from default on a dark background.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-brand-heading;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Left aligned

Vanilla version with only the 'brand-heading' class added to a header element.

Seize your next opportunity

Left aligned on hero

Seize your next opportunity

Left aligned on hero for longer headlines

Seize your next opportunity again, alot, all of the time



Centered with accent

With accent bar and text block below, such as in the Feature List component. 'text-block__heading-bar--brand' adds the accent bar 'text-block' and 'text-block--large' are for styling the text block. 'text-block--center' centers both text and bar.

Seize your next opportunity

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet



Left aligned with accent

Similar to above, but without the text-block--center class, which results in everything being left aligned.

Seize your next opportunity

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet



Hero Section Heading

Take Your Business Further

Völlerei lässt grüßen

Hero Section Heading --small

Take Your Business Further

Völlerei lässt grüßen

Code example

<!--  example 1 -->
<h2>Left aligned</h2>
<p>
  Vanilla version with only the 'brand-heading' class added to a header element.
</p>

<h2 class="brand-heading">Seize your next opportunity</h2>


<!--  example 2 -->
<h2>Left aligned on hero</h2>
<div class="component-variant__customisation--inverse">
  <h2 class="brand-heading brand-heading--hero u-color-white">Seize your next opportunity</h2>
</div>


<!--  example 2 -->
<h2>Left aligned on hero for longer headlines</h2>
<div class="component-variant__customisation--inverse">
  <h2 class="brand-heading brand-heading--small u-color-white">Seize your next opportunity again, alot, all of the time</h2>
</div>


<!--  example 3 -->
<br/>
<br/>
<h2>Centered with accent</h2>
<p>
  With accent bar and text block below, such as in the Feature List
  component.
  'text-block__heading-bar--brand' adds the accent bar
  'text-block' and 'text-block--large' are for styling the text block.
  'text-block--center' centers both text and bar.
</p>

<div class="text-block text-block--large text-block--center">
  <h2 class="brand-heading text-block__heading-bar--brand">Seize your next opportunity</h2>
  <p class="text-block__lead-paragraph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
</div>


<!--  example 4 -->
<br/>
<br/>
<h2>Left aligned with accent</h2>
<p>
  Similar to above, but without the text-block--center class, which results in everything being left aligned.
</p>

<div class="text-block text-block--large">
  <h2 class="brand-heading text-block__heading-bar--brand">Seize your next opportunity</h2>
  <p class="text-block__lead-paragraph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
</div>


<!--  example 5 -->
<br/>
<br/>

<div class="content__component-example">
  <div class="component-variant__heading">
    <h4 class="component-variant__title">Hero Section Heading</h4>
  </div>
  <div class="component-variant__customisation--inverse">
    <h2 class="brand-heading brand-heading--hero u-color-white">Take Your Business Further</h2>
  </div>
  <div class="component-variant__customisation--inverse">
    <h2 class="brand-heading brand-heading--hero u-color-white">Völlerei lässt grüßen</h2>
  </div>
</div>

<div class="content__component-example">
  <div class="component-variant__heading">
    <h4 class="component-variant__title">Hero Section Heading --small</h4>
  </div>
  <div class="component-variant__customisation--inverse">
    <h2 class="brand-heading brand-heading--small u-color-white">Take Your Business Further</h2>
  </div>
  <div class="component-variant__customisation--inverse">
    <h2 class="brand-heading brand-heading--small u-color-white">Völlerei lässt grüßen</h2>
  </div>
</div>