<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 & 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"
}
.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;
}
}
Styling is shared between the simple and the advanced variant.