# Info Note

Ready

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

`

    <info-note class="info-note">
        <div class="info-note__content">
            <h3 class="info-note__title">Mika Majoran</h3>
            <p class="info-note__text"><span class="info-note__highlight">Bei INNOQ seit</span> 2018.</p>
            <p class="info-note__text">
                <span class="info-note__highlight">Tätig als</span> Product Owner in der Produktentwicklung.
            </p>
            <div class="info-note__text">
                <p>
                    Bei INNOQ seit 2018. Mika wohnt mit seiner Lebensgefährtin und Hündin Luna in der Nähe von Hamburg. Er
                    arbeitet vor allem von Zuhause, gelegentlich auch im Hamburger Büro.
                </p>
            </div>
        </div>
    </info-note>

`
`

    <info-note class="info-note">
        <div class="info-note__content">
            <h3 class="info-note__title">Mika Majoran</h3>
            <p class="info-note__text"><span class="info-note__highlight">Bei INNOQ seit</span> 2018.</p>
            <p class="info-note__text">
                <span class="info-note__highlight">Tätig als</span> Product Owner in der Produktentwicklung.
            </p>
            <div class="info-note__text">
                <p>
                    Bei INNOQ seit 2018. Mika wohnt mit seiner Lebensgefährtin und Hündin Luna in der Nähe von Hamburg. Er
                    arbeitet vor allem von Zuhause, gelegentlich auch im Hamburger Büro.
                </p>
            </div>
        </div>
    </info-note>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .info-note {
        @extend %box-shadow-primary-25-right-bottom;

        max-width: calc($default-page-layout-content-width-md/2); //25rem

        &__content {
          padding: $spacer-sm $spacer-sm $spacer-base $spacer-md;
        }

        &__title {
          @extend %heading-font-bold;

          margin-bottom: $spacer-base;

          font-size: $font-size-base;
          color: $info-note-title-color;
          text-align: center;
          text-transform: uppercase;
        }

        &__text,
        &__text * {
          @extend %heading-font-regular;

          font-size: $font-size-xs;
          color: $info-note-text-color;
          text-align: left;
        }

        p:last-child {
          margin-bottom: 0;
        }

        &__highlight {
          @extend %heading-font-bold;
        }
      }

  `
- URL: /components/raw/info-note/info-note.scss
- Filesystem Path: components/04-molecules/info-note/info-note.scss
- Size: 668 Bytes

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

No notes defined.