# Wall Note

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="wall-note bg-image-workshop-06">
        <div class="wall-note__content">
            <h3 class="wall-note__subheading">Subheading</h3>
            <h2 class="wall-note__heading">Supertolle headline</h2>
            <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>
            <span class="icon icon--medium icon-arrow-sync icon--brand-secondary"></span>
        </div>
    </div>

`
`

    <div class="wall-note bg-image-workshop-06">
        <div class="wall-note__content">
            <h3 class="wall-note__subheading">Subheading</h3>
            <h2 class="wall-note__heading">Supertolle headline</h2>
            <p class="wall-note__text">{{text}}</p>
            <span class="icon icon--medium icon-arrow-sync icon--brand-secondary"></span>
        </div>
    </div>

`
`

    {
      "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."
    }

`
File:

- 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;

        background-size: cover;
      }

      .wall-note__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        max-width: $default-page-layout-content-width-md;
        margin: $spacer-sm;
        padding: $spacer-lg $spacer-base;

        background-color: $wall-note-content-bg-color;

        > * + * {
          margin-top: $spacer-sm;
        }
      }

      .wall-note__heading {
        @extend %h1;

        font-size: $font-size-xxl;
        text-align: center;
      }

      .wall-note__subheading {
        @extend %teaser-caption;
      }

      .wall-note__text {
        @extend %body-font-italic;

        font-size: $font-size-sm;
        // IE11 Hack

        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
          max-width: 100%;
        }
      }

      //Breakpoints
      @media screen and (min-width: $grid-breakpoint-md) {
        .wall-note__content {
          padding: $spacer-xl $spacer-lg;
        }

        .wall-note__text {
          font-size: $font-size-lg;
        }
      }

  `
- URL: /components/raw/wall-note/_wall-note.scss
- Filesystem Path: components/04-molecules/visual-divider/wall-note/_wall-note.scss
- Size: 1.1 KB

- Handle: @wall-note
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/visual-divider/wall-note/wall-note.html

No notes defined.