# Info Box

Ready

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

`

    <info-box>
        <details>
            <summary>
                <div class="infobox__teaser">
                    <div class="infobox__teaser__left">
                        <span class="infobox__teaser__heading">Ich bin eine Infobox</span>
                        <span class="icon icon-info"></span>
                    </div>
                    <div class="infobox__teaser__right">
                        <span class="icon icon-chevron-down icon--small"></span>
                    </div>
                </div>
            </summary>
            <div class="infobox__content">
                <h2>Ich bin eine Headline</h2>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <a href="#"">Link</a></p>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                <h2>Ich bin eine Headline</h2>
                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                <ul>
                    <li>Ich bin ein kleines Listitem</li>
                    <li>Ich bin ein kleines Listitem</li>
                    <li>Ich bin ein kleines Listitem</li>
                    <li><a href=" #"">Link</a></li>
                    </ul>
            </div>
        </details>
    </info-box>

`
`

    <info-box>
        <details>
            <summary>
                <div class="infobox__teaser">
                    <div class="infobox__teaser__left">
                        <span class="infobox__teaser__heading">Ich bin eine Infobox</span>
                        <span class="icon icon-info"></span>
                    </div>
                    <div class="infobox__teaser__right">
                        <span class="icon icon-chevron-down icon--small"></span>
                    </div>
                </div>
            </summary>
            <div class="infobox__content">
                <h2>{{headline}}</h2>
                <p>{{text_short}} <a href="#"">Link</a></p>
                <p>{{text_short}}</p>
                <h2>{{headline}}</h2>
                <p>{{text_short}}</p>
                <ul>
                    <li>{{listitem}}</li>
                    <li>{{listitem}}</li>
                    <li>{{listitem}}</li>
                    <li><a href="#"">Link</a></li>
                </ul>
            </div>
        </details>
    </info-box>

`
`

    {
      "text_short": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
      "headline": "Ich bin eine Headline",
      "listitem": "Ich bin ein kleines Listitem"
    }

`
File:

- Content:
  `

      $info-box-icon-font-size: ms(3);

      info-box {
        display: block;
      }

      .infobox__teaser {
        @extend %heading-font-bold;

        cursor: pointer;

        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        padding: $spacer-sm $spacer-md;

        font-size: $font-size-xs;
        color: $infobox-teaser-text-color-closed;

        background-color: $infobox-teaser-background-color-closed;
        border-bottom: 3px solid $infobox-teaser-border-color;
      }

      .infobox__teaser__heading {
        display: inline-flex;
        align-items: center;
        padding-right: $spacer-sm;
      }

      .infobox__teaser__right {
        display: flex;
      }

      .infobox__teaser__left {
        display: flex;
      }

      .icon-chevron-down {
        background: $infobox-teaser-text-color-closed;
      }

      .icon-info {
        background: $infobox-teaser-text-color-closed;
      }

      .infobox__content {
        padding: $spacer-sm $spacer-md;
        background-color: $infobox-content-background-color;

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

        p,
        ul > li {
          @extend %heading-font-regular;

          font-size: $font-size-base;
          line-height: $paragraph-line-height;
        }

        li::marker {
          @extend %body-font-regular;
        }
      }

      details {
        ::-webkit-details-marker {
          display: none; // hides marker in Safari
        }

        &[open] {
          .infobox__teaser {
            color: $infobox-teaser-text-color-open;
            background-color: $infobox-teaser-background-color-open;

            .icon-chevron-down {
              transform: rotate(180deg);
              background: $infobox-teaser-text-color-open;
            }

            .icon-info {
              background: $infobox-teaser-text-color-open;
            }
          }
        }
      }

      summary {
        display: block; // hides marker in all browser but Safari
      }

  `
- URL: /components/raw/info-box/info-box.scss
- Filesystem Path: components/04-molecules/info-box/info-box.scss
- Size: 1.7 KB

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

No notes defined.