Plus Teaser

The plus-teaser is a layout component for Finanzen.net Plus. Users without a subscription see the offer. Plus users see a quick link to the Plus area. It has a Plus background, the Plus logo, a text, a hint and a call to action.

The component does not know where it is placed. It is used in the Page Header as the content of a .menu__item--content of the Menu and in the User Card. It contains only styles, no script.

The teaser has three states:

• anonymous - the offer for users who are not logged in.
• logged in - the offer for logged in users without a Plus subscription, the call to action is a button.
• logged in Plus user - the teaser shows the badge “Aktiv” and a button to the Plus area.

The component contains the markup of all states. The state is only a modifier on the block, so a script can change it without rendering new HTML. The modifiers are only on the teaser. The User Card has no information about the Plus subscription.

Layout

The teaser is a container (container-type: inline-size). The layout depends on the width of the teaser, not on the width of the screen. So the same markup fits in the menu on a mobile device and in the flyout of the user card.

The breakpoint is 28rem and measures the content box of the teaser (without padding).

• narrow - less than 28rem: the elements are stacked, the button uses the full width. Plus users see logo and badge in one row.
• wide - from 28rem: logged-in and Plus users see the texts on the left and the button on the right.
• The anonymous state is always stacked.

A container with inline-size containment does not take the width of its content. The parent must give the teaser a width, as the User Card does.

Structure

<div class="plus-teaser">

  <!-- anonymous -->
  <div class="plus-teaser__anonymous">
    <span class="plus-teaser__logo logo logo--fn-net-plus-color-dark"></span>
    <span class="plus-teaser__text">...</span>
    <a class="plus-teaser__link" href="#">...</a>
    <span class="plus-teaser__hint">...</span>
  </div>

  <!-- logged in -->
  <div class="plus-teaser__logged-in">
    <span class="plus-teaser__logo logo logo--fn-net-plus-color-dark"></span>
    <span class="plus-teaser__text">...</span>
    <span class="plus-teaser__hint">...</span>
    <a class="plus-teaser__link button button--primary button--pill" href="#">...</a>
  </div>

  <!-- logged in Plus user -->
  <div class="plus-teaser__plus-user">
    <span class="plus-teaser__logo logo logo--fn-net-plus-color-dark"></span>
    <span class="plus-teaser__badge badge">Aktiv</span>
    <a class="plus-teaser__link button button--primary button--pill" href="#">...</a>
  </div>

</div>

• .plus-teaser - required the block, it has the Plus background
• .plus-teaser__anonymous - the view for anonymous users
• .plus-teaser__logged-in - the view for logged in users without a Plus subscription
• .plus-teaser__plus-user - the view for users with an active Plus subscription
• .plus-teaser__logo - the Plus logo
• .plus-teaser__text - the description
• .plus-teaser__hint - the small hint, for example the price
• .plus-teaser__badge - the badge of the Plus user, use it together with .badge
• .plus-teaser__link - the link or the button (.button) to the Plus offer
• .plus-teaser--logged-in - modifier, show the view for logged in users
• .plus-teaser--plus-user - modifier, show the view for Plus users, combine it with .plus-teaser--logged-in

States

.plus-teaser--plus-user has no effect without .plus-teaser--logged-in, because a Plus user is always logged in.

The style guide does not set the modifier. A script of the application reads the state of the user and sets them, for example:

const plusTeaser = document.querySelector('.plus-teaser');
plusTeaser.classList.toggle('plus-teaser--logged-in', isLoggedIn);
plusTeaser.classList.toggle('plus-teaser--plus-user', isLoggedIn && isPlusUser);

Example

Use the switches to change the state:

Custom properties

All values can be changed with custom properties of the form --sg-plus-teaser-{KEY}. The properties are set by the theme, the following table shows the keys and the default values.

.plus-teaser {
  --sg-plus-teaser-background: #f0f4ff;
}