<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;
      border-top: $conclusion-border-size solid $conclusion-border-color;
      border-bottom: $conclusion-border-size solid $conclusion-border-color;
      background: $conclusion-background-color;
    }
    
    .conclusion-wrapper {
      @extend %container-md;
    
      .btn {
        align-self: flex-start;
      }
    
      > * {
        margin-bottom: 0; //FIXME
      }
    }
    
    .conclusion-headline {
      align-self: flex-start;
      color: $conclusion-headline-color;
      font-size: $font-size-xxxl;
    }
    
    .conclusion-subheadline {
      align-self: flex-start;
      color: $conclusion-subheadline-color;
      font-size: $font-size-lg;
    }
    
    .conclusion-text {
      > * + * {
        margin-top: $spacer-md;
      }
    
      > * {
        @extend %heading-font-regular;
    
        color: $conclusion-text-color;
        font-size: $font-size-base;
      }
    
      a:not([class]) {
        border-bottom: 1px solid $conclusion-link-color;
        color: $conclusion-link-color;
    
        &:hover {
          border-bottom: 1px solid $conclusion-background-color;
          color: $conclusion-link-hover-color;
        }
      }
    
      ul {
        margin-left: $spacer-sm;
    
        /* stylelint-disable-next-line selector-max-compound-selectors */
        > li,
        > li p {
          @extend %heading-font-regular;
    
          padding-left: $spacer-xs;
    
        /* 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;
      }
    
      .conclusion-text {
        font-size: $font-size-sm;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .conclusion {
        border: $conclusion-border-size solid $conclusion-border-color;
      }
    
      .conclusion-headline {
        font-size: $font-size-xxxxl;
      }
    
      .conclusion-subheadline {
        font-size: $font-size-xl;
      }
    }
    
  • URL: /components/raw/conclusion/_conclusion.scss
  • Filesystem Path: components/04-molecules/article&blog-post-elements/conclusion/_conclusion.scss
  • Size: 1.9 KB
  • Handle: @conclusion
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/conclusion/conclusion.html

No notes defined.