Lunds universitet - Style Guide

List Item: Card 

<div class="card card-item nav-block bg-transparent card-item-card" title="Heading" aria-label="Heading">
    <div class="card-img">
        <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="List item image description." class=" w-25">

        </div>
    </div>
    <div class="card-body">
        <div class="meta ">
            <span class="meta-date" datetime="2018-03-13 15:00+01:00">13 april kl. 15:00</span>
            <span class="meta-category">Category</span>
        </div>

        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
            <h3 class="nav-block-link mt-0 mb-2 h4">Heading</h3>
        </a>

    </div>
</div>
 
<div class="card card-item nav-block bg-transparent{{modifiers modifiers}}" title="{{heading}}{{#if lead}} - {{lead}}{{/if}}" aria-label="Heading">
  {{#if date}}
    <div class="card-date{{modifiers date-modifiers}}">
      {{render "@calendar-date-box" date}}
    </div>
  {{else if image}}
    <div class="card-img{{modifiers image-modifiers}}">
      <div class="card-img-container">
        {{render "@image" image}}
      </div>
    </div>
  {{/if}}
  <div class="card-body{{modifiers body-modifiers}}">
    {{render "@item-meta" meta}}
    <a href="{{#if link}}{{path link}}{{/if}}" class="text-primary nav-undecorated stretched-link">
      <h3 class="nav-block-link mt-0 mb-2{{#if heading-modifiers}}{{modifiers heading-modifiers}}{{else}} h4{{/if}}">{{heading}}</h3>
    </a>
    {{#if lead}}<p>{{{lead}}}</p>{{/if}}
  </div>
</div>
 
{
  "link": "#",
  "heading": "Heading",
  "image": {
    "src": "/images/_content/placeholder_1@1x.jpg",
    "src-2x": "/images/_content/placeholder_1@2x.jpg",
    "alt": "List item image description.",
    "modifiers": [
      "w-25"
    ]
  },
  "modifiers": [
    "card-item-card"
  ],
  "card-column": true
}

No notes defined.