<div class=" swipe " id="swipe">
<div class="row swipe-inner" style="width: calc(300% - 30px);">
<div class="col swipe-target" id="swipe-target-0">
<a href="" class="card nav-block nav-block-plaster-25 nav-block-hover-plaster-25 h-100" aria-label="Lorem ipsum dolor sit amet">
<div class="card-img p-2">
<div class="card-img-container">
<img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Card image description.">
</div>
</div>
<div class="card-body">
<div class="meta ">
<span class="meta-date">2018-10-13</span>
<span class="meta-category">Category</span>
</div>
<h3 class=" nav-block-link m-0">Lorem ipsum dolor sit amet</h3>
</div>
</a>
</div>
<div class="col swipe-target" id="swipe-target-1">
<a href="" class="card nav-block nav-block-plaster-25 nav-block-hover-plaster-25 h-100" aria-label="Lorem ipsum dolor sit amet">
<div class="card-img p-2">
<div class="card-img-container">
<img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Card image description.">
</div>
</div>
<div class="card-body">
<div class="meta ">
<span class="meta-date">2018-10-13</span>
<span class="meta-category">Category</span>
</div>
<h3 class=" nav-block-link m-0">Lorem ipsum dolor sit amet</h3>
</div>
</a>
</div>
<div class="col swipe-target" id="swipe-target-2">
<a href="" class="card nav-block nav-block-plaster-25 nav-block-hover-plaster-25 h-100" aria-label="Lorem ipsum dolor sit amet">
<div class="card-img p-2">
<div class="card-img-container">
<img src="../../images/_content/placeholder_1@1x.jpg" srcset="../../images/_content/placeholder_1@1x.jpg 1x, ../../images/_content/placeholder_1@2x.jpg 2x" alt="Card image description.">
</div>
</div>
<div class="card-body">
<div class="meta ">
<span class="meta-date">2018-10-13</span>
<span class="meta-category">Category</span>
</div>
<h3 class=" nav-block-link m-0">Lorem ipsum dolor sit amet</h3>
</div>
</a>
</div>
<div class="col ">
<a href="../../#.html" class="nav-block p-3 h-100 w-100 flex-column justify-content-between nav-block-flower-50 nav-block-hover-flower-50">
<div class="mb-5">
<h3 class=" h2 m-0 nav-block-link">Läs mer</h3>
</div>
<div class="nav-block-link align-self-end nav-block-link">Läs mer <i class="fal fa-chevron-circle-right fa-lg"></i>
</div>
</a>
</div>
</div>
</div>
<div class="swipe-steps" data-spy="scroll-x" data-source="#swipe"></div>
<div class="container-fluid">
<a href="#" class="nav-block w-100 p-3 mt-5 justify-content-center nav-block-flower-50 nav-block-hover-flower-50">
<div class="nav-block-link align-self-end nav-block-link">Läs mer <i class="fal fa-chevron-circle-right fa-lg"></i>
</div>
</a>
</div>
<div class="{{modifiers container}} swipe {{modifiers modifiers}}" id="{{id}}">
<div class="row swipe-inner{{modifiers row-modifiers}}" style="width: calc({{items.length}}00% - 30px);">
{{#each items}}
<div class="col swipe-target{{modifiers ../item-modifiers}}" id="{{../id}}-target-{{@key}}">
{{render "@card--event" this merge=true}}
</div>
{{/each}}
{{#if cta}}
<div class="col {{modifiers cta.item-modifiers}}">
{{render "@card--cta" cta merge=true}}
</div>
{{/if}}
</div>
</div>
<div class="swipe-steps{{modifiers steps-modifiers}}" data-spy="scroll-x" data-source="#{{id}}"></div>
{{#if cta}}
<div class="container-fluid{{modifiers cta.cta-modifiers}}">
<a href="{{cta.link}}" class="nav-block w-100 p-3 mt-5 justify-content-center{{modifiers cta.modifiers}}">
{{render "@read-more-link--block" cta.read-more-link}}
</a>
</div>
{{/if}}
{{#if read-more-link}}
<div class="text-right">
{{render "@read-more-link" read-more-link}}
</div>
{{/if}}
{
"id": "swipe",
"items": [
{
"item": 1
},
{
"item": 2
},
{
"item": 3
}
],
"cta": {
"link": "#",
"heading": {
"content": "Läs mer",
"modifiers": [
"h2",
"m-0",
"nav-block-link"
]
},
"read-more-link": {
"text": "Läs mer",
"modifiers": [
"align-self-end",
"nav-block-link"
]
},
"modifiers": [
"nav-block-flower-50",
"nav-block-hover-flower-50"
]
}
}
There are no notes for this item.