Hero sidekick

Use to display content which complements the hero or needs to be above the fold.

Description

The hero is paired with the sidekick, which is a bar that sits below the component and is slightly inset. On mobile, there is no inset and the sidekick just takes up the full width and sits below the hero, like any other element.

To use it:

  • Add the sidekick markup as per the example below. Note it is a separate section, rather than a child within the hero section (HTML only)
  • Give the hero itself a modifier class of hero--with-sidekick (this will increase bottom padding of the hero so the sidekick doesn't overlap any hero content)
  • Use the hero-sidekick-customisation mixin to declare the sidekick background colour, and the background underneath the sidekick (should be the same background colour of the next section on the page)

    Alternate version

    An alternative version of the sidekick is also available by adding the modifier class hero-sidekick--alt to the sidekick element. This version differs from the main one in that it actually overlaps the following element. The reason for this alt version is so as to be able to overlap following elements that have background images. The second argument to the customisation mixin will be ignored for this version of the sidekick. The one constraint with the alt version of the sidekick is that it needs to contain as its first and only child a div element (There are no restrictions on the content of this element).

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-hero-sidekick;

Sass Usage

@include radius-component-hero-sidekick;
.hero-sidekick {
    @include hero-sidekick-customisation(get-color(purple), get-color(yellow, light));
}

Usage

Usage example

Regular sidekick with 1 item

Working capital loans

Working capital loans can give you the breathing space to make sensible management decisions and grow your business.

Kostenloses Anlegerkonto eröffnen orApply now
Hero caption - description goes here

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

Regular sidekick with 2 items

Working capital loans

Working capital loans can give you the breathing space to make sensible management decisions and grow your business.

Kostenloses Anlegerkonto eröffnen orApply now
Hero caption - description goes here

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

Alt version with 1 items

Working capital loans

Working capital loans can give you the breathing space to make sensible management decisions and grow your business.

Kostenloses Anlegerkonto eröffnen orApply now
Hero caption - description goes here

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

Alt version with 2 item

Working capital loans

Working capital loans can give you the breathing space to make sensible management decisions and grow your business.

Kostenloses Anlegerkonto eröffnen orApply now
Hero caption - description goes here

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

<!--  hero with normal sidekick -->
<section class="hero hero--with-sidekick">
  ...
</section>

<section class="hero-sidekick">
  <!-- content -->
</section>

<!-- hero with alt sidekick -->

<section class="hero hero--with-sidekick">
  ...
</section>

<section class="hero-sidekick hero-sidekick--alt">
  <div>
    ....
  </div>
</section>