Aeroporto di Bologna - Design System

Identità profilo: Simple 

<div class="c-identity c-identity--simple">

    <div class="c-identity__info">
        <p class="c-identity__title">Dati di fatturazione</p>
        <dl>
            <dt>Nome</dt>
            <dd>Mario</dd>
            <dt>Cognome</dt>
            <dd>Rossi</dd>
            <dt>C.F.</dt>
            <dd>RSSMRS73D24G912Y</dd>
            <dt>Indirizzo</dt>
            <dd>Via del Triumvirato, 84 - 40132 Bologna (BO) - Italia</dd>
        </dl>

    </div>

</div>
 
<div class="c-identity {{ modifier }}">
  
  <div class="c-identity__info">
    {{#if title}}
      <p class="c-identity__title">{{ title }}</p>
    {{/if}}
    <dl>
      {{#each list}}
        <dt>{{ this.title }}</dt>
        <dd>{{ this.description }}</dd>
      {{/each}}
    </dl>
    
    {{#if hasPdf}}
      {{> @media pdf }}
    {{/if}}

  </div>

</div>
 
{
  "modifier": "c-identity--simple",
  "title": "Dati di fatturazione",
  "list": [
    {
      "title": "Nome",
      "description": "Mario"
    },
    {
      "title": "Cognome",
      "description": "Rossi"
    },
    {
      "title": "C.F.",
      "description": "RSSMRS73D24G912Y"
    },
    {
      "title": "Indirizzo",
      "description": "Via del Triumvirato, 84 - 40132 Bologna (BO) - Italia"
    }
  ],
  "pdf": {
    "img-src": "/images/svgs/pdf.svg",
    "img-alt": "Fattura n° 86796",
    "img-width": "36",
    "body": "Appena pronta, la fattura ti sarà inviata via mail.<br>Controlla la tua mail cercando con il n° ordine 86796"
  }
}
  • Content: 
    .c-identity {
  display: flex;
  background-color: #fff;
  border-radius: remify(4px);
  padding: 0;
  align-items: center;

  @include min-screen (bp(tablet)) {
    padding: 0;
  }

  img {
    display: none;
    margin-right: remify(32px);

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

    .c-utils--flight & {
      width: remify(80px);
    }
    
  }

  .c-identity__title {
    color: primary(night, 100);
    font-size: 125%;
    display: block;
    margin-bottom: remify(16px);
  }

  dl {
    display: flex;
    flex-wrap: wrap;
  }

  dl + a {
    display: block;
    margin-top: remify(24px);
  }

  dt, 
  dd {
    font-weight: fw(bold);
  }

  dt {
    width: 100%;
    color: primary(night, 100);
    text-transform: uppercase;

    @include min-screen (bp(phone-p)) {
      width: 35%;
    }

    // @include min-screen (bp(tablet)) {
    //   width: 25%;
    // }

  }

  dd {
    width: 100%;
    margin-bottom: remify(16px);

    &:last-of-type {
      margin-bottom: 0;
    }

    @include min-screen (bp(phone-p)) {
      width: 65%;
    }

    // @include min-screen (bp(tablet)) {
    //   width: 75%;
    // }

  }

  .c-utils & {
    flex: 1;
  }

}

/*------------------------------------*\
  Simple modifier
\*------------------------------------*/

.c-identity--simple {

  .c-identity__title {
    color: primary(night, 100);
    font-weight: fw(bold);
    text-transform: uppercase;
    margin-bottom: remify(16px);
  }

  main & {
    grid-column: main;
  }

  dt {
    font-weight: fw(regular);
  }

}

/*------------------------------------*
    Agency modifier
*------------------------------------*/

.c-identity--agency {
  & + & {
    margin-top: remify(16px);
  }
}
  • URL: /components/raw/identity/_identity.scss
  • Filesystem Path: src/views/02-molecules/identity/_identity.scss
  • Size: 1.7 KB

No notes defined.