Lunds universitet - Style Guide

Calendar Event Cards 

<div class="bg-sky-25 mb-8">
    <div class="container py-6">
        <div class="row mb-5">
            <div class="col">
                <div class="d-flex align-items-center">
                    <h2 class=" m-0">Kalendarium</h2>

                    <a href="#" class="ms-3"><span class="sr-only">RSS-flöde</span> <i class="fas fa-rss  fa-lg"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-6 col-xl-4 col-lined">
                <div class="card card-item nav-block bg-transparent nav-block flex-md-row card-item card-item-square card-item-lined flex-column h-100" title="Den svenska välfärdsstatens framväxt. Hälsa och välfärd i ett livscykelperspektiv" aria-label="Heading">
                    <div class="card-img 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="Den svenska välfärdsstatens framväxt. Hälsa och välfärd i ett livscykelperspektiv" class=" w-100">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">13 september, kl 14:00</span>
                            <span class="meta-category">Seminarium</span>
                        </div>

                        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                            <h3 class="nav-block-link mt-0 mb-2 h4">Den svenska välfärdsstatens framväxt. Hälsa och välfärd i ett livscykelperspektiv</h3>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6 col-xl-4 col-lined">
                <div class="card card-item nav-block bg-transparent nav-block flex-md-row card-item card-item-square card-item-lined flex-column h-100" title="Proportionalitetsprincipen i EU-skatterätten" aria-label="Heading">
                    <div class="card-img card-img">
                        <div class="card-img-container">
                            <img src="../../images/default/seal-300x200@1x.jpg" srcset="../../images/default/seal-300x200@1x.jpg 1x, ../../images/default/seal-300x200@2x.jpg 2x" alt="Proportionalitetsprincipen i EU-skatterätten" class=" w-100">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">13 september, kl 15:30</span>
                            <span class="meta-category">Seminarium</span>
                        </div>

                        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                            <h3 class="nav-block-link mt-0 mb-2 h4">Proportionalitetsprincipen i EU-skatterätten</h3>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6 col-xl-4 col-lined">
                <div class="card card-item nav-block bg-transparent nav-block flex-md-row card-item card-item-square card-item-lined flex-column h-100" title="Proportionalitetsprincipen i EU-skatterätten" aria-label="Heading">
                    <div class="card-img card-img">
                        <div class="card-img-container">
                            <img src="../../images/_content/placeholder_2@1x.jpg" srcset="../../images/_content/placeholder_2@1x.jpg 1x, ../../images/_content/placeholder_2@2x.jpg 2x" alt="Proportionalitetsprincipen i EU-skatterätten" class=" w-100">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">15 september, kl 14:00</span>
                            <span class="meta-category">Seminarium</span>
                        </div>

                        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                            <h3 class="nav-block-link mt-0 mb-2 h4">Proportionalitetsprincipen i EU-skatterätten</h3>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6 col-xl-4 col-lined">
                <div class="card card-item nav-block bg-transparent nav-block flex-md-row card-item card-item-square card-item-lined flex-column h-100" title="LinkedIn seminar: Optimize your online presence!" aria-label="Heading">
                    <div class="card-img card-img">
                        <div class="card-img-container">
                            <img src="../../images/_content/placeholder_3@1x.jpg" srcset="../../images/_content/placeholder_3@1x.jpg 1x, ../../images/_content/placeholder_3@2x.jpg 2x" alt="LinkedIn seminar: Optimize your online presence!" class=" w-100">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">16 september, kl 14:00</span>
                            <span class="meta-category">Övrigt</span>
                        </div>

                        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                            <h3 class="nav-block-link mt-0 mb-2 h4">LinkedIn seminar: Optimize your online presence!</h3>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6 col-xl-4 col-lined">
                <div class="card card-item nav-block bg-transparent nav-block flex-md-row card-item card-item-square card-item-lined flex-column h-100" title="Jubileumsfester på Ekonomihögskolan och i Lundagård" aria-label="Heading">
                    <div class="card-img card-img">
                        <div class="card-img-container">
                            <img src="../../images/_content/placeholder_4@1x.jpg" srcset="../../images/_content/placeholder_4@1x.jpg 1x, ../../images/_content/placeholder_4@2x.jpg 2x" alt="Jubileumsfester på Ekonomihögskolan och i Lundagård" class=" w-100">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">15 september, kl 14:00</span>
                            <span class="meta-category">Seminarium</span>
                        </div>

                        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                            <h3 class="nav-block-link mt-0 mb-2 h4">Jubileumsfester på Ekonomihögskolan och i Lundagård</h3>
                        </a>

                    </div>
                </div>

            </div>
            <div class="col-12 col-lg-6 col-xl-4 col-lined">
                <div class="card card-item nav-block bg-transparent nav-block flex-md-row card-item card-item-square card-item-lined flex-column h-100" title="Jubileumsfester på Ekonomihögskolan och i Lundagård" aria-label="Heading">
                    <div class="card-img card-img">
                        <div class="card-img-container">
                            <img src="../../images/default/seal-300x200@1x.jpg" srcset="../../images/default/seal-300x200@1x.jpg 1x, ../../images/default/seal-300x200@2x.jpg 2x" alt="Jubileumsfester på Ekonomihögskolan och i Lundagård" class=" w-100">

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="meta ">
                            <span class="meta-date">16 september, kl 14:00</span>
                            <span class="meta-category">Övrigt</span>
                        </div>

                        <a href="../../#.html" class="text-primary nav-undecorated stretched-link">
                            <h3 class="nav-block-link mt-0 mb-2 h4">Jubileumsfester på Ekonomihögskolan och i Lundagård</h3>
                        </a>

                    </div>
                </div>

            </div>
        </div>
        <div class="row pt-5">
            <div class="col text-end">
                <a href="../../#.html" class="nav-undecorated">Visa fler händelser&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                </a>

            </div>
        </div>
    </div>
</div>
 
<div class="bg-sky-25 mb-8">
  <div class="container py-6">
    <div class="row mb-5">
      <div class="col">
        <div class="d-flex align-items-center">
          {{render "@heading--level-2" heading merge=true}}
          <a href="{{rss-link}}" class="ms-3"><span class="sr-only">RSS-flöde</span> {{render "@icon" rss-icon}}</a>
        </div>
      </div>
    </div>
    <div class="row">
      {{#each items}}
        <div class="col-12 col-lg-6 col-xl-4 col-lined">
          {{render "@list-item--lined-square" this merge=true}}
        </div>
      {{/each}}
    </div>
    <div class="row pt-5">
      <div class="col text-end">
        {{render "@read-more-link" read-more-link}}
      </div>
    </div>
  </div>
</div>
 
{
  "_full-width": true,
  "heading": {
    "content": "Kalendarium",
    "modifiers": [
      "m-0"
    ]
  },
  "rss-link": "#",
  "rss-icon": {
    "icon": "rss",
    "style": "fas",
    "modifiers": [
      "fa-lg"
    ]
  },
  "read-more-link": {
    "link": "#",
    "text": "Visa fler händelser"
  },
  "items": [
    {
      "image": {
        "src": "/images/_content/placeholder_1@1x.jpg",
        "src-2x": "/images/_content/placeholder_1@2x.jpg",
        "alt": "Den svenska välfärdsstatens framväxt. Hälsa och välfärd i ett livscykelperspektiv"
      },
      "meta": {
        "date": "13 september, kl 14:00",
        "category": "Seminarium"
      },
      "link": "#",
      "heading": "Den svenska välfärdsstatens framväxt. Hälsa och välfärd i ett livscykelperspektiv"
    },
    {
      "image": {
        "src": "/images/default/seal-300x200@1x.jpg",
        "src-2x": "/images/default/seal-300x200@2x.jpg",
        "alt": "Proportionalitetsprincipen i EU-skatterätten"
      },
      "meta": {
        "date": "13 september, kl 15:30",
        "category": "Seminarium"
      },
      "link": "#",
      "heading": "Proportionalitetsprincipen i EU-skatterätten"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_2@1x.jpg",
        "src-2x": "/images/_content/placeholder_2@2x.jpg",
        "alt": "Proportionalitetsprincipen i EU-skatterätten"
      },
      "meta": {
        "date": "15 september, kl 14:00",
        "category": "Seminarium"
      },
      "link": "#",
      "heading": "Proportionalitetsprincipen i EU-skatterätten"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_3@1x.jpg",
        "src-2x": "/images/_content/placeholder_3@2x.jpg",
        "alt": "LinkedIn seminar: Optimize your online presence!"
      },
      "meta": {
        "date": "16 september, kl 14:00",
        "category": "Övrigt"
      },
      "link": "#",
      "heading": "LinkedIn seminar: Optimize your online presence!"
    },
    {
      "image": {
        "src": "/images/_content/placeholder_4@1x.jpg",
        "src-2x": "/images/_content/placeholder_4@2x.jpg",
        "alt": "Jubileumsfester på Ekonomihögskolan och i Lundagård"
      },
      "meta": {
        "date": "15 september, kl 14:00",
        "category": "Seminarium"
      },
      "link": "#",
      "heading": "Jubileumsfester på Ekonomihögskolan och i Lundagård"
    },
    {
      "image": {
        "src": "/images/default/seal-300x200@1x.jpg",
        "src-2x": "/images/default/seal-300x200@2x.jpg",
        "alt": "Jubileumsfester på Ekonomihögskolan och i Lundagård"
      },
      "meta": {
        "date": "16 september, kl 14:00",
        "category": "Övrigt"
      },
      "link": "#",
      "heading": "Jubileumsfester på Ekonomihögskolan och i Lundagård"
    }
  ]
}

No notes defined.