Lunds universitet - Style Guide

List Item: Calendar 

<div class="card card-item nav-block bg-transparent flex-row p-0 p-md-3 mb-3 mb-md-0 nav-block-hover-plaster-25" title="Heading" aria-label="Heading">
    <div class="card-date p-0">
        <div class="calendar-date-box">
            <div class="h1">27</div>
            <p>april</p>
        </div>

    </div>
    <div class="card-body p-0 ps-3 ps-md-0">
        <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-100"
    ]
  },
  "modifiers": [
    "flex-row",
    "p-0",
    "p-md-3",
    "mb-3",
    "mb-md-0",
    "nav-block-hover-plaster-25"
  ],
  "date": {
    "day": "27",
    "month": "april"
  },
  "date-modifiers": [
    "p-0"
  ],
  "body-modifiers": [
    "p-0",
    "ps-3",
    "ps-md-0"
  ]
}

No notes defined.