<div>
    <div class="wall-note wall-note-bg-image-koralle">
        <div class="wall-note__content">
            <p class="wall-note__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                hydrocarbons car. Lorem gibson realism tower pre-dome meta-artisanal tank-traps
                House of the Blue Lights count zero interrupt biochips garage drone derm/dermadisk
                suit galaxy wonton soup When It Changed faded Tokyo. Free-market count
                zero interrupt tattoo car courier assault vehicle Turing Registry film
                boat fluidity Legba soul-delay RAF industrial grade yiheyuan filters personality
                Shibuya gang weathered A.I. assassin.</p>
            <img src="../../assets/arrow-long-down-red.svg">
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-girl">
        <div class="wall-note__content">
            <p class="wall-note__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                hydrocarbons car. Lorem gibson realism tower pre-dome meta-artisanal tank-traps
                House of the Blue Lights count zero interrupt biochips garage drone derm/dermadisk
                suit galaxy wonton soup When It Changed faded Tokyo. Free-market count
                zero interrupt tattoo car courier assault vehicle Turing Registry film
                boat fluidity Legba soul-delay RAF industrial grade yiheyuan filters personality
                Shibuya gang weathered A.I. assassin.</p>
            <img src="../../assets/arrow-long-down-red.svg">
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-igel">
        <div class="wall-note__content">
            <p class="wall-note__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                hydrocarbons car. Lorem gibson realism tower pre-dome meta-artisanal tank-traps
                House of the Blue Lights count zero interrupt biochips garage drone derm/dermadisk
                suit galaxy wonton soup When It Changed faded Tokyo. Free-market count
                zero interrupt tattoo car courier assault vehicle Turing Registry film
                boat fluidity Legba soul-delay RAF industrial grade yiheyuan filters personality
                Shibuya gang weathered A.I. assassin.</p>
            <img src="../../assets/arrow-long-down-red.svg">
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-ice">
        <div class="wall-note__content">
            <p class="wall-note__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                hydrocarbons car. Lorem gibson realism tower pre-dome meta-artisanal tank-traps
                House of the Blue Lights count zero interrupt biochips garage drone derm/dermadisk
                suit galaxy wonton soup When It Changed faded Tokyo. Free-market count
                zero interrupt tattoo car courier assault vehicle Turing Registry film
                boat fluidity Legba soul-delay RAF industrial grade yiheyuan filters personality
                Shibuya gang weathered A.I. assassin.</p>
            <img src="../../assets/arrow-long-down-red.svg">
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-medusa">
        <div class="wall-note__content">
            <p class="wall-note__text">Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                hydrocarbons car. Lorem gibson realism tower pre-dome meta-artisanal tank-traps
                House of the Blue Lights count zero interrupt biochips garage drone derm/dermadisk
                suit galaxy wonton soup When It Changed faded Tokyo. Free-market count
                zero interrupt tattoo car courier assault vehicle Turing Registry film
                boat fluidity Legba soul-delay RAF industrial grade yiheyuan filters personality
                Shibuya gang weathered A.I. assassin.</p>
            <img src="../../assets/arrow-long-down-red.svg">
        </div>
    </div>
