# Conclusion

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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

- Handle: @conclusion
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/conclusion/conclusion.html

No notes defined.