Lunds universitet - Style Guide

Card: Full Height 

<div class="card nav-block h-100">
    <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." class=" card-img-top">

    </div>
    <div class="card-body">
        <div class="meta ">
            <span class="meta-date">2018-10-13</span>
            <span class="meta-category">Category</span>
        </div>

        <h2 class=" card-title nav-block-link m-0">Lorem ipsum dolor sit amet</h2>

        <p class=" card-text">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

        <a href="../../#.html" class="nav-undecorated stretched-link nav-block-link text-primary">Läs mer&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
        </a>

    </div>
</div>
 
<div class="card nav-block{{modifiers modifiers}}">
  {{#if image}}
    <div class="card-img-container">
      {{render "@image" image}}
    </div>
  {{/if}}
  <div class="card-body{{modifiers body-modifiers}}">
    {{#if meta}}
      {{render "@item-meta" meta}}
    {{/if}}
    {{#if heading}}
      {{render "@heading--level-2" heading merge=true}}
    {{/if}}
    {{#if lead}}
      {{render "@paragraph" lead merge=true}}
    {{/if}}
    {{#if read-more-link}}
      {{render "@read-more-link" read-more-link}}
    {{/if}}
  </div>
</div>
 
{
  "_bg-contrast": true,
  "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": [
    "h-100"
  ]
}

No notes defined.