<article class="podcast-item card">
<div class="podcast-item-thumb">
<img src="/img/silhoutte.jpg" alt="" />
</div>
<div class="podcast-item-desc">
<div class="podcast-item-date">
January 21, 2024
</div>
<h3><a href="#">This is the Title</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus.</p>
<iframe title="Seeking Your First Big Opportunity in Tech" allowtransparency="true" height="150" width="100%" style="border: none; min-width: min(100%, 430px);" scrolling="no" data-name="pb-iframe-player" src="https://www.podbean.com/player-v2/?i=y5ag5-11f2e08-pb&from=pb6admin&share=1&download=1&rtl=0&fonts=Arial&skin=10&font-color=&logo_link=episode_page&btn-skin=3267a3"></iframe>
</div>
</article>
<article class="podcast-item card">
<div class="podcast-item-thumb">
{% block podcast_image %}
{% if podcast_img %}
<img src="{{ podcast_img }}" alt=""/>
{% endif %}
{% endblock podcast_image %}
</div>
<div class="podcast-item-desc">
{% block podcast_date %}
<div class="podcast-item-date">
{{ podcast_date }}
</div>
{% endblock podcast_date %}
{% block podcast_content %}
<h3><a href="{{ podcast_link }}">{{ podcast_title }}</a></h3>
<p>{{ podcast_description }}</p>
{{ podcast_embed_code }}
{% endblock podcast_content %}
</div>
</article>
{
"podcast_date": "January 21, 2024",
"podcast_author": "Author Name",
"podcast_img": "/img/silhoutte.jpg",
"podcast_link": "#",
"podcast_title": "This is the Title",
"podcast_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida. Nisi est sit amet facilisis magna. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tincidunt id aliquet risus feugiat. Justo laoreet sit amet cursus.",
"podcast_embed_code": "<iframe title=\"Seeking Your First Big Opportunity in Tech\" allowtransparency=\"true\" height=\"150\" width=\"100%\" style=\"border: none; min-width: min(100%, 430px);\" scrolling=\"no\" data-name=\"pb-iframe-player\" src=\"https://www.podbean.com/player-v2/?i=y5ag5-11f2e08-pb&from=pb6admin&share=1&download=1&rtl=0&fonts=Arial&skin=10&font-color=&logo_link=episode_page&btn-skin=3267a3\"></iframe>"
}
.podcast-item {
display: flex;
flex-direction: column;
align-items: center;
padding: $spacer;
margin: $spacer 0;
@include media-breakpoint-up(lg) {
flex-direction: row;
flex-wrap: nowrap;
}
.color-scheme-dark & {
background-color: $dark_mode_grey;
}
&-date {
margin: 0 0 $space_one_half 0;
font-style: italic;
}
&-details {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 $spacer;
@include media-breakpoint-up(md) {
flex-direction: row;
flex-wrap: nowrap;
align-items: unset;
margin: 0;
}
}
&-thumb {
img {
min-width: 150px;
max-width: 150px;
margin: 0 0 $spacer 0;
@include media-breakpoint-up(md) {
margin: 0 $spacer 0 0;
}
}
.preview-img {
max-width: unset !important;
padding: 0 !important;
}
}
&-desc {
width: 100%;
h3 {
a {
color: $navy_dark;
color: var(--navy_dark, $navy_dark);
border-bottom: 2px solid $navy_dark;
border-bottom: 2px solid var(--navy_dark, $navy_dark);
&:hover,
&:focus {
border-bottom: 0;
}
.color-scheme-dark & {
color: var(--blue_75, $blue_75);
border-bottom: 2px solid var(--grey_k60, $grey_k60);
&:hover,
&:focus {
color: var(--white, $white) !important;
}
}
}
}
p {
color: var(--base_font, $base_font);
}
}
}
Display individual podcast listing. It is a part of the podcast component.