Conclusion 

<section class="conclusion">
    <div class="conclusion-wrapper">
        <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. <code>Code</code>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>
            <ul>
                <li>
                    Unordered List item
                </li>
                <li>
                    Unordered List item with nested unordered list
                    <ul>
                        <li>
                            Nested unordered list item
                        </li>
                        <li>
                            Nested unordered list item with a nested unordered list
                            <ul>
                                <li>
                                    Another Nested unordered list item
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <p>industrial grade voodoo god papier-mache tanto free-market tower futurity jeans nodality singularity alcohol industrial
                        grade tank-traps engine vehicle tattoo. nano- claymore mine fluidity BASE jump boat otaku uplink tower sentient pistol
                        cartel advert vehicle bridge voodoo god Legba. realism film artisanal neural tower plastic ablative claymore mine media
                        garage pre- math- man neon decay media.</p>
                </li>
            </ul>
        </div>
        <a class="btn btn--large btn--inverted" data-label="Sprechen Sie mit uns" href="#">Sprechen Sie mit uns</a>
    </div>
</section>
 
<section class="conclusion">
    <div class="conclusion-wrapper">
        <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. <code>Code</code>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>
            <ul>
                <li>
                    Unordered List item
                </li>
                <li>
                    Unordered List item with nested unordered list
                    <ul>
                        <li>
                            Nested unordered list item
                        </li>
                        <li>
                            Nested unordered list item with a nested unordered list
                            <ul>
                                <li>
                                    Another Nested unordered list item
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <p>industrial grade voodoo god papier-mache tanto free-market tower futurity jeans nodality singularity alcohol industrial
                    grade tank-traps engine vehicle tattoo. nano- claymore mine fluidity BASE jump boat otaku uplink tower sentient pistol
                    cartel advert vehicle bridge voodoo god Legba. realism film artisanal neural tower plastic ablative claymore mine media
                    garage pre- math- man neon decay media.</p>
                </li>
            </ul>
        </div>
        <a class="btn btn--large btn--inverted" data-label="Sprechen Sie mit uns" href="#">Sprechen Sie mit uns</a>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    $conclusion-border-size: ms(5);

//
// Conclusion
//

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

.conclusion-wrapper {
  @extend %container-md;

  .btn {
    align-self: flex-start;
  }
}

.conclusion-headline {
  align-self: flex-start;
  font-size: $font-size-2xl;
  color: $conclusion-headline-color;
}

.conclusion-subheadline {
  align-self: flex-start;
  font-size: $font-size-lg;
  color: $conclusion-subheadline-color;
}

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

  > * {
    @extend %heading-font-regular;

    color: $conclusion-text-color;
  }

  a:not([class]) {
    color: $conclusion-link-color;
    border-bottom: 1px solid $conclusion-link-color;

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

  ul {
    margin-left: $spacer-sm;

    > li {
      padding-left: $spacer-xs;
    }

    /* stylelint-disable-next-line selector-max-compound-selectors */
    > li,
    > li p {
      @extend %heading-font-regular;

      /* stylelint-disable-next-line selector-max-compound-selectors */
      li::marker {
        color: $bullet-list-color;
      }
    }
  }

  code {
    background-color: $conclusion-background-color;
  }
}

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

@media screen and (min-width: $grid-breakpoint-lg) {
  .conclusion {
    border: $conclusion-border-size solid $conclusion-border-color;
  }

  .conclusion-headline {
    font-size: $font-size-3xl;
  }

  .conclusion-subheadline {
    font-size: $font-size-xl;
  }
}
  • URL: /components/raw/conclusion/_conclusion.scss
  • Filesystem Path: components/04-molecules/conclusion/_conclusion.scss
  • Size: 1.8 KB

No notes defined.