Lunds universitet - Style Guide

Card: CTA 

<a href="" class="nav-block p-3 h-100 w-100 flex-column justify-content-between  bg-flower-50">
    <div class="mb-5">
        <h3 class=" card-title nav-block-link m-0">Lorem ipsum dolor sit amet</h3>

    </div>
    <div class="nav-block-link  stretched-link nav-block-link text-primary">Läs mer&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
    </div>

</a>
 
<a href="{{#if link}}{{path link}}{{/if}}" class="nav-block p-3 h-100 w-100 flex-column justify-content-between {{modifiers modifiers}}">
  <div class="mb-5">
    {{render "@heading--level-3" heading merge=true}}
  </div>
  {{render "@read-more-link--block" read-more-link merge=true}}
</a>
 
{
  "_bg-contrast": false,
  "image": {
    "src": "/images/_content/placeholder_1@1x.jpg",
    "src-2x": "/images/_content/placeholder_1@2x.jpg",
    "alt": "Card image description.",
    "modifiers": [
      "card-img-top"
    ]
  },
  "heading": {
    "modifiers": [
      "card-title",
      "nav-block-link",
      "m-0"
    ]
  },
  "lead": {
    "modifiers": [
      "card-text"
    ]
  },
  "read-more-link": {
    "link": "#",
    "text": "Läs mer",
    "modifiers": [
      "stretched-link",
      "nav-block-link",
      "text-primary"
    ]
  },
  "meta": {
    "date": "2018-10-13",
    "category": "Category"
  },
  "modifiers": [
    "bg-flower-50"
  ]
}

No notes defined.