Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Quick Info 

<div class=" quick-info -active">
    <button class="quick-info__close"></button>
    <div class="quick-info__visual">
        <a href="#" class="quick-info__image-link">
            <div class=" media ">
                <img class="media__item" src="/demo/1000x1000.png" alt=Imaginary image>
            </div>
        </a>
    </div>
    <div class="quick-info__content">
        <div class="quick-info__headline"><span class="h3">Title</span></div>
        <div class="quick-info__text">The groundbreaking ChefWave™ HD is the world&#x27;s first high pressure microwave deep fryer.</div>
        <a class="quick-info__cta btn -cta" href="#">More</a>
    </div>
</div>
 
{{!-- <div class="quick-info quick-info--active image-map__quick-info quick-info--image-map">
  <h5 class="quick-info__title">Title</h5>
  <a class="quick-info__button btn " href="#">More</a>
</div> --}}

<div class="{{mixes}} quick-info {{modifiers}}">
  <button class="quick-info__close"></button>
  <div class="quick-info__visual">
    <a href="#" class="quick-info__image-link">{{render '@atoms-media--image' }}</a>
  </div>
  <div class="quick-info__content">
    {{#if title}}
      <div class="quick-info__headline"><span class="h3">{{title}}</span></div>
    {{/if}}
    {{#if text}}
      <div class="quick-info__text">{{text}}</div>
    {{/if}}
    {{#link}}
    <a class="quick-info__cta btn -cta" href="{{href}}">{{text}}</a>
    {{/link}}
  </div>
</div>
 
{
  "modifiers": "-active",
  "title": "Title",
  "text": "The groundbreaking ChefWave™ HD is the world's first high pressure microwave deep fryer.",
  "link": {
    "href": "#",
    "text": "More"
  }
}
  • Content: 
    // stylelint-disable-next-line selector-no-qualifying-type
body.modal {
  overflow-y: hidden;
}

.quick-info {
  $root: &;

  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: auto;
  max-width: 100%;
  padding: 2.4rem;
  overflow: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: none;
  background-color: rgba(0, 0, 0, 0.5);

  &__wrapper {
    position: relative;
    max-width: calc(110rem);
    margin: 0 auto;
    overflow-y: auto;
  }

  &__close {
    $symbol: map-get($icons, 'cross');

    @include typography-level('button');

    position: absolute;
    top: 0;
    right: 0;
    z-index: 125;
    outline: 0 none;
    border: 0 none;
    background: $secondary;
    color: $white;
    cursor: pointer;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter);
        padding: $gutter / 2;
      }
    }

    &::before {
      @include icon-content-extended($symbol);
    }

    &:hover,
    &:focus {
      background-color: $black;
      color: $white;
    }
  }

  &__visual {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  &__content {
    background-color: $gray-lighter;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: rem-calc($gutter);
      }
    }
  }

  &__headline,
  &__text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__headline {
    margin-bottom: 0.8 * $base-margin;
  }

  &__cta:not(:first-child) {
    margin-top: 1.6 * $base-margin;
  }

  &.-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s;
  }

  &.-deactivate {
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s 0.25s;
  }

  &.content-lightbox {
    #{$root}__content {
      width: calc(100vw - 9.6rem);
      max-width: 100%;
    }
  }
}
  • URL: /components/raw/molecules-quick-info/_quick-info.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/18-quick-info/_quick-info.scss
  • Size: 2 KB

There are no notes for this item.