Snapshot

The snapshot headline present the current values of an instrument. In addition, various types of advertising (especially Zero) will be shown.

The snapshot display is influenced by various states (has ad, show zero info/ad/integration, show big values, etc.) and screen sizes (mobile, LG & XL). There are currently more than one hundred positioning variants. The list of all variants is defined here.

Theme de [FIX] Screen size XL

html

HTML

The basic HTML structure of the snapshot is as follows:

.snapshot
  .snapshot__headline
  .snapshot__depot
    .snapshot__depot-alert
    .snapshot__depot-add
  .snapshot__trading
    .snapshot__trading-buy-btn
    .snapshot__trading-sell-btn
  .snapshot__ad
  .snapshot__values
    .snapshot__value-current
      .snapshot__value
      .snapshot__value-unit
    .snapshot__value-absolute
      .snapshot__value
      .snapshot__value-unit
    .snapshot__value-relative
      .snapshot__value
      .snapshot__value-unit
  .snapshot__source
    .snapshot__source-info
    .snapshot__time
    .snapshot__exchange
  .snapshot__values-second
    .snapshot__value-current
      .snapshot__value
      .snapshot__value-unit
    .snapshot__value-absolute
      .snapshot__value
      .snapshot__value-unit
    .snapshot__value-relative
      .snapshot__value
      .snapshot__value-unit
  .snapshot__source-second
    .snapshot__source-info
    .snapshot__time
    .snapshot__exchange
  .snapshot__certificate-values
    .snapshot__certificate-group 3x
      .snapshot__certificate-title
      .snapshot__certificate-date
      .snapshot__certificate-current
        snapshot__certificate-value
        snapshot__certificate-unit
        snapshot__certificate-relative-value
  .snapshot__certificate-base-values
    .snapshot__certificate-group 1x
      .snapshot__certificate-title
      .snapshot__certificate-date
      .snapshot__certificate-current
        snapshot__certificate-value
        snapshot__certificate-unit
        snapshot__certificate-relative-value
  .snapshot__zero
    .snapshot__zero-info
    .snapshot__zero-flyer
    .snapshot__zero-integration
  .snapshot__badge-bar

Here you can find detailed information about the elements:

.snapshot__headline should be a <h1>..<h5> headline
.snapshot__depot The depot element contains up to two links which enable interactions with the user depot. these should only be icon links.
- .snapshot__depot-alert Add an alert to an instrument for special trashold, that will inform the user.
- .snapshot__depot-add Adds the instrument to your own depot
.snapshot__trading This only includes a buy and sell button. These buttons are connected to the zero ad/integration via scripting and toggle their visibility.

<div class="snapshot__trading-buy-btn button button--success button--stretch-md">
  <span class="button__label">Buy</span>
</div>
<div class="snapshot__trading-sell-btn button button--danger button--stretch-md">
  <span class="button__label">Sell</span>
</div>

.snapshot__ad Any advertising content can be inserted within this element.
.snapshot__values and .snapshot__values-second These elements show the values of instruments. The values receive their push styles using the Realtime Push components.

<div class="snapshot__values">
  <span class="snapshot__value-current realtime-push">
    <span
      id="snapshot-value-fst-current"
      class="snapshot__value"
      data-sg-realtime-push
      data-sg-realtime-push-no-state-update
      data-sg-realtime-push-start-listener="true"
    >
      75.08
    </span>
    <span class="snapshot__value-unit">EUR</span>
  </span>
  <span class="snapshot__value-absolute realtime-push realtime-push--state-negative">
    <span
      id="snapshot-value-fst-absolute"
      class="snapshot__value"
      data-sg-realtime-push
      data-sg-realtime-push-start-listener="true"
    >
      -0.83
    </span>
    <span class="snapshot__value-unit">EUR</span>
  </span>
  <span class="snapshot__value-relative realtime-push realtime-push--state-negative">
    <span
      id="snapshot-value-fst-relative"
      class="snapshot__value"
      data-sg-realtime-push
      data-sg-realtime-push-start-listener="true"
    >
      -1.50
    </span>
    <span class="snapshot__value-unit">%</span>
  </span>
</div>

.snapshot__source and .snapshot__source-second In this element, the time and exchange information from when the instrument values are displayed.
- The element .snapshot__source-info is only shown, when the modifier .snapshot--source-info is set, see below.

<div class="snapshot__source">
  <span class="snapshot__source-info">nachbörslich</span>
  <time class="snapshot__time" datetime="2000-01-01T10:31:21">10:31:21</time>
  <span class="snapshot__exchange">STU</span>
</div>

.snapshot__certificate-values and .snapshot__certificate-base-values In this element, certificate information are displyed.