</div>
<div>
    <div class="wall-note wall-note-bg-image-koralle">
        <div class="wall-note__content">
            <p class="wall-note__text">
                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                Lorem gibson realism tower pre-dome meta-artisanal tank-traps House of the Blue Lights
                count zero interrupt biochips garage drone derm/dermadisk suit galaxy wonton soup When It Changed faded Tokyo.
                Free-market count zero interrupt tattoo car courier assault vehicle Turing Registry film boat fluidity Legba soul-delay
                RAF industrial grade yiheyuan filters personality Shibuya gang weathered A.I. assassin.
            </p>
            <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-girl">
        <div class="wall-note__content">
            <p class="wall-note__text">
                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                Lorem gibson realism tower pre-dome meta-artisanal tank-traps House of the Blue Lights
                count zero interrupt biochips garage drone derm/dermadisk suit galaxy wonton soup When It Changed faded Tokyo.
                Free-market count zero interrupt tattoo car courier assault vehicle Turing Registry film boat fluidity Legba soul-delay
                RAF industrial grade yiheyuan filters personality Shibuya gang weathered A.I. assassin.
            </p>
            <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-igel">
        <div class="wall-note__content">
            <p class="wall-note__text">
                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                Lorem gibson realism tower pre-dome meta-artisanal tank-traps House of the Blue Lights
                count zero interrupt biochips garage drone derm/dermadisk suit galaxy wonton soup When It Changed faded Tokyo.
                Free-market count zero interrupt tattoo car courier assault vehicle Turing Registry film boat fluidity Legba soul-delay
                RAF industrial grade yiheyuan filters personality Shibuya gang weathered A.I. assassin.
            </p>
            <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-ice">
        <div class="wall-note__content">
            <p class="wall-note__text">
                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                Lorem gibson realism tower pre-dome meta-artisanal tank-traps House of the Blue Lights
                count zero interrupt biochips garage drone derm/dermadisk suit galaxy wonton soup When It Changed faded Tokyo.
                Free-market count zero interrupt tattoo car courier assault vehicle Turing Registry film boat fluidity Legba soul-delay
                RAF industrial grade yiheyuan filters personality Shibuya gang weathered A.I. assassin.
            </p>
            <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </div>
    <div class="wall-note wall-note-bg-image-medusa">
        <div class="wall-note__content">
            <p class="wall-note__text">
                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                Lorem gibson realism tower pre-dome meta-artisanal tank-traps House of the Blue Lights
                count zero interrupt biochips garage drone derm/dermadisk suit galaxy wonton soup When It Changed faded Tokyo.
                Free-market count zero interrupt tattoo car courier assault vehicle Turing Registry film boat fluidity Legba soul-delay
                RAF industrial grade yiheyuan filters personality Shibuya gang weathered A.I. assassin.
            </p>
            <img src={context.app.uri('assets/arrow-long-down-red.svg')} />
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    $big-content-teaser-height-sm: ms(35);
    $big-content-teaser-height-md: ms(40);
    
    .wall-note {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    
    .wall-note__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: $spacer-sm;
      background-color: $wall-note-content-bg-color;
      padding: $spacer-lg $spacer-base;
      max-width: $default-page-layout-content-width-md;
    }
    
    .wall-note__heading {
      @extend %h1;
      text-align: center;
      font-size: $h2-font-size;
    }
    
    .wall-note__subheading {
      @extend %teaser-caption;
    }
    
    .wall-note__text {
      @extend %body-font-italic;
    
      line-height: $wall-note-text-line-height-small;
      font-size: $wall-note-text-font-size-small;
      // IE11 Hack
      // sass-lint:disable no-vendor-prefixes
      @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        max-width: 100%;
      }
    }
    
    
    //Background images for topic header
    .wall-note-bg-image-girl {
      @extend %centered-background-image;
      background-image: asset-url('visual-header-girl.jpg');
    
    }
    
    .wall-note-bg-image-medusa {
      @extend %centered-background-image;
      background-image: asset-url('visual-header-medusa.jpg');
    }
    
    .wall-note-bg-image-ice {
      @extend %centered-background-image;
      background-image: asset-url('visual-header-ice.jpg');
    }
    
    .wall-note-bg-image-igel {
      @extend %centered-background-image;
      background-image: asset-url('visual-header-igel-1444.jpg');
    }
    
    .wall-note-bg-image-koralle {
      @extend %centered-background-image;
      background-image: asset-url('visual-header-koralle.jpg');
    }
    
    .wall-note-bg-image-workshop {
      @extend %centered-background-image;
      background-image: asset-url('visual-workshop-06.jpg');
    }
    
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .wall-note__content {
        padding: $spacer-xl $spacer-lg;
      }
    
      .wall-note__text {
        line-height: $wall-note-text-line-height;
        font-size: $wall-note-text-font-size;
      }
    }
    
  • URL: /components/raw/wall-note/_wall-note.scss
  • Filesystem Path: components/02-molecules/visual-divider/wall-note/_wall-note.scss
  • Size: 2 KB
  • Handle: @wall-note
  • Preview:
  • Filesystem Path: components/02-molecules/visual-divider/wall-note/wall-note.html

There are no notes for this item.