Aeroporto di Bologna - Design System

User Data: Default 

<div class="c-user-data">
    <div class="c-user-data__body">
        <p class="c-user-data__title">1° Passeggero (Adulto)</p>
        <p class="c-user-data__name">Mario Rossi</p>
    </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{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-user-data__body">
    <p class="c-user-data__title">{{ title }}</p>
    <p class="c-user-data__name">{{ name }}</p>
  </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)",
  "name": "Mario Rossi",
  "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.