<div class="project-index">
    <div class="project-index__entry">
        <header class="project-index__header">
            <h1 class="project-index__title">A</h1>
        </header>
        <ul class="project-index__client-projects client-projects">
            <li class="client-projects__client">
                <header class="client-projects__header">
                    <h1 class="client-projects__client-name">Allianz</h1>
                </header>
                <div class="client-projects__project">
                    <div class="client-projects__intro">
                        <h2 class="client-projects__project-title">Frische neue Ideen</h2>
                        <p class="client-projects__intro-text">
                            Dolor commodo dolor id consequat elit cillum tempor ad culpa ipsum
                            ea sint. Minim anim esse proident sint sit laborum tempor dolore
                            cillum aliqua aliqua. Nisi ipsum deserunt minim commodo est ut
                            aliqua.
                        </p>
                    </div>
                    <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                </div>
                <div class="client-projects__project">
                    <div class="client-projects__intro">
                        <h2 class="client-projects__project-title">
                            Meteoriteneinschlag in der IT
                        </h2>
                        <p class="client-projects__intro-text">
                            Dolor commodo dolor id consequat elit cillum tempor dolore cillum
                            aliqua aliqua.
                        </p>
                    </div>
                    <multi-toggler aria-hidden="true" class="collapse-toggler client-projects__show-more-btn" data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed" data-toggle-on-init><span class="collapse-toggler__flop">mehr anzeigen<span class="icon-svg icon-plus icon--brand-primary"></span></span><span class="collapse-toggler__flip">weniger anzeigen<span class="icon-svg icon-minus icon--brand-primary"></span></span></multi-toggler>
                    <p class="client-projects__text">
                        Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud consequat
                        adipisicing in occaecat sit qui. Irure excepteur tempor eu
                        consectetur proident laborum commodo ullamco deserunt excepteur
                        culpa. Excepteur dolore ad veniam et in culpa dolore irure aliqua.
                        Ea fugiat minim cillum exercitation. Culpa ex nulla id consequat
                        pariatur quis non veniam qui consequat ipsum cillum. Sint eiusmod
                        nulla veniam mollit sunt cillum ea adipisicing adipisicing laborum
                        quis ea aliqua. Et sit mollit aliqua irure minim do deserunt
                        proident consectetur consequat.
                    </p>
                </div>
            </li>
            <li class="client-projects__client">
                <header class="client-projects__header">
                    <h1 class="client-projects__client-name">AXA</h1>
                </header>
                <div class="client-projects__project">
                    <div class="client-projects__intro">
                        <h2 class="client-projects__project-title">
                            Benutzerfreundlich und Agil
                        </h2>
                        <p class="client-projects__intro-text">
                            Dolor commodo dolor id consequat elit cillum tempor ad culpa ipsum
                            ea sint. Minim anim esse proident sint sit laborum tempor dolore
                            cillum aliqua aliqua. Nisi ipsum deserunt minim commodo est ut
                            aliqua.
                        </p>
                    </div>
                    <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="project-index">
    <div class="project-index__entry">

        <header class="project-index__header">
            <h1 class="project-index__title">A</h1>
        </header>

        <ul class="project-index__client-projects client-projects">

            <li class="client-projects__client">
                <header class="client-projects__header">
                    <h1 class="client-projects__client-name">Allianz</h1>
                </header>
                <div class="client-projects__project">
                    <div class="client-projects__intro">
                        <h2 class="client-projects__project-title">Frische neue Ideen</h2>
                        <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                    </div>
                    <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                </div>
                <div class="client-projects__project">
                    <div class="client-projects__intro">
                        <h2 class="client-projects__project-title">Meteoriteneinschlag in der IT</h2>
                        <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor dolore cillum aliqua aliqua.</p>
                    </div>
                    <multi-toggler aria-hidden="true" class="collapse-toggler client-projects__show-more-btn" data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed" data-toggle-on-init>
                        <span class="collapse-toggler__flop">mehr anzeigen
                            <span class="icon-svg icon-plus icon--brand-primary"></span>
                        </span>
                        <span class="collapse-toggler__flip">weniger anzeigen
                            <span class="icon-svg icon-minus icon--brand-primary"></span>
                        </span>
                    </multi-toggler>
                    <p class="client-projects__text">Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud consequat adipisicing in occaecat sit qui. Irure excepteur tempor eu consectetur proident laborum commodo ullamco deserunt excepteur culpa. Excepteur dolore ad veniam et in culpa dolore irure aliqua. Ea fugiat minim cillum exercitation. Culpa ex nulla id consequat pariatur quis non veniam qui consequat ipsum cillum. Sint eiusmod nulla veniam mollit sunt cillum ea adipisicing adipisicing laborum quis ea aliqua. Et sit mollit aliqua irure minim do deserunt proident consectetur consequat.</p>
                </div>
            </li>

            <li class="client-projects__client">
                <header class="client-projects__header">
                    <h1 class="client-projects__client-name">AXA</h1>
                </header>
                <div class="client-projects__project">
                    <div class="client-projects__intro">
                        <h2 class="client-projects__project-title">Benutzerfreundlich und Agil</h2>
                        <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                    </div>
                    <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                </div>
            </li>

        </ul>

    </div>
