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>


<!-- Zitat mit Autor -->
<blockquote class="quote quote--color-turquoise">
    <div class="quote__inner">
        <h3 class="headline headline--module-2">Ich bin eine Zitat oder Texthighlight. Ich unterbreche den Text und hebe wichtige Aussagen hervor.</h3>
        <p class="bodytext">Name des Zitatgebers</p>
    </div>
</blockquote>


<!-- Zitat mit Nummer -->
<blockquote class="quote quote--color-blue-light">
    <div class="quote__inner"><span class="quote__number">6</span>
        <h3 class="headline headline--module-2">Schulen ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eird tempor.</h3>
    </div>
</blockquote>


<!-- Zitat mit Bild, Zahl und Text -->
<blockquote class="quote quote--color-green quote--image">
    <div class="quote__inner">
        <div class="quote__image">
            <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" src="../../images/content/quote-300x300.jpg" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" data-src="../../images/content/quote-300x300.jpg" /></div>
        </div><span class="quote__number">3,6</span>
        <h3 class="headline headline--module-2">Millionen Euro investiert HIDA jährlich in die Aus- und Weiterbildung von Forschenden.</h3>
        <p class="bodytext">Zum Beispiel in Christian Gerloff und seine Grundlagenforschung für die Neurowissenschaft. Er ist den Signalen des menschlichen Gehirns an der <a href="#">HDS-LEE</a> auf der Spur – mit Data Science.</p>
    </div>
</blockquote>


<!-- Zitat mit Bild -->
<blockquote class="quote quote--color-yellow quote--image">
    <div class="quote__inner">
        <div class="quote__image">
            <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" src="../../images/content/quote-300x300.jpg" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="300" height="300" data-src="../../images/content/quote-300x300.jpg" /></div>
        </div>
        <h3 class="headline headline--module-2">Arbeiten Sie mit international anerkannten Forscher*innen, wie Prof. Dr. Xiaoxiang Zhu zusammen. Sie arbeitet auf dem Gebiet der KI und Datenwissenschaft in der Erdbeobachtung an der Munich School for Data Science (MuDS).</h3>
    </div>
</blockquote>


<!-- Zitat zentriert -->
<blockquote class="quote quote--color-blue-light quote--center">
    <div class="quote__inner">
        <h3 class="headline headline--module-3">„Jetzt, bei Single Cell, nimmt man den Smoothie, kann aber daraus ersehen, dass darin drei Erdbeeren und fünf Heidelbeeren enthalten sind; daher ist man jetzt in der Lage, sich einzelne Zellen anzuschauen, um zu sehen, was in ihnen vorgeht.“</h3>
        <p class="bodytext">Laura Martens</p>
    </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 })
 
/* Zitat */
{
  "headline": {
    "size": "module-2",
    "level": 3,
    "text": "„Man weiß häufig noch nicht, was kaputt ist“"
  },
  "color": "violet"
}


/* Zitat mit Autor */
{
  "headline": {
    "size": "module-2",
    "level": 3,
    "text": "Ich bin eine Zitat oder Texthighlight. Ich unterbreche den Text und hebe wichtige Aussagen hervor."
  },
  "color": "turquoise",
  "text": "Name des Zitatgebers"
}


/* Zitat mit Nummer */
{
  "headline": {
    "size": "module-2",
    "level": 3,
    "text": "Schulen ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eird tempor."
  },
  "color": "blue-light",
  "number": "6"
}


/* Zitat mit Bild, Zahl und Text */
{
  "headline": {
    "size": "module-2",
    "level": 3,
    "text": "Millionen Euro investiert HIDA jährlich in die Aus- und Weiterbildung von Forschenden."
  },
  "color": "green",
  "image": {
    "src": "/images/content/quote-300x300.jpg",
    "width": 300,
    "height": 300
  },
  "number": "3,6",
  "text": "Zum Beispiel in Christian Gerloff und seine Grundlagenforschung für die Neurowissenschaft. Er ist den Signalen des menschlichen Gehirns an der <a href=\"#\">HDS-LEE</a> auf der Spur – mit Data Science.\n"
}


/* Zitat mit Bild */
{
  "headline": {
    "size": "module-2",
    "level": 3,
    "text": "Arbeiten Sie mit international anerkannten Forscher*innen,  wie Prof. Dr. Xiaoxiang Zhu zusammen. Sie arbeitet auf dem Gebiet der KI und Datenwissenschaft in der Erdbeobachtung an der Munich School for Data Science (MuDS)."
  },
  "color": "yellow",
  "image": {
    "src": "/images/content/quote-300x300.jpg",
    "width": 300,
    "height": 300
  }
}


/* Zitat zentriert */
{
  "headline": {
    "size": "module-3",
    "level": 3,
    "text": "„Jetzt, bei Single Cell, nimmt man den Smoothie, kann aber daraus ersehen, dass darin drei Erdbeeren und fünf Heidelbeeren enthalten sind; daher ist man jetzt in der Lage, sich einzelne Zellen anzuschauen, um zu sehen, was in ihnen vorgeht.“"
  },
  "color": "blue-light",
  "center": true,
  "text": "Laura Martens"
}
  • 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.