<div class="snapshot__certificate-group">
  <span class="snapshot__certificate-title">Bid (5.000Stk.)</span>
  <span class="snapshot__certificate-date">16:19:51</span>
  <span class="snapshot__certificate-current-value realtime-push">
    <span
      id="snapshot-value-certificate-a"
      class="snapshot__certificate-value"
      data-sg-realtime-push
      data-sg-realtime-push-no-state-update
      data-sg-realtime-push-start-listener="true">23,45</span>
    <span class="snapshot__certificate-unit">EUR</span>
  </span>
  <span class="snapshot__certificate-relative-value realtime-push realtime-push--state-positive">
    <span
      id="snapshot-value-certificate-f"
      class="snapshot__certificate-value"
      data-sg-realtime-push
      data-sg-realtime-push-start-listener="true">-0,06</span>
    <span class="snapshot__certificate-unit">%</span>
  </span>
</div>

.snapshot__zero a container for Zero .snapshot__zero-info, .snapshot__zero-flyer and .snapshot__zero-integration
.snapshot__zero-info If the user is logged in at Zero, additional advertising informationa about zero is displayed. This can be any text.
.snapshot__zero-flyer If the user is not logged into Zero and clicks on the buy/sell button, he will see the zero advertisement.

<div class="snapshot__zero-flyer">
  <div class="zero-flyer">
    <div class="zero-flyer__zero-flyer-headline">
      <span class="logo logo--zero-black" title="logo-zero-black"></span>
    </div>
    <span class="zero-flyer__zero-flyer-teaser">
      Aktien, ETFs, Sparpläne &amp Kryptos ohne Gebeühren beim Testsieger von finanztip handeln!
    </span>
    <div class="zero-flyer__zero-flyer-button">
      <div class="button button--zero button--stretch-md">JETZT LOSLEGEN</div>
      <span class="font-color-brand-zero-magenta display-none-md">UND GRATIS-AKTIE BEKOMMEN</span>
    </div>
    <span class="zero-flyer__zero-flyer-link">Du hast schon ein Konto? <span
        class="hyperlink zero-flyer__zero-integration-btn">Hier verknüpfen</span></span>
    <img class="zero-flyer__zero-img" src="/images/gratis-aktien-app-icons.svg">
    <img class="zero-flyer__mobile-img" src="/images/zero-smartphone.svg">
    <div class="zero-flyer__zero-flyer-close">
      <div class="button button--icon button--pill button--flat"><span class="icon icon--close"></span></div>
    </div>
  </div>
</div>

.snapshot__zero-integration If the user is logged into Zero and clicks on the buy/sell button, he will see the zero integration.
.snapshot__badge-bar In this element a .badge-bar can be added.

Surrounding components

In addition to the snapshot, a Separator and the Details Navigation are generally also displayed. These should be integrated according to the following structure:

<main class="page-content">
  <section class="page-content__container">
    <article class="page-content__item">
      <div class="snapshot"><!-- ... --></div>
      <hr class="separator margin-vertical-0.50">
      <nav class="details-navigation"><!-- ... --></nav>
    </article>
  </section>
</main>

Modifier

There are a number of class modifiers that affect the CSS Grid of the snapshot. Some of these modifiers must be set as needed by the developer. Other modifiers are set using scripting.

Set by the developer

The following modifiers must be set by the developer if required:

.snapshot--source-info If more then time and exchange should shown in the .snapshot__source, then add this modifier to display .snapshot__source-info.
.snapshot--2nd-values This must be added if the values of two exchanges are to be shown for one instrument.
.snapshot--certificate This modifier hides the .snapshot__values and .snapshot__source (also second row) values and shows the .snapshot__certificate-values and .snapshot__certificate-base-values values.
.snapshot--is-zero-user If the current user is logged into Zero, this modifier must be appended.
.snapshot--ad If an extra advertisement should be displayed in the .snapshot__ad element, this modifier must be added.
.snapshot--small-snd-values The seconde values are a bit smaller then the first one.

Set by scripting

The following modifiers handle be set by scripting:

.snapshot--show-values When the page is loaded, the values of the instruments are not displayed immediately because the scripting must first determine whether the values are large or not. This may prevent the content shift. After the page load, the modifier is added and the values are displayed.
.snapshot--big-values The numerical values must be displayed differently depending on the number of digits in a line. The scripting defines a trashold for this, see the variables bigValueGroupTrashold and bigValueSingleTrashold in the SnapshotHandler.
.snapshot--zero-flyer If the user is not logged into Zero and clicks on the buy/sell button, this modifier will added and shows the .snapshot__zero-flyer element.
.snapshot--zero-integration If the user is logged into Zero and clicks on the buy/sell button, this modifier will added and shows the .snapshot__zero-integration element.