altinn-designsystem/dist/patterns/01-molekyler-03-media-110-altinnett-kalender-header/01-molekyler-03-media-110-altinnett-kalender-header.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 01-molekyler-03-media-110-altinnett-kalender-header -->
<div class="a-bgBlueLight mb-4 p-2 py-3 p-md-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-7">
        <p class="a-fontSizeXL mb-0">Arrangement</p>
        <h1 class="a-fontSizeXXXL a-fontBold a-blueDarkerText">Altinndagen 2018</h1>
        <div class="mb-4 mb-md-6">
          <i class="ai ai-pin ai-xs ai-nw ai-nw-pr"><span class="sr-only">Sted:</span></i>
          <!-- START: 00-atomer-02-lenker-02-♺-link-ekstern -->
          <!-- START: 00-atomer-02-lenker-00-link -->
          <a href="http://www.skatteetaten.no/" class=" ">
  Oslo Kongressenter, Youngsgate 21, Oslo
  
</a>
          <!-- END: 00-atomer-02-lenker-00-link -->


          <!-- END: 00-atomer-02-lenker-02-♺-link-ekstern -->

        </div>


        <div class="a-date-hiddencontainer flex-wrap">
          <div class="mr-1">
            <!-- START: 00-atomer-07-tekst-06-dato -->
            <div class="a-date a-date--large">
              <div class="a-date-day ">20</div>
              <div class="a-date-month">feb</div>
            </div>

            <!-- END: 00-atomer-07-tekst-06-dato -->

          </div>

          <!-- START: 00-atomer-08-lister-08-liste-unummerert-sammenkoblet -->
          <ul class="no-decoration connected-bullets mt-2">
            <li class="a-fontSizeS">
              <strong>
        Start:
      </strong> 09.00
            </li>
            <li class="a-fontSizeS">
              <strong>
        Slutt:
      </strong> 17.00
            </li>
          </ul>

          <!-- END: 00-atomer-08-lister-08-liste-unummerert-sammenkoblet -->


          <div class="mt-1">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai ai-date ai-nw ai-nw-pr   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <a href="#">Legg til i kalender</a>
          </div>
        </div>
        <!-- START: 00-atomer-02-lenker-10-♺-link-knapp-stor-bred -->
        <!-- START: 00-atomer-02-lenker-00-link -->
        <a href="http://www.skatteetaten.no/" class="a-btn-wide a-btn-border ">
  Meld deg på
  
</a>
        <!-- END: 00-atomer-02-lenker-00-link -->


        <!-- END: 00-atomer-02-lenker-10-♺-link-knapp-stor-bred -->

      </div>
      <div class="col-6 col-md-5 a-date-container">
        <!-- Klasse for datoer med flere dager: a-date-day--small -->
        <div class="a-date-container-inner flex-wrap">
          <div class="mr-1 mr-lg-3">
            <!-- START: 00-atomer-07-tekst-06-dato -->
            <div class="a-date a-date--large">
              <div class="a-date-day ">20</div>
              <div class="a-date-month">feb</div>
            </div>

            <!-- END: 00-atomer-07-tekst-06-dato -->

          </div>

          <!-- START: 00-atomer-08-lister-08-liste-unummerert-sammenkoblet -->
          <ul class="no-decoration connected-bullets mt-2">
            <li class="a-fontSizeS">
              <strong>
        Start:
      </strong> 09.00
            </li>
            <li class="a-fontSizeS">
              <strong>
        Slutt:
      </strong> 17.00
            </li>
          </ul>

          <!-- END: 00-atomer-08-lister-08-liste-unummerert-sammenkoblet -->


          <div class="mt-1">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="ai ai ai-date ai-nw ai-nw-pr   "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->

            <a href="#">Legg til i kalender</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END: 01-molekyler-03-media-110-altinnett-kalender-header -->