</div>
/* No context defined. */
  • Content:
    //
    // project-index
    //
    
    // Related Markup probably not necessary in actual page
    .project-index {
      color: $project-index-text-color;
    }
    
    .project-index__entry {
      margin-top: $spacer-xl;
    }
    
    .project-index__header {
      border-bottom: 5px solid $project-index-text-color;
      text-align: center;
    }
    
    .project-index__title {
      @extend %h1;
    
      display: inline-block;
      padding: 0 $spacer-sm $spacer-xs;
      margin: 0;
      background-color: $project-index-text-color;
      color: $project-index-text-inverted-color;
    }
    
    //
    // client-projects
    //
    
    .client-projects {
      @extend %list-unstyled;
    
      position: relative;
    }
    
    .client-projects__header {
      margin-top: $spacer-sm;
    }
    
    .client-projects__client {
      position: relative;
    }
    
    .client-projects__client-name {
      margin: $spacer-lg 0 $spacer-sm;
      color: $project-index-highlight-color;
      font-size: $font-size-sm;
      hyphens: auto;
    }
    
    .client-projects__project {
      display: grid;
      padding: $spacer-sm 0;
      border-top: 1px solid $project-index-text-color;
      border-bottom: 1px solid $project-index-text-color;
      grid-auto-rows: auto;
      grid-template-columns: 1fr;
    
      &:last-child {
        border-bottom-width: 2px;
      }
    }
    
    .client-projects__project + .client-projects__project {
      border-top: 0;
    }
    
    .client-projects__project-title {
      margin-bottom: $spacer-sm;
      color: $project-index-title-color;
      font-size: $font-size-sm;
      hyphens: auto;
      text-transform: none;
    }
    
    .client-projects__intro-text {
      @extend %teaser-text-italic;
    
      margin: 0;
    }
    
    .client-projects__show-more-btn,
    .client-projects__goto-btn {
      margin: $spacer-sm 0 0;
      justify-self: start;
    }
    
    .client-projects__show-more-btn {
      .icon-svg {
        margin-left: $spacer-xxs;
      }
    }
    
    .client-projects__text {
      @extend %teaser-text;
    
      margin: $spacer-md 0 $spacer-sm;
    }
    
    @supports (display: grid) {
      @media screen and (min-width: $grid-breakpoint-md) {
        .client-projects__header {
          position: absolute;
          max-width: 11rem; // Hacky, we should consider a refactoring of the whole component
        }
    
        .client-projects__client-name {
          margin: 0;
        }
    
        .client-projects__project {
          grid-column-gap: $spacer-md;
          grid-template-columns: 1fr 50% 1fr;
        }
    
        .client-projects__intro {
          grid-column: 2 / span 1;
        }
    
        .client-projects__show-more-btn,
        .client-projects__goto-btn {
          align-self: end;
          grid-column: 3 / span 1;
          justify-self: end;
        }
    
        .client-projects__text {
          grid-column: 2 / span 2;
        }
      }
    }
    
  • URL: /components/raw/project-list-teaser/_project-list-teaser.scss
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/project-list-teaser/_project-list-teaser.scss
  • Size: 2.5 KB
  • Handle: @project-list-teaser
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/teaser/list-teaser/project-list-teaser/project-list-teaser.html

No notes defined.