Aeroporto di Bologna - Design System

User Data: Recap 

<div class="c-user-data c-user-data--recap">
    <div class="c-user-data__body">
        <p class="c-user-data__title">1° Passeggero (Adulto)</p>
        <div class="c-user-data__list">
            <div class="c-user-data__list-item">
                <div class="c-pictogram">
                    <span class="c-pictogram__icon">
                        <svg class="c-icon--24 u-color-night-40">
                            <use xlink:href="#ic-person-black-24px"></use>
                        </svg> </span>
                    <p class="c-pictogram__text"><strong>Mario Rossi</strong></p>
                </div>
            </div>
            <div class="c-user-data__list-item">
                <div class="c-pictogram">
                    <span class="c-pictogram__icon">
                        <svg class="c-icon--24 u-color-night-40">
                            <use xlink:href="#ic-email-black-24px"></use>
                        </svg> </span>
                    <p class="c-pictogram__text">mario.rossi@gmail.com</p>
                </div>
            </div>
            <div class="c-user-data__list-item">
                <div class="c-pictogram">
                    <span class="c-pictogram__icon">
                        <svg class="c-icon--24 u-color-night-40">
                            <use xlink:href="#ic-call-black-24px"></use>
                        </svg> </span>
                    <p class="c-pictogram__text">+39 333 12 34 567</p>
                </div>
            </div>
        </div>
    </div>
    <div class="c-user-data__actions">
        <div class="c-user-data__action">
            <a href="#" class="c-link c-link--text-icon ">
                <span>Modifica dati</span>
                <svg class="svg-12">
                    <use xlink:href="#ic_mode_edit_black_24px"></use>
                </svg></a>
        </div>
    </div>
</div>
 
<div class="c-user-data c-user-data--recap{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-user-data__body">
    {{#if title}}
    <p class="c-user-data__title">{{ title }}</p>
    {{/if}}
    <div class="c-user-data__list">
      {{#each items}}
      <div class="c-user-data__list-item">
        {{> @pictogram}}
      </div>
      {{/each}}
    </div>
  </div>
  {{#if edit-link}}
  <div class="c-user-data__actions">
    <div class="c-user-data__action">
      {{> @link--text-icon edit-link }}
    </div>
  </div>
  {{/if}}
</div>
 
{
  "title": "1° Passeggero (Adulto)",
  "items": [
    {
      "icon": {
        "symbol": "ic-person-black-24px",
        "class": "c-icon--24 u-color-night-40"
      },
      "text": "<strong>Mario Rossi</strong>"
    },
    {
      "icon": {
        "symbol": "ic-email-black-24px",
        "class": "c-icon--24 u-color-night-40"
      },
      "text": "mario.rossi@gmail.com"
    },
    {
      "icon": {
        "symbol": "ic-call-black-24px",
        "class": "c-icon--24 u-color-night-40"
      },
      "text": "+39 333 12 34 567"
    }
  ],
  "edit-link": {
    "text": "Modifica dati",
    "url": "#",
    "svg": {
      "symbol": "ic_mode_edit_black_24px",
      "class": "svg-12"
    }
  }
}
  • Content: 
    .c-user-data {
  // display: flex;
  padding: remify(16px) 0;
  border-bottom: remify(1px) solid rgba( primary(night, 120), .2 );

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

  .c-form & {
    padding: 0;
    border: none;
  }

}

.c-user-data__body {
  flex: 1 0 auto;
  padding-right: remify(16px);
}

.c-user-data__title {
  @include font-scale(level-2, semibold);
  color: primary(night, 100);
  margin-bottom: remify(16px);

  @include min-screen(bp(tablet)) {
    @include font-scale(level-4, semibold);
  }

}

.c-user-data__name {
  @include font-scale(level-2);
  color: primary(night, 100);

  @include min-screen(bp(tablet)) {
    @include font-scale(level-3);
  }

}

.c-user-data__actions {
  align-self: flex-start;
  margin-top: remify(40px);
}

.c-user-data__list-item + .c-user-data__list-item {
  margin-top: remify(12px);
}

/*------------------------------------*
  Modifier: c-user-data--raw
*------------------------------------*/
.c-user-data--raw {
  border-bottom: none;

  .c-user-data__title {
    color: primary(night, 60);
  }

}
  • URL: /components/raw/user-data/_user-data.scss
  • Filesystem Path: src/views/02-molecules/user-data/_user-data.scss
  • Size: 1.1 KB

No notes defined.