England Football

Registration Member: Secondary With Header 

<div class="registration-member registration-member--secondary-with-header">
    <div class="bar"></div>
    <div class="container">
        <div class="heading">
            <span class="heading__key">Juniors added</span>
            <span class="heading__value">J£105.00</span>
        </div>
        <div class="detail">
            <div class="info info-header registration_hide">
                <span class="info__key">info-header-key</span>
                <span class="info__value">info-header-value</span>
            </div>
            <div class="info">
                <span class="info__key">Gareth Young</span>
                <span class="info__value">DOB: 02/02/2002</span>
            </div>
        </div>
    </div>
</div>

No notes defined.

{
  "modifier": "secondary-with-header",
  "heading-key": "Juniors added",
  "heading-value": "J£105.00",
  "info-key": "Gareth Young",
  "info-value": "DOB: 02/02/2002",
  "info-header-key": "info-header-key",
  "info-header-value": "info-header-value"
}
  • Content: 
    .registration-member {
  display: flex;

  &:not(:has(.info)) {
    display: none;
  }

  .container {
    width: 100%;
  }

  .info, .heading {
    font-family: $registration-font;
    display: flex;
    justify-content: space-between;
    height: 32px;
    font-weight: 400;
    font-size: 16px;
    padding: 8px 16px;
    border-color: #3372B2;
  }

  .heading {
    border-top-right-radius: 4px;
    background-color: #fff3;
  }

  .info {
    border-color: $blue-accent4;
    background-color: #ffffff1a;
  }

  .info:last-child {
    border-bottom-right-radius: 4px;
  }

  .info:not(first-child) {
    border-top: 1px solid $blue-accent4;
  }

  &--primary {
    .info:last-child {
      border-bottom-left-radius: 4px;
    }

    .heading {
      border-top-left-radius: 4px;
      &__key {
        font-weight: 700;
      }
    }
  }
  &--secondary-with-header,
  &--secondary {
    .bar {
      width: 8px;
      background-color: $blue-accent5;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      margin-right: 3px;
    }

    .heading {
      &__value {
        display: none;
      }
    }
  }
  .info-header {
    display: none;
  }
  &--secondary-with-header {
    .info-header.registration_hide {
      display: flex !important;
    }
  }
}
  • URL: /components/raw/registration-member/registration-member.scss
  • Filesystem Path: src/library/modules/registration/registration-member/registration-member.scss
  • Size: 1.4 KB 
<div class="registration-member registration-member--{{modifier}}">
    <div class="bar"></div>
    <div class="container">
        <div class="heading">
            <span class="heading__key">{{heading-key}}</span>
            <span class="heading__value">{{heading-value}}</span>
        </div>
        <div class="detail">
            <div class="info info-header registration_hide">
                <span class="info__key">{{info-header-key}}</span>
                <span class="info__value">{{info-header-value}}</span>
            </div>
            <div class="info">
                <span class="info__key">{{info-key}}</span>
                <span class="info__value">{{info-value}}</span>
            </div>
        </div>
    </div>
</div>