<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="{{ path '/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="{{ path '/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="{{ path '/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="{{ path '/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="{{ path '/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. */
.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-flow: row 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;
}
}
No notes defined.