<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="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">
                    Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                    ist
                </p>
                <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="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">
                    Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                    ist Eine Beschreibung des Primers, der sehr interessant und
                    unterhaltsam ist
                </p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</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="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">
                    Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                    ist
                </p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autorin Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                    <li><a href="#">Und Vier</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="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">
                    Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                    ist
                </p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autorin Zwei</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="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">
                    Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                    ist
                </p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</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={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und
                    unterhaltsam ist</p>
                <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={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption"> Eine Beschreibung des Primers, der sehr interessant und
                    unterhaltsam ist Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist</p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</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={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und
                    unterhaltsam ist</p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autorin Zwei</a></li>
                    <li><a href="#">Doktor Drei</a></li>
                    <li><a href="#">Und Vier</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={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und
                    unterhaltsam ist</p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autorin Zwei</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={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
        <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>
                <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und
                    unterhaltsam ist</p>
                <ul class="resource-list-item__author">
                    <li><a href="#">Autorin Eins</a></li>
                    <li><a href="#">Autor Zwei</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;
      width: 100%;
      flex-direction: column;
      margin-bottom: $spacer-lg;
    }
    
    .resource-list-item-wrapper {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: space-between;
      padding: $spacer-md $spacer-sm;
      background-color: $brand-secondary;
      color: $brand-text-light;
    }
    
    .resource-list-item__body {
      padding-top: $spacer-xxl;
    }
    
    .resource-list-item__image {
      z-index: 2;
      width: 50%;
      border: 3px solid $brand-white;
      margin: 0 auto $spacer-sm;
      margin-bottom: -$spacer-xxl;
    }
    
    .resource-list-item__author {
      @extend %heading-font-regular;
    
      padding-left: 0;
      margin-bottom: $spacer-lg;
      color: $brand-primary;
      font-size: $font-size-base;
    
      > 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__caption {
      @extend %heading-font-regular;
    
      margin-bottom: $spacer-md;
      font-size: $font-size-base;
    }
    
    .resource-list-item__footer {
      display: flex;
      justify-content: space-between;
    
      .link-teaser {
        color: $brand-text-light;
      }
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .resource-list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
      }
    
      .resource-list-item {
        min-width: ms(32);
        max-width: 30%;
        flex-grow: 1;
        margin-right: $spacer-xs;
        margin-left: $spacer-xs;
      }
    }
    
  • URL: /components/raw/resource-list/_resource-list.scss
  • Filesystem Path: components/04-molecules/visual-elements/resource-list/_resource-list.scss
  • Size: 1.7 KB
  • Handle: @resource-list
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/resource-list/resource-list.html

No notes defined.