HIDA - Helmholtz Information and Data Science Academy

Quote: Zitat 

<blockquote class="quote quote--color-violet">
    <div class="quote__inner">
        <h3 class="headline headline--module-2">„Man weiß häufig noch nicht, was kaputt ist“</h3>
    </div>
</blockquote>
 
#{tag || 'blockquote'}.quote(
  class=classNames(
    color && `quote--color-${color}`,
    image && 'quote--image',
    center && 'quote--center'
  )
)&attributes(attr)
  .quote__inner
    if image
      .quote__image
        +include('@image', image)

    if number
      span.quote__number #{number}

    if headline
      +include('@headline', headline)

    if text
      +include('@paragraph', { text: text })
 
{
  "headline": {
    "size": "module-2",
    "level": 3,
    "text": "„Man weiß häufig noch nicht, was kaputt ist“"
  },
  "color": "violet"
}
  • Content: 
    .quote {
  padding: 3rem 2rem;
  position: relative;

  @include mq($from: m) {
    padding: 5rem 0 5rem 3rem;
  }

  @include mq($from: l) {
    padding: 8rem 0 8rem 5rem;
  }
}

.quote::before,
.quote::after {
  content: '';
  left: 0;
  position: absolute;
  width: 100%;

  @include mq($from: m) {
    width: 30rem;
  }

  @include mq($from: l) {
    width: 40rem;
  }
}

.quote::before {
  height: calc(100% - 5rem);
  top: 0;

  @include mq($from: l) {
    height: calc(100% - 8rem);
  }
}

.quote::after {
  background-position: right bottom;
  background-size: auto 100%;
  bottom: 0;
  content: '';
  height: 5rem;

  @include mq($from: l) {
    height: 8rem;
  }
}

.quote--color-blue-light {
  &::before {
    background: $color-blue-light;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-blue-light + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
  }
}

.quote--color-green {
  &::before {
    background: $color-green;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-green + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
  }
}

.quote--color-violet {
  &::before {
    background: $color-violet;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-violet + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
  }
}

.quote--color-turquoise {
  &::before {
    background: $color-turquoise;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-turquoise + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
  }
}

.quote--color-yellow {
  &::before {
    background: $color-yellow;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-yellow + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
  }
}

.quote--center {
  padding: 0;
  text-align: center;

  &::before,
  &::after {
    display: none;
  }
}

.quote .headline {
  @include mq($until: m) {
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

.quote--center.quote--color-blue-light .headline {
  color: $color-blue-light;
}

.quote--center.quote--color-green .headline {
  color: $color-green;
}

.quote--center.quote--color-violet .headline {
  color: $color-violet;
}

.quote--center.quote--color-turquoise .headline {
  color: $color-turquoise;
}

.quote--center.quote--color-yellow .headline {
  color: $color-yellow;
}

.quote__inner {
  position: relative;
  z-index: 1;
}

.quote--image {
  @include mq($until: m) {
    padding: 3rem 2rem 4rem;

    &::before {
      height: calc(100% - 13.8rem);
      top: 9rem;
    }
  }

  @include mq($from: m) {
    min-height: 36rem;
    padding: 5rem 0 5rem 25rem;

    &::before,
    &::after {
      left: 6.5rem;
    }
  }

  @include mq($from: l) {
    min-height: 42rem;
    padding: 8rem 0 8rem 31rem;
  }
}

.quote__image {
  margin: -3rem 0 3.5rem;
  max-width: 30rem;

  @include mq($from: m) {
    left: -25rem;
    margin: 0.5rem 0 0;
    max-width: 20rem;
    position: absolute;
  }

  @include mq($from: l) {
    left: -31rem;
    max-width: 25rem;
  }
}

.quote__image .image {
  box-shadow: $box-shadow-default;
}

.quote__number {
  display: inline-block;
  font-family: $font-family-secondary;
  font-size: 8rem;
  font-weight: $font-weight-bold;
  line-height: 1;
  margin-bottom: 0.8rem;

  @include mq($from: m) {
    font-size: 12rem;
  }

  @include mq($from: l) {
    font-size: 13rem;
  }
}

.quote--image .quote__number {
  @include mq($from: m) {
    margin-top: -1rem;
  }

  @include mq($from: l) {
    margin-top: -1.5rem;
  }
}

.quote .bodytext {
  margin-top: 0.5rem;
}

.quote--image .bodytext {
  margin-top: 1.5rem;
}

.quote .bodytext a:not(.link) {
  color: $color-blue;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: underline;
    }
  }
}
  • URL: /components/raw/quote/quote.scss
  • Filesystem Path: src/components/molecules/quote/quote.scss
  • Size: 4.4 KB

There are no notes for this item.