Aeroporto di Bologna - Design System

Identità profilo: Default 

<div class="c-identity ">

    <img src="../../images/svgs/personal-data.svg" alt="I tuoi dati di prenotazione" aria-hidden="true">

    <div class="c-identity__info">
        <dl>
            <dt>Nome</dt>
            <dd>Mario</dd>
            <dt>Cognome</dt>
            <dd>Rossi</dd>
            <dt>E-mail</dt>
            <dd>mariorossi@gmail.com</dd>
            <dt>Telefono</dt>
            <dd>348 1234567</dd>
        </dl>
    </div>

</div>
 
<div class="c-identity {{ modifier }}">
  
  <img src="{{ path '/images/svgs/personal-data.svg' }}" alt="I tuoi dati di prenotazione" aria-hidden="true">

  <div class="c-identity__info">
    {{#if title}}
      <strong class="c-identity__title">{{ title }}</strong>
    {{/if}}
    <dl>
      <dt>Nome</dt>
      <dd>Mario</dd>
      <dt>Cognome</dt>
      <dd>Rossi</dd>
      <dt>E-mail</dt>
      <dd>mariorossi@gmail.com</dd>
      <dt>Telefono</dt>
      <dd>348 1234567</dd>
      {{#if hasFlight}}
        <dt>Volo partenza</dt>
        <dd>FR7794</dd>
      {{/if}}
    </dl>
  </div>

</div>
 
/* No context defined. */
  • 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.