England Football

Registration Member 

<!-- Default -->
<div class="registration-member registration-member--primary">
    <div class="bar"></div>
    <div class="container">
        <div class="heading">
            <span class="heading__key">TOTAL COST</span>
            <span class="heading__value">500.00</span>
        </div>
        <div class="detail">
            <div class="info-template registration_hide">
                <span class="info__key"></span>
                <span class="info__value"></span>
            </div>
            <div class="info">
                <span class="info__key">Adult Membership x1</span>
                <span class="info__value">£5.00</span>
            </div>
        </div>
    </div>
</div>


<!-- Secondary -->
<div class="registration-member registration-member--secondary">
    <div class="bar"></div>
    <div class="container">
        <div class="heading">
            <span class="heading__key">Juniors added</span>
            <span class="heading__value">500.00</span>
        </div>
        <div class="detail">
            <div class="info-template registration_hide">
                <span class="info__key"></span>
                <span class="info__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>


<!-- 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">Junior Membership Details</span>
            <span class="heading__value">500.00</span>
        </div>
        <div class="detail">
            <div class="info-header registration_hide">
                <span class="info__key">Name</span>
                <span class="info__value">info-header-value</span>
            </div>
            <div class="info-template registration_hide">
                <span class="info__key"></span>
                <span class="info__value"></span>
            </div>
            <div class="info">
                <span class="info__key">FAN</span>
                <span class="info__value">DOB: 02/02/2002</span>
            </div>
        </div>
    </div>
</div>

No notes defined.

/* Default */
{
  "modifier": "primary",
  "heading-key": "TOTAL COST",
  "heading-value": "500.00",
  "info-key": "Adult Membership  x1",
  "info-value": "£5.00"
}


/* Secondary */
{
  "modifier": "secondary",
  "heading-key": "Juniors added",
  "heading-value": "500.00",
  "info-key": "Gareth Young",
  "info-value": "DOB: 02/02/2002"
}


/* Secondary With Header */
{
  "modifier": "secondary-with-header",
  "heading-key": "Junior Membership Details",
  "heading-value": "500.00",
  "info-key": "FAN",
  "info-value": "DOB: 02/02/2002",
  "info-header-key": "Name",
  "info-header-value": "info-header-value"
}
  • Content: 
    .registration-member {
  display: flex;

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

  .container {
    width: 100%;
  }

  .info-header,
  .info,
  .heading {
    font-family: $registration-font;
    display: flex;
    justify-content: space-between;
    height: auto;
    font-weight: 400;
    font-size: 16px;
    padding: 8px 16px;
    border-color: $blue-accent4;
  }

  .heading {
    border-top-right-radius: 4px;
    background-color: $light-red;
  }

  .info-header,
  .info {
    border-color: $blue-accent4;
    background-color: $light-black1;
  }

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

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

  .info__key {
    text-transform: capitalize;
    width: 68%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (max-width: $mq-small) {
    .info__key {
      width: 60%;
    }
  }

  &--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.7 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>
            {{#if heading-value}}
            <span class="heading__value">{{heading-value}}</span>
            {{/if}}
        </div>
        <div class="detail">
            {{#if info-header-key}}
            <div class="info-header registration_hide">
                <span class="info__key">{{info-header-key}}</span>
                <span class="info__value">{{info-header-value}}</span>
            </div>
            {{/if}}
            <div class="info-template registration_hide">
                <span class="info__key">{{ info-template-key}}</span>
                <span class="info__value">{{info-template-value}}</span>
            </div> 
          <div class="info">
                <span class="info__key">{{info-key}}</span>
                <span class="info__value">{{info-value}}</span>
            </div>
        </div>
    </div>
</div>