Components - Search box

Show the ods-searchbox widget alongside a “search” button and a title. Below there’s a stand-alone version and a version inside a card.

<!-- Search box -->
<h2 class="search-card-title">
    What data are you looking for?
</h2>
<ods-catalog-context context="catalog">
    <div class="search-card-container">
        <ods-searchbox class="search-card-searchbox"
                       form-id="search-form"
                       translate="placeholder"
                       placeholder="Search for a dataset">
        </ods-searchbox>
        <!-- Button is optional but has been added for accessibility reasons. We recommend not removing it.
	     The "form" parameter must match the "form-id" parameter in ods-searchbox. -->
        <button type="submit" form="search-form" class="search-card-submit-button">
            Search
        </button>
    </div>
</ods-catalog-context>

/* Search Box Card
   ========================================================================== */
.search-card-container {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
.search-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	text-align: center;
}
.search-card-searchbox {
	margin-bottom: 0;
	flex: 1 1 auto;
}
.search-card-searchbox .odswidget-searchbox__box {
	font-size: 1rem;
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 8px 13px;
    border-radius: 4px 0 0 4px;
    border-top: 1px solid #cbd2db;
    border-left: 1px solid #cbd2db;
    border-bottom: 1px solid #cbd2db;
    border-right: none;
    margin: 0 auto;
}
.search-card-submit-button {
	border: none;
	background-color: var(--highlight);
	color: #FFFFFF;
	font-size: .866rem;
	font-weight: bold;
	text-align: center;
	padding: 8px 12px;
	border-radius: 0 4px 4px 0;
	transition: opacity .2s;
	cursor: pointer;
}
.search-card-submit-button:hover {
	text-decoration: none;
	opacity: .8;
}

Search Box inside card

<!-- Search box card -->
<section class="search-card">
    <h2 class="search-card-title">
        What data are you looking for?
    </h2>
    <ods-catalog-context context="catalog">
        <div class="search-card-container">
            <ods-searchbox class="search-card-searchbox"
                           form-id="search-form"
                           translate="placeholder"
                           placeholder="Search for a dataset">
            </ods-searchbox>
            <!-- Button is optional but has been added for accessibility reasons. We recommend not removing it.
				The "form" parameter must match the "form-id" parameter in ods-searchbox. -->
            <button type="submit" form="search-form" class="search-card-submit-button">
                Search
            </button>
        </div>
    </ods-catalog-context>
</section>
/* Search Box Card
   ========================================================================== */
.search-card {
	background-color: rgba(0,0,0,.1);
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	justify-content: center;
	text-align: center;
}
.search-card-container {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
.search-card-title {
	color: var(--titles);
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	text-align: center;
}
.search-card-searchbox {
	margin-bottom: 0;
	flex: 1 1 auto;
}
.search-card-searchbox .odswidget-searchbox__box {
	font-size: 1rem;
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 8px 13px;
    border-radius: 4px 0 0 4px;
    border-top: 1px solid #cbd2db;
    border-left: 1px solid #cbd2db;
    border-bottom: 1px solid #cbd2db;
    border-right: none;
    margin: 0 auto;
}
.search-card-submit-button {
	border: none;
	background-color: var(--highlight);
	color: #FFFFFF;
	font-size: .866rem;
	font-weight: bold;
	text-align: center;
	padding: 8px 12px;
	border-radius: 0 4px 4px 0;
	transition: opacity .2s;
	cursor: pointer;
}
.search-card-submit-button:hover {
	text-decoration: none;
	opacity: .8;
}