<main role="main" class="podcast-overview-page podcast-overview-page--security">
<header class="topic-header bg-image-edition-12">
<div class="topic-header__body">
<div>
<h1 class="topic-header__title bg-image-edition-12">Der Security Podcast</h1>
</div>
<div class="topic-header__text">
Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
prosciutto buffalo drumstick strip steak capicola short loin.
Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
chuck doner. Pig venison pork chop shoulder corned beef capicola
meatball.
</div>
<ul class="toolbar">
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-feedback icon--brand-gray"></span>
Feedback
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-apple-itunes icon--brand-gray"></span>
Apple
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-spotify icon--brand-gray"></span>
Spotify
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-rss icon--brand-gray"></span>
RSS
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-text icon--brand-gray"></span>
Transkript
</a>
</li>
</ul>
<span class="icon icon-arrow-long-down icon--brand-gray"></span>
</div>
</header>
<article class="teaser-page-layout">
<div class="podcast-grid">
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-yellow"></span>
</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 podcast-teaser--avatar--security" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</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 podcast-teaser--default--security">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-yellow"></span>
</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 podcast-teaser--avatar--overlay--big--security" style="background-image: url(../../assets/example-content/heribert-rechts.png), url(../../assets/example-content/heribert-links.png) ">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
Heribert Innoq
</div>
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
Heribert Innoq
</div>
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person">
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-yellow"></span>
</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" class="podcast-overview-page podcast-overview-page--security">
<header class="topic-header bg-image-edition-12">
<div class="topic-header__body">
<div>
<h1 class="topic-header__title bg-image-edition-12">Der Security Podcast</h1>
</div>
<div class="topic-header__text">
Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
prosciutto buffalo drumstick strip steak capicola short loin.
Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
chuck doner. Pig venison pork chop shoulder corned beef capicola
meatball.
</div>
<ul class="toolbar">
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-feedback icon--brand-gray"></span>
Feedback
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-apple-itunes icon--brand-gray"></span>
Apple
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-spotify icon--brand-gray"></span>
Spotify
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-rss icon--brand-gray"></span>
RSS
</a>
</li>
<li class="toolbar__item">
<a href="#" class="toolbar__link">
<span class="icon icon-text icon--brand-gray"></span>
Transkript
</a>
</li>
</ul>
<span class="icon icon-arrow-long-down icon--brand-gray"></span>
</div>
</header>
<article class="teaser-page-layout">
<div class="podcast-grid">
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-yellow"></span>
</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 podcast-teaser--avatar--security" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</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 podcast-teaser--default--security">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-yellow"></span>
</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 podcast-teaser--avatar--overlay--big--security" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--avatar--overlay podcast-teaser--avatar--overlay--security" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-black"></span>
</div>
<div class="podcast-teaser__footer">
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
<div class="podcast-author podcast-author--security" itemscope itemtype="http://schema.org/Person" >
Heribert Innoq
</div>
</div>
</a>
<a href="#" class="podcast-teaser podcast-teaser--default podcast-teaser--default--security">
<div class="podcast-teaser__body">
<div class="podcast-teaser__caption">Security-Podcast</div>
<h2 class="podcast-teaser__headline podcast-teaser__headline--security">Podcast Headline</h2>
<h3 class="podcast-teaser__subheadline podcast-teaser__subheadline--security">
Podcast Subheadline
</h3>
<span class="icon icon-arrow-long-right icon--brand-yellow"></span>
</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:
.podcast-overview-page--security { ::selection { background: $brand-yellow; } .topic-header { .topic-header__body { color: $brand-gray; background-color: $brand-white; } } .toolbar__link { padding: $spacer-xs; color: $brand-gray; transition: standard-transition(background-color); &:hover, &:focus { color: $brand-white; background-color: $brand-gray; .icon { background: $brand-white; } } } } - URL: /components/raw/security-podcast-overview-page/_security-podcast-overview-page.scss
- Filesystem Path: components/01-pages/podcast-pages/security-podcast/security-podcast-overview-page/_security-podcast-overview-page.scss
- Size: 490 Bytes
- Handle: @security-podcast-overview-page
- Preview:
- Filesystem Path: components/01-pages/podcast-pages/security-podcast/security-podcast-overview-page/security-podcast-overview-page.html
No notes defined.