Conclusion 

<section class="conclusion">
    <div class="conclusion-content">
        <h2 class="conclusion-headline">Fazit</h2>
        <h3 class="conclusion-subheadline">Kurz auf den Punkt gebracht</h3>
        <div class="conclusion-text">
            <p>
                Bacon ipsum dolor amet andouille
                <a href="https://de.wikipedia.org/wiki/Ansatz">Ansatz</a> prosciutto
                alcatra tenderloin. Pork loin meatball short ribs ham chuck meatloaf
                sausage jerky, pastrami short loin. Ham hock kielbasa kevin boudin
                fatback sausage. Porchetta meatball ball tip, tri-tip alcatra venison
                tenderloin.
            </p>
        </div>
    </div>
</section>
 
<section class="conclusion">
    <div class="conclusion-content">
        <h2 class="conclusion-headline">Fazit</h2>
        <h3 class="conclusion-subheadline">Kurz auf den Punkt gebracht</h3>
        <div class="conclusion-text">
            <p>Bacon ipsum dolor amet andouille <a href="https://de.wikipedia.org/wiki/Ansatz">Ansatz</a> prosciutto alcatra tenderloin. Pork loin meatball short ribs ham chuck meatloaf sausage jerky, pastrami short loin. Ham hock kielbasa kevin boudin fatback sausage. Porchetta meatball ball tip, tri-tip alcatra venison tenderloin.</p>
        </div>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    $conclusion-border-size: ms(5);

//
// Conclusion
//

.conclusion {
  border-top: $conclusion-border-size solid $conclusion-border-color;
  border-bottom: $conclusion-border-size solid $conclusion-border-color;
  background: $conclusion-background-color;
  padding: $spacer-lg $spacer-base;
}

.conclusion-headline {
  color: $conclusion-headline-color;
  font-size: $font-size-xxxl;
}

.conclusion-subheadline {
  color: $conclusion-subheadline-color;
  font-size: $font-size-lg;
}

.conclusion-text {
  &,
  & > * {
    @extend %heading-font-regular;

    color: $conclusion-text-color;
    font-size: $font-size-sm;

    // Remove the margin of the last paragraph inside a conclusion
    &:last-child {
      margin-bottom: 0;
    }
  }

  a {
    border-bottom: 1px solid $conclusion-link-color;
    color: $conclusion-link-color;

    &:hover {
      border-bottom: 1px solid $conclusion-background-color;
      color: $conclusion-link-hover-color;
    }
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .conclusion {
    padding: $spacer-xxl 0;
  }

  .conclusion-headline {
    font-size: $font-size-xxxxl;
  }

  .conclusion-subheadline {
    font-size: $font-size-xl;
  }
}

@media screen and (min-width: $grid-breakpoint-lg) {
  .conclusion {
    border: $conclusion-border-size solid $conclusion-border-color;
  }
}
  • URL: /components/raw/conclusion/_conclusion.scss
  • Filesystem Path: components/02-molecules/article&blog-post-elements/conclusion/_conclusion.scss
  • Size: 1.3 KB
  • Handle: @conclusion
  • Preview:
  • Filesystem Path: components/02-molecules/article&blog-post-elements/conclusion/conclusion.html

No notes defined.