England Football

Dropdown 

<div class="main-container">
    <div class="content-wrapper">
        <div class="left-section">
            <div class="question-number">
                <svg class="icon-style" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
                </svg>
                Question 1 / 10
            </div>
            <div class="country-text">
                Select your city/town of birth?
            </div>
            <div class="dropdown-label">
                Select from dropdown list
            </div>
        </div>
        <div class="right-section">
            <div class="input-container">
                <div class="dropdownContainer">
                    <button id="dropdownButton" class="dropdownButton" aria-haspopup="true" aria-expanded="false">
                        Select an option
                        <img src="/assets/example-content/downarrow.svg" alt="arrow" class="arrowIcon" id="dropdownArrow" />
                    </button>
                    <div id="dropdownList" class="dropdownList" style="display: none;">
                        <div class="dropdownItem" onclick="selectOption('Paris')">Paris</div>
                        <div class="dropdownItem" onclick="selectOption('London')">London</div>
                        <div class="dropdownItem" onclick="selectOption('Berlin')">Berlin</div>
                        <div class="dropdownItem" onclick="selectOption('Madrid')">Madrid</div>
                    </div>
                </div>

                <a class="cta cta--dropdown  " id="dropdown-Next" tabindex="0">Next</a>

            </div>
        </div>
    </div>

    <img class="desktop-background" src="/assets/example-content/background.svg" alt="Background Image" />
    <img src="/assets/example-content/mobilebackground.svg" alt="Background Image" class="bg-image-mobile">
</div>

No notes defined.

{
  "questionNumber": "Question 1 / 10",
  "question": "Select your city/town of birth?",
  "dropdownLabel": "Select from dropdown list",
  "nextButtonText": "Next",
  "nextButtonDisabledStyle": "cursor: default; opacity: 0.6;",
  "nextButtonDisabled": true,
  "backgroundImage": "/assets/example-content/background.svg",
  "mobilebackgroundimage": "/assets/example-content/mobilebackground.svg",
  "Next-cta": {
    "copy": "Next",
    "modifier": "dropdown",
    "id": "dropdown-Next",
    "href": "",
    "additionalClass": ""
  }
}
  • Content: 
    /* stylelint-disable */
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  z-index: 10;
  width: 80%;
}

.desktop-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bg-image-mobile {
  display: none;
}

.left-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  color: #ffffff;
  width: 50%;
}

.question-number {
  font-family: 'FS Dillon';
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #aebde6;
  margin-bottom: 2%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-image {
  position: absolute;
  left: -30px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.country-text {
  font-family: 'FS Dillon';
  font-size: 47.4px;
  font-weight: 700;
  line-height: 52px;
  color: white;
}

.dropdown-labels {
  font-family: 'FS Dillon';
  font-weight: 400;
  color: #aebde6;
  margin-top: 3%;
  font-size: 26.7px;
  line-height: 36px;
}

.right-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  // align-items: center;
  width: 35%;
}

.input-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8%;
  gap: 24px;
}


@media (max-width: 709px) {
  .content-wrapper {
    flex-direction: column;
    align-items: center;
    width: 90%;
  }

  .left-section, .right-section {
    width: 100%;
    text-align: center;
    // align-items: flex-start;
  }

  .dropdown-labels {
    font-size:18px;
    line-height: 24px;
  }
  .question-number{
    font-size: 11.26px;
    line-height: 16px;
    color:#E9EBF1;

  }

  .desktop-background {
    display: none;
  }

  .bg-image-mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .country-text {
    font-size: 31.1px;
    text-align: left;
    line-height: 40px;
  }

  .input-container {
    margin-top: 5%;
  }

  .icon-image {
    display: none;
  }
}

@media (min-width: 710px) and (max-width: 1023px) {
  .content-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }

  .left-section, .right-section {
    width: 50%;
  }

  .country-text {
    font-size: 40px;
  }

  .dropdown-labels {
    font-size: 24px;
  }

  .question-number {
    font-size: 14px;
  }
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .country-text {
    font-size: 47.4px;
    width: 70%;
  }

  .dropdown-labels {
    font-size: 26.7px;
  }

  .question-number {
    font-size: 15px;
    line-height: 20px;
  }
  .bg-image-mobile {
    display: none;
  }
}
  • URL: /components/raw/dropdown/Dropdown.scss
  • Filesystem Path: src/library/modules/Questionnaire/Dropdown/Dropdown.scss
  • Size: 2.9 KB 
<div class="main-container">
  <div class="content-wrapper">
    <div class="left-section">
      <div class="question-number">
        <svg class="icon-style" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
           <line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2"/>
        </svg>
        {{questionNumber}}
      </div>
      <div class="country-text">
        {{question}}
      </div>
      <div class="dropdown-label">
        {{dropdownLabel}}
      </div>
    </div>
    <div class="right-section">
      <div class="input-container">
        {{render '@drop-box'}}
        {{render '@cta' Next-cta  merge="true" id="nextButton" disabled="true"}}
      </div>
    </div>
  </div>

  <img class="desktop-background" src="{{backgroundImage}}" alt="Background Image" />
  <img src="{{mobilebackgroundimage}}" alt="Background Image" class="bg-image-mobile">
</div>