Lunds universitet - Style Guide

Swipe: CTA 

<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&nbsp;<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&nbsp;<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.