<div class="search-block search-block--advanced">
    <div class="wrapper">

        <div class="search-block__label">

            <div class="alert-tag">
                <span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
                    </svg>
                </span>
                <span class="alert-tag__content"><a href="#">Our guide to targeting your search</a></span>
            </div>

            <label class="search-block__form-item-label" for="search-view">Enter a search term</label>
        </div>

        <form role="search" action="#">
            <div class="search-block__form-group">
                <input name="search-view" class="form-control large-search" placeholder="Search grants, funders, recipients, locations" type="text">
            </div>
            <div class="search-block__form-radio-group">
                <div class="search-block__form-group-label">
                    Search:
                </div>
                <div class="radio-buttons">

                    <div class="radio-buttons__group">
                        <input class="screen-reader-only" type="radio" id="all" name="radioGroupName" value="all" checked>
                        <label class="radio-buttons__button" for="all">All the data</label>
                    </div>

                    <div class="radio-buttons__group">
                        <input class="screen-reader-only" type="radio" id="locations" name="radioGroupName" value="locations">
                        <label class="radio-buttons__button" for="locations">Locations</label>
                    </div>

                    <div class="radio-buttons__group">
                        <input class="screen-reader-only" type="radio" id="recipients" name="radioGroupName" value="recipients">
                        <label class="radio-buttons__button" for="recipients">Recipients</label>
                    </div>

                    <div class="radio-buttons__group">
                        <input class="screen-reader-only" type="radio" id="titledesc" name="radioGroupName" value="titledesc">
                        <label class="radio-buttons__button" for="titledesc">Titles &amp; Descriptions</label>
                    </div>

                </div>

            </div>

            <div class="search-block__form-action-group">
                <input class="" name="submit" type="submit" value="Search UK grants data">
            </div>
        </form>
    </div>
</div>
<div class="search-block search-block--advanced">
  <div class="wrapper">
    {% if description %}
      <div class="search-block__description">{{ description }}</div>
    {% endif %}

    <div class="search-block__label">
      {% block alert %}
        {% render '@alert-tag' %}
      {% endblock alert %}
      <label class="search-block__form-item-label" for="{{ search_name }}">{{ search_label }}</label>
    </div>

    <form role="search" action="{{ form_action }}">
      <div class="search-block__form-group">
        <input name="{{ search_name }}" class="form-control large-search" placeholder="Search grants, funders, recipients, locations" type="text">
      </div>
      <div class="search-block__form-radio-group">
        <div class="search-block__form-group-label">
          Search:
        </div>
        {% render '@radio-buttons' %}
      </div>

      <div class="search-block__form-action-group">
        <input class="" name="submit" type="submit" value="{{ submit_text }}">
      </div>
    </form>
  </div>
</div>
{
  "description": null,
  "form_action": "#",
  "submit_text": "Search UK grants data",
  "search_name": "search-view",
  "search_label": "Enter a search term"
}
  • Content:
    .search-block {
      &--simple {
        background: $orange;
      }
    
      &--funders {
        background: hsla(var(--teal-hsl), 1) !important;
      }
    
      &--recipients {
        background: hsla(var(--yellow-hsl), 1) !important;
      }
    
      padding: 82px 1.5rem 67px;
    
      &--no-padding {
        padding: 0;
      }
    
      &__description {
        text-align: center;
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 48px;
    
        @include breakpoint($medium) {
          font-size: 35px;
        }
      }
    
      form {
        text-align: left;
      }
    
      &__form-item-label {
        font-weight: 500;
        font-size: 19px;
        margin-bottom: 6px;
        margin-top: 10px;
      }
    
      &__form-group {
        display: flex;
    
        input[type="text"] {
          border: none;
          appearance: none;
          font-size: 20px;
          padding: 22px 12px;
          margin: 0;
          display: block;
          border-radius: 3px 0px 0px 3px;
          flex-grow: 0;
          min-width: 20px;
          width: 100%;
    
          @include breakpoint($medium) {
            min-width: 100px;
            font-size: 22px;
            padding: 24px 16px;
            flex-grow: 2;
          }
    
          @include breakpoint($regular) {
            min-width: 160px;
            font-size: 24px;
            padding: 28px 18px;
            flex-grow: 2;
          }
        }
    
      }
    
      input[type="submit"] {
        border: none;
        appearance: none;
        background: $black;
        color: $white;
        font-size: 20px;
        padding: 20px 30px;
        font-weight: 500;
        border-radius: 0px 3px 3px 0px;
    
        @include breakpoint($medium) {
          padding: 24px 36px;
          font-size: 22px;
        }
    
        @include breakpoint($regular) {
          padding: 28px 42px;
          font-size: 24px;
        }
    
        &:hover {
          cursor: pointer;
        }
      }
    
      .search-block__label {
        display: flex;
        flex-direction: column;
        margin-bottom: 6px;
    
        @include breakpoint($regular) {
          flex-direction: row-reverse;
          justify-content: space-between;
          align-items: baseline;
        }
      }
    }
    
    
    /* Advanced variant styling */
    .search-block {
      &--advanced {
        padding-top: 2rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 2rem;
        background: $orange-tint;
    
        .search-block__description {
          margin-bottom: 36px;
        }
    
        input[type="text"] {
          border-radius: 3px;
          padding: 16px 12px;
    
          @include breakpoint($medium) {
            padding: 12px 16px;
          }
    
          @include breakpoint($regular) {
            padding: 12px 18px;
          }
        }
    
        input[type="submit"] {
          border-radius: 3px;
          padding: 14px 30px;
    
          @include breakpoint($medium) {
            padding: 16px 36px;
            font-size: 22px;
          }
    
          @include breakpoint($regular) {
            padding: 18px 50px;
            font-size: 24px;
          }
        }
    
      }
    
      &__form-radio-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-top: 16px;
        margin-bottom: 32px;
    
        @include breakpoint($medium) {
          flex-direction: row;
          align-items: flex-start;
          justify-content: center;
        }
    
        label {
          margin-top: 6px;
          margin-bottom: 6px;
        }
      }
    
      &__form-group-label {
        font-weight: 400;
        font-size: 18px;
        height: 100%;
    
        @include breakpoint($medium) {
          margin-top: 10px;
          margin-right: 8px;
          margin-bottom: 6px;
        }
      }
    
      &__form-action-group {
        display: flex;
        justify-content: center;
      }
    
      @media print {
        display: none;
      }
    }
    
  • URL: /components/raw/search-block/search-block.scss
  • Filesystem Path: src/components/04-modules/search-block/search-block.scss
  • Size: 3.4 KB

Styling is shared between the simple and the advanced variant.