generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
58
newspaper/partials/components/horizontal-card.hbs
Normal file
58
newspaper/partials/components/horizontal-card.hbs
Normal file
@ -0,0 +1,58 @@
|
||||
<div class="horizontal-card">
|
||||
<div class="horizontal-card-inner">
|
||||
<small class="small-card-small-text">
|
||||
{{#if isRelatedArticle}}
|
||||
<span>
|
||||
{{#if isNextArticle}}
|
||||
{{t "Next Article"}}
|
||||
{{else}}
|
||||
{{t "Previous Article"}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{else}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="medium-text hover-underline small-card-heading two-lines-mobile">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{#if isRelatedArticle}}
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
{{/if}}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="small-card-image-link horizontal-card-image-link hover-image-opacity">
|
||||
<figure class="small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xs" format="webp"}} 300w,
|
||||
{{img_url feature_image size="s" format="webp"}} 720w,
|
||||
{{img_url feature_image size="m" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user