Screamer

Use to suggest actions a user should take and the reasons behind these actions.

Description

This component includes a body of text with a large font and a customised content on the right (often a CTA button, a stat component). On smaller screens the two columns stack.

Variations

Default .screamer

Aligns the text to the left always

Center aligned .screamer .screamer--centered

Center aligns the text and content always (except for .screamer__message on desktop where the text is left aligned)

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-screamer;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Default

Get a personalised quote in 10 minutes and a decision in as soon as 24hrs.

3,3 Mrd. €
Vermitteltes Kreditvolumen

Center aligned

Get a personalised quote in 10 minutes and a decision in as soon as 24hrs.

Get an instant quote orApply now 
<section class="screamer">
  <div class="screamer__inner">
    <div class="screamer__message">
    </div>
    <div class="screamer__hook">
    </div>
  </div>
</section>