Lunds universitet - Style Guide

Demo 1: Variant B 

<main id="lunds-universitet" class="main">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-6 mb-xl-0">
                <div class="row">
                    <div class="col-12 col-lg-9">
                        <div class="row mb-5">
                            <div class="col">
                                <div class="container-fluid mx-0 px-0 nav-undecorated">
                                    <div id="carousel-example" class="carousel slide" data-bs-ride="false">
                                        <div class="carousel-inner" tabindex="0">
                                            <div class="carousel-item active">
                                                <a href="../../#slide1-target.html" class="nav-block h-100" tabindex="-1">
                                                    <div class="carousel-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="Slide 1 image" class=" carousel-img">

                                                    </div>
                                                    <div class="carousel-caption">
                                                        <p>
                                                            <span class="a nav-block-link">Slide 1&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                                        </p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="carousel-item ">
                                                <a href="../../#slide2-target.html" class="nav-block h-100" tabindex="-1">
                                                    <div class="carousel-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="Slide 2 image" class=" carousel-img">

                                                    </div>
                                                    <div class="carousel-caption">
                                                        <p>
                                                            <span class="a nav-block-link">Slide 2&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                                        </p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="carousel-item ">
                                                <a href="../../#slide3-target.html" class="nav-block h-100" tabindex="-1">
                                                    <div class="carousel-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="Slide 3 image" class=" carousel-img">

                                                    </div>
                                                    <div class="carousel-caption">
                                                        <p>
                                                            <span class="a nav-block-link">Slide 3&nbsp;<i class="fal fa-chevron-circle-right fa-sm"></i></span>
                                                        </p>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-example" data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Föregående</span>
                                        </button>
                                        <button class="carousel-control-next" type="button" data-bs-target="#carousel-example" data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Nästa</span>
                                        </button>
                                        <div class="carousel-indicators">
                                            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
                                            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="1" class="" aria-label="Slide 2"></button>
                                            <button type="button" data-bs-target="#carousel-example" data-bs-slide-to="2" class="" aria-label="Slide 3"></button>
                                        </div>
                                        <div class="carousel-controls-container">
                                            <div class="carousel-controls">
                                                <button class="btn rounded-0 border-0 carousel-controls-pause"></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row equal-height">
                            <div class="col-lg-4 col-12">
                                <div class="infobox bg-copper">
                                    <h2 class=" h3 mt-0 mb-3">LTH:s databaser</h2>

                                    <p>Inom tekniska ämnen och arkitektur och design</p>

                                    <div class=" text-end font-weight-normal">
                                        <a href="../../#.html" class="nav-undecorated">Lorem ipsum&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                                        </a>
                                    </div>

                                </div>

                            </div>
                            <div class="col-lg-4 col-12">
                                <div class="infobox bg-copper-50">
                                    <h2 class=" h3 mt-0 mb-3">Ansök om lånekort</h2>

                                    <p>Logga in och ansök om lånekort</p>

                                    <div class=" text-end font-weight-normal">
                                        <a href="../../#.html" class="nav-undecorated">Lorem ipsum&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                                        </a>
                                    </div>

                                </div>

                            </div>
                            <div class="col-lg-4 col-12">
                                <div class="infobox bg-copper-25">
                                    <h2 class=" h3 mt-0 mb-3">Kontakt</h2>

                                    <p>LTHs bibliotek</p>

                                    <div class=" text-end font-weight-normal">
                                        <a href="../../#.html" class="nav-undecorated">Lorem ipsum&nbsp;<i class="fal fa-chevron-circle-right  fa-lg"></i>
                                        </a>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3">
                        <div class="infobox bg-copper-50">
                            <h2 class=" h3 mt-0 mb-3">Kontakt</h2>

                            <p><a href='#'>Johan Marklund</a>, prefekt<br>046-222 8013</p>

                            <p><a href='#'>Jan Olhager</a>, bitr prefekt<br>046-222 0366</p>

                            <p><strong>Allmänna frågor:</strong><br><a href='#'>info@tlog.lth.se</a><br>046-222 9151</p>

                            <p><strong>Institutionen för teknisk ekonomi och logistik</strong><br><strong>Lunds universitet, LTH</strong><br>Box 118<br>221 00 LUND<br><strong>Hämtställe: 9</strong></p>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
 
<main id="lunds-universitet" class="main">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-6 mb-xl-0">
                <div class="row">
                    <div class="col-12 col-lg-9">
                        <div class="row mb-5">
                            <div class="col">
                                {{render "@carousel" carousel}}
                            </div>
                        </div>
                        <div class="row equal-height">
                            <div class="col-lg-4 col-12">
                                {{render "@infobox" databaser}}
                            </div>
                            <div class="col-lg-4 col-12">
                                {{render "@infobox" lanekort}}
                            </div>
                            <div class="col-lg-4 col-12">
                                {{render "@infobox" kontakt}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-3">
                        {{render "@infobox--contact"}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
 
{
  "_site": "institution",
  "databaser": {
    "modifiers": [
      "bg-copper"
    ],
    "content": {
      "components": [
        {
          "component": "heading--level-2",
          "merge": true,
          "context": {
            "content": "LTH:s databaser",
            "modifiers": [
              "h3",
              "mt-0",
              "mb-3"
            ]
          }
        },
        {
          "component": "paragraph",
          "context": {
            "content": "Inom tekniska ämnen och arkitektur och design"
          }
        },
        {
          "component": "read-more-link--container",
          "merge": true,
          "context": {
            "container-modifiers": [
              "text-end",
              "font-weight-normal"
            ]
          }
        }
      ]
    }
  },
  "lanekort": {
    "modifiers": [
      "bg-copper-50"
    ],
    "content": {
      "components": [
        {
          "component": "heading--level-2",
          "merge": true,
          "context": {
            "content": "Ansök om lånekort",
            "modifiers": [
              "h3",
              "mt-0",
              "mb-3"
            ]
          }
        },
        {
          "component": "paragraph",
          "context": {
            "content": "Logga in och ansök om lånekort"
          }
        },
        {
          "component": "read-more-link--container",
          "merge": true,
          "context": {
            "container-modifiers": [
              "text-end",
              "font-weight-normal"
            ]
          }
        }
      ]
    }
  },
  "kontakt": {
    "modifiers": [
      "bg-copper-25"
    ],
    "content": {
      "components": [
        {
          "component": "heading--level-2",
          "merge": true,
          "context": {
            "content": "Kontakt",
            "modifiers": [
              "h3",
              "mt-0",
              "mb-3"
            ]
          }
        },
        {
          "component": "paragraph",
          "context": {
            "content": "LTHs bibliotek"
          }
        },
        {
          "component": "read-more-link--container",
          "merge": true,
          "context": {
            "container-modifiers": [
              "text-end",
              "font-weight-normal"
            ]
          }
        }
      ]
    }
  }
}

No notes defined.