Living Styleguide

Wall Note 

<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-elements/visual-divider/wall-note/_wall-note.scss
  • Size: 2 KB
  • Handle: @wall-note
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/visual-divider/wall-note/wall-note.html

There are no notes for this item.