<main role="main">
<article class="teaser-page-layout">
<h2 class="teaser-section-heading">Podcasts</h2>
<div class="podcast-grid">
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url('/static/robert_podcast.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3><img src="../../assets/arrow-long-right-white.svg"></div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
<img src="../../assets/arrow-long-right-white.svg">
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar" style="background-image: url('/static/robert_podcast.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3><img src="../../assets/arrow-long-right-red.svg"></div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
<img src="../../assets/arrow-long-right-white.svg">
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big" style="background-image: url('/static/robert_podcast.png'), url('/static/robert_podcast_left.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3><img src="../../assets/arrow-long-right-white.svg"></div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url('/static/robert_podcast.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3>
<img src="../../assets/arrow-long-right-white.svg">
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">Podcast Subheadline</h3><img src="../../assets/arrow-long-right-white.svg"></div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
</div>
</a>
</div>
</article>
</main>
<main role="main">
<article class="teaser-page-layout">
<h2 class="teaser-section-heading">Podcasts</h2>
<div class="podcast-grid">
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url('/static/robert_podcast.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-white.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-white.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar" style="background-image: url('/static/robert_podcast.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-red.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-white.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big" style="background-image: url('/static/robert_podcast.png'), url('/static/robert_podcast_left.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-white.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url('/static/robert_podcast.png');">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-white.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Podcast</div>
<h2 class="podcast-teaser__headline">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline">
Podcast Subheadline
</h3>
<img src={context.app.uri("assets/arrow-long-right-white.svg")} />
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
</div>
</article>
</main>
{
"code": "pick(:love) do |something|\n n.times do\n result = play(something)\n result.publish\n end\nend\n"
}
//
// Teaser page layout
//
.teaser-page-layout {
margin-top: $grid-page-layout-margin;
margin-right: auto;
margin-bottom: $grid-page-layout-margin;
margin-left: auto;
width: 95%;
max-width: $grid-page-layout-width;
}
.podcast-grid {
display: grid;
grid-template-columns: 1fr;
grid-gap: $spacer-sm;
grid-auto-rows: 1fr;
}
@media screen and (min-width: $grid-breakpoint-md) {
.podcast-grid {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: $grid-breakpoint-lg) {
.podcast-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.podcast-teaser--avatar--overlay--big {
grid-column: span 2;
}
}
There are no notes for this item.