Aeroporto di Bologna - Design System

Title trend 

<div class="c-title-trend ">

    <div class="c-title-trend__values">
        <div class="c-title-trend__frame">
            <img src="../../images/title-trend-graphs.jpg" alt="">
        </div>
        <div class="c-title-trend__frame">
            <img src="../../images/title-trend-data.jpg" alt="">
        </div>
    </div>

    <div class="c-title-trend__docs">
        <ul>
            <li>
                <div class="c-starter c-starter--simple ">
                    <p class="c-starter__title">Bilanci 2018</p>
                    <div class="c-media o-media ">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Resoconto Intermedio sulla gestione al 31/03/2018" height="" width="32">
                        <div class="c-media__body o-media__body">
                            <a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="c-starter c-starter--simple ">
                    <p class="c-starter__title">Bilanci 2017</p>
                    <div class="c-media o-media ">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Bilancio consolidato Gruppo e Bilancio di Esercizio AdB" height="" width="32">
                        <div class="c-media__body o-media__body">
                            <a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="c-starter c-starter--simple ">
                    <div class="c-media o-media ">
                        <img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Resoconto Intermedio sulla gestione al 30/09/2017" height="" width="32">
                        <div class="c-media__body o-media__body">
                            <a href="#"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>
 
<div class="c-title-trend {{ modifier }}">

  <div class="c-title-trend__values">
    <div class="c-title-trend__frame">
      <img src="{{ path '/images/title-trend-graphs.jpg' }}" alt="">
    </div>
    <div class="c-title-trend__frame">
      <img src="{{ path '/images/title-trend-data.jpg' }}" alt="">
    </div>
  </div>

  <div class="c-title-trend__docs">
    <ul>
      {{#each docs}}
        <li>
          {{> @starter--doc item }}
        </li>
      {{/each}}
    </ul>
  </div>

</div>
 
{
  "docs": [
    {
      "item": {
        "title": "Bilanci 2018",
        "pdf": {
          "img-src": "/images/svgs/pdf.svg",
          "img-alt": "Resoconto Intermedio sulla gestione al 31/03/2018",
          "img-width": "32",
          "body": "<a href=\"#\"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb"
        }
      }
    },
    {
      "item": {
        "title": "Bilanci 2017",
        "pdf": {
          "img-src": "/images/svgs/pdf.svg",
          "img-alt": "Bilancio consolidato Gruppo e Bilancio di Esercizio AdB",
          "img-width": "32",
          "body": "<a href=\"#\"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb"
        }
      }
    },
    {
      "item": {
        "pdf": {
          "img-src": "/images/svgs/pdf.svg",
          "img-alt": "Resoconto Intermedio sulla gestione al 30/09/2017",
          "img-width": "32",
          "body": "<a href=\"#\"><strong>Orari voli Estate 2018</strong></a><br>PDF, 577 kb"
        }
      }
    }
  ]
}
  • Content: 
    .c-title-trend {

  @include min-screen(bp(tablet)) {
    display: flex;
  }

  main & {
    grid-column: main;
    margin-bottom: remify(40px);

    @include min-screen(bp(tablet)) {
      margin-bottom: remify(80px);
    }

  }

}

.c-title-trend__values {
  background-color: #fff;
  border-radius: remify(4px);
  @include shadow(medium);
  padding: remify(40px) 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: remify(16px);

  @include min-screen(bp(tablet)) {
    flex: 1 1 70%;
    margin-right: remify(16px);
    margin-bottom: 0;
  }

  @include min-screen(bp(tablet-p)) {
    flex-wrap: nowrap;
  }

}

.c-title-trend__frame {
  height: remify(300px);
  flex: 1 1 auto;
  padding: 0 remify(16px);
}

.c-title-trend__docs {
  background-color: #fff;
  border-radius: remify(4px);
  @include shadow(medium);
  padding: remify(40px) remify(16px);

  @include min-screen(bp(tablet)) {
    flex: 1 1 30%;
  }

  @include min-screen(bp(tablet-p)) {
    flex: 1 1 20%;
  }

}
  • URL: /components/raw/title-trend/_title-trend.scss
  • Filesystem Path: src/views/03-organisms/title-trend/_title-trend.scss
  • Size: 1 KB

No notes defined.