Lunds universitet - Style Guide

Card: Event 

<div class="card nav-block nav-block-plaster-25 nav-block-hover-plaster-25 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>

        <a href="../preview/event-detail-page.html" class="stretched-link nav-undecorated nav-undecorated stretched-link">
            <h2 class=" card-title nav-block-link m-0">Lorem ipsum dolor sit amet</h2>
        </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"
    ],
    "link-modifiers": [
      "nav-undecorated",
      "stretched-link"
    ],
    "link": "/components/preview/event-detail-page"
  },
  "lead": false,
  "read-more-link": false,
  "meta": {
    "date": "2018-10-13",
    "category": "Category"
  },
  "modifiers": [
    "nav-block-plaster-25",
    "nav-block-hover-plaster-25",
    "h-100"
  ]
}

No notes defined.