<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(&#x27;/static/robert_podcast.png&#x27;);">
                <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(&#x27;/static/robert_podcast.png&#x27;);">
                <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(&#x27;/static/robert_podcast.png&#x27;), url(&#x27;/static/robert_podcast_left.png&#x27;);">
                <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(&#x27;/static/robert_podcast.png&#x27;);">
                <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"
}
  • Content:
    //
    // 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;
      }
    }
    
  • URL: /components/raw/podcast-page/_podcast-page.scss
  • Filesystem Path: components/04-pages/podcast-page/_podcast-page.scss
  • Size: 662 Bytes

There are no notes for this item.