D.School Component Library

Ticker Tape 

<div class="o-ticker-tape">
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
    <span class="o-ticker-tape__text">Undergraduate learning</span>
</div>
 
{% set base_class = ticker_tape.base_class|default('o-ticker-tape') %}

{% if ticker_tape.text %}
  <div class="{{ bem(base_class, ticker_tape.element, ticker_tape.modifiers, ticker_tape.extra) }}" {{ attributes(ticker_tape.attributes) }}>
    {% for item in 0..10 %}
      <span class="{{ bem(base_class, 'text') }}">{{ ticker_tape.text }}</span>
    {% endfor %}
  </div>
{% endif %}
 
{
  "ticker_tape": {
    "text": "Undergraduate learning"
  }
}
  • Content: 
    /* ------------------------------------ *\
  $TICKER-TAPE
\* ------------------------------------ */

.o-ticker-tape {
  display: flex;
  align-items: center;
  gap: var(--ds-space);
  padding: var(--ds-space-xxs);
  background-color: var(--ds-color-theme-background-secondary, var(--ds-color-background-detail));
  color: var(--ds-color-content-primary);
  overflow: hidden;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  @extend .o-detail--5;

  &__text {
    white-space: nowrap;
  }
}
  • URL: /components/raw/ticker-tape/_ticker-tape.scss
  • Filesystem Path: components/01-atoms/ticker-tape/_ticker-tape.scss
  • Size: 496 Bytes

No notes defined.