<ul class="resource-list">
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
</ul>
<ul class="resource-list">
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo"
            src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo"
            src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                            href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo"
            src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                            href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
    <li class="resource-list-item">
        <img class="resource-list-item__image" itemprop="photo"
            src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" alt="Ein Primer" />
        <div class=" resource-list-item-wrapper">
            <div class="resource-list-item__body">
                <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                <div class="resource-list-item__caption">
                    <p>
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist. Sogar mit <a
                            href="#">Textlink</a>
                    </p>
                </div>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                </ul>
            </div>
            <div class="resource-list-item__footer">
                <a href="#" class="link-teaser">Download PDF</a>
                <a href="#" class="link-teaser">Download ebook</a>
            </div>
        </div>
    </li>
</ul>
/* No context defined. */
  • Content:
    .resource-list {
      @extend %list-unstyled;
    
      display: flex;
      flex-direction: column;
    }
    
    .resource-list-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-bottom: $spacer-lg;
    }
    
    .resource-list-item-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    
      height: 100%;
      padding: $spacer-md $spacer-sm;
    
      color: $brand-text-light;
    
      background-color: $brand-secondary;
    }
    
    .resource-list-item__body {
      padding-top: $spacer-xxl;
    }
    
    .resource-list-item__image {
      z-index: 2;
    
      width: 50%;
      margin: 0 auto $spacer-sm;
      margin-bottom: -$spacer-xxl;
    
      border: 3px solid $brand-white;
    }
    
    .resource-list-item__author {
      @extend %heading-font-regular;
    
      margin-top: $spacer-md;
      padding-left: 0;
      font-size: $font-size-base;
      color: $brand-primary;
    
      > li {
        @extend %list-unstyled;
    
        margin-bottom: $spacer-xxs;
    
        > a {
          @extend %link-unstyled;
    
          &:focus,
          &:hover {
            @extend %heading-font-bold;
    
            background-color: $brand-text-light;
          }
        }
      }
    }
    
    .resource-list-item__title {
      margin-bottom: $spacer-xs;
      color: $brand-text-light;
    }
    
    .resource-list-item__title a {
      &:hover,
      &:focus {
        color: $brand-primary;
      }
    }
    
    .resource-list-item__caption {
      > * + * {
        margin-top: $spacer-xs;
      }
    
      > * {
        @extend %heading-font-regular;
    
        font-size: $font-size-base;
        color: $brand-white;
      }
    
      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;
        }
    
        li::marker {
          color: $brand-primary;
        }
        /* 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: $brand-primary;
          }
        }
      }
    }
    
    .resource-list-item__footer {
      display: flex;
      justify-content: space-between;
      margin-top: $spacer-lg;
    
      .link-teaser {
        color: $brand-text-light;
      }
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .resource-list {
        flex-flow: row wrap;
        align-items: stretch;
        justify-content: center;
      }
    
      .resource-list-item {
        flex-grow: 1;
    
        min-width: ms(32);
        max-width: 30%;
        margin-right: $spacer-xs;
        margin-left: $spacer-xs;
      }
    }
    
  • URL: /components/raw/resource-list/_resource-list.scss
  • Filesystem Path: components/04-molecules/resource-list/_resource-list.scss
  • Size: 2.5 KB

No notes defined.