Structures

Form

Form With Border

<div class="width--content-default margin-horizontal--auto border--light margin-top--huge">
	<form action="" class="padding--huge">

		<div class="logo padding-bottom--huge logo--center">
			<img src="/Themes/Asmodee.Orchard.DefaultTheme/Content/logo.svg" class="logo__default" alt="Asmodee Logo">
			<img src="/Themes/Asmodee.Orchard.DefaultTheme/Content/logo-large.svg" class="logo__large" alt="Asmodee Logo">
		</div>

		<div class="margin-bottom--default">
			<label for="textInput">Label name</label>
			<input type="text" id="textInput" /> </div>
		<div class="margin-bottom--default">
			<label for="textInput">Label name</label>
			<input type="text" id="textInput" /> </div>
		<div class="margin-bottom--default">
			<label for="textArea">Label name</label>
			<textarea name="" id="textArea" cols="30" rows="10"></textarea> </div>
		<div class="margin-bottom--default">
			<label for="textInput">Label name</label>
			<select name="" id="" class="width--full">
				<option value="">Option 1</option>
				<option value="">Option 2</option>
				<option value="">Option 3</option>
				<option value="">Option 4</option>
				<option value="">Option 5</option>
			</select> </div>
		<div class="margin-bottom--default">
			<button class="btn width--full">Submit</button> </div>
	</form>
</div>

Form Without Border

<div class="width--content-default margin-horizontal--auto">
	<form action="">
		<div class="margin-bottom--default">
			<label for="textInput">Label name</label>
			<input type="text" id="textInput" /> </div>
		<div class="margin-bottom--default">
			<label for="textInput">Label name</label>
			<input type="text" id="textInput" /> </div>
		<div class="margin-bottom--default">
			<label for="textArea">Label name</label>
			<textarea name="" id="textArea" cols="30" rows="10"></textarea> </div>
		<div class="margin-bottom--default">
			<button class="btn">Submit</button> </div>
	</form>
</div>

Product Search Form

<form class="search show-hide border--bottom border--color-light js-product-search-form">
	<div class="background-color--light text--grey show-hide__active">
		<div class="container container--contained-wide padding--default padding-top--large">
			<p class="text--title">Search Filters</p>

			<div class="grid grid--fluid">
				<div class="grid__row flex-align--center">
					<div class="search__field grid__item">
						<label class="margin-bottom--small" for="query"><strong>General</strong></label>
						<div>
							<input type="text" id="query" name="query" class="input--rounded background-color--transparent" placeholder="Enter a game title" />
						</div>
					</div>

					<div class="search__field grid__item">
						<label class="margin-bottom--small"><strong>Duration</strong> <small>(minutes)</small></label>

						<ul class="list list--horizontal list--divided">
							<li>
								<input type="radio" name="duration" id="duration-all" value="" checked="">
								<label for="duration-all">All</label>
							</li>
							<li>
								<input type="radio" name="duration" id="duration-short" value="short">
								<label for="duration-short">Short (&lt; 30)</label>
							</li>
							<li>
								<input type="radio" name="duration" id="duration-medium" value="medium">
								<label for="duration-medium">Medium (30 - 90)</label>
							</li>
							<li>
								<input type="radio" name="duration" id="duration-long" value="long">
								<label for="duration-long">Long (90+)</label>
							</li>
						</ul>
					</div>

					<div class="search__field grid__item">
						<label class="margin-bottom--small"><strong>Genre</strong></label>

						<ul class="list list--horizontal list--divided">
							<li>
								<input type="radio" name="genre" id="genre-all" value="" checked="">
								<label for="genre-all">All</label>
							</li>
							<li>
								<input type="radio" name="genre" id="genre-Advanced" value="Advanced">
								<label for="genre-Advanced" class="margin-bottom--none">Advanced</label>
							</li>
							<li>
								<input type="radio" name="genre" id="genre-Family" value="Family">
								<label for="genre-Family" class="margin-bottom--none">Family</label>
							</li>
						</ul>
					</div>

					<div class="search__field grid__item">
						<label class="margin-bottom--small"><strong>Players</strong></label>

						<ul class="list list--horizontal list--divided">
							<li>
								<input type="radio" name="players" id="players-all" value="" checked="">
								<label for="players-all">All</label>
							</li>
							<li>
								<input type="radio" name="players" id="players-solo" value="solo">
								<label for="players-solo" class="margin-bottom--none">Solo</label>
							</li>
							<li>
								<input type="radio" name="players" id="players-two" value="two">
								<label for="players-two" class="margin-bottom--none">2 Players</label>
							</li>
							<li>
								<input type="radio" name="players" id="players-three-to-four" value="three-to-four">
								<label for="players-three-to-four" class="margin-bottom--none">3/4 Players</label>
							</li>
							<li>
								<input type="radio" name="players" id="players-four-plus" value="four-plus">
								<label for="players-four-plus" class="margin-bottom--none">Group</label>
							</li>
						</ul>
					</div>

					<div class="search__field search__field--advanced grid__item">
						<label class="margin-bottom--small"><strong>Other</strong></label>
						<ul class="list list--horizontal list--spaced-large">
							<li>
								<label for="upcoming">
                                    <input type="checkbox" name="upcoming" id="upcoming" /> Upcoming Games
                                </label>
							</li>
						</ul>
					</div>

					<div class="search__field search__field--advanced grid__item">
						<label class="margin-bottom--small"><strong>Publisher</strong></label>
						<select>
                            <option value="">All Publishers</option>
                            <option value="Asmodee">Asmodee</option>
                            <option value="Asterion">Asterion</option>
                            <option value="Bombyx">Bombyx</option>
                            <option value="Devil Pigs">Devil Pigs</option>
                            <option value="GameWorks">GameWorks</option>
                            <option value="Helvetia Games">Helvetia Games</option>
                            <option value="Hurrican">Hurrican</option>
                            <option value="Lautapelit">Lautapelit</option>
                            <option value="Libeludd">Libeludd</option>
                        </select>
					</div>

					<div class="search__field search__field--advanced grid__item">
						<label class="margin-bottom--small"><strong>Tags</strong></label>

						<ul class="list list--horizontal list--divided">
							<li>
								<input type="radio" name="tags" id="tags-all" value="" checked>
								<label for="tags-all">All</label>
							</li>
							<li>
								<input type="radio" name="tags" id="tags-adventure" value="adventure">
								<label for="tags-adventure" class="margin-bottom--none">Adventure</label>
							</li>
							<li>
								<input type="radio" name="tags" id="tags-crime" value="crime">
								<label for="tags-crime" class="margin-bottom--none">Crime</label>
							</li>
							<li>
								<input type="radio" name="tags" id="tags-humour" value="humour">
								<label for="tags-humour" class="margin-bottom--none">Humour</label>
							</li>
							<li>
								<input type="radio" name="tags" id="tags-puzzle" value="puzzle">
								<label for="tags-puzzle" class="margin-bottom--none">Puzzle</label>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<ul class="list list--horizontal list--divided margin-bottom--default">
				<li>
					<button type="button" class="btn btn--link-subtle js-toggle-css" data-target=".js-product-search-form" data-css="is-advanced">Advanced Filters</button>
				</li>
				<li>
					<button type="reset" class="btn btn--link-subtle">Reset Filters</button>
				</li>
			</ul>

			<div class="text-align--right">
				<button type="button" class="btn btn--tab js-toggle-css" data-target=".js-product-search-form" data-css="is-active">Hide Filters</button>
			</div>
		</div>
	</div>

	<div class="container container--contained-wide text-align--right show-hide__inactive">
		<button type="button" class="btn btn--tab js-toggle-css" data-target=".js-product-search-form" data-css="is-active">Show Filters</button>
	</div>
</form>

Search Filters

Results

Default

These structures are used to display search results in different ways.

<div class="container container--contained container--contained-wide padding-top--huge padding-bottom--huge">
	<h2 class="text--title margin-bottom--large">Search results</h2>

	<div class="grid grid--triple gap--large">
		<div class="grid__row">
			<div class="grid__item">
				<div class="summary">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black summary__title">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
							<span class="summary__price">$29.99</span>
						</div>
						<div class="flex flex-direction--row flex-align--start margin-bottom--default summary__details">
							<div class="icon-text">
								<svg class="icon icon--clock"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></svg> 60+ minutes
							</div>
							<div class="icon-text">
								<svg class="icon icon--people"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></svg> 3-4 players
							</div>
							<div class="icon-text">
								<svg class="icon icon--cake"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></svg> Age 14+
							</div>
						</div>
						<p class="margin-bottom--default">Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...</p>
						<p><a href="/pages/Games-Detail-Page.html">Read more about 'Black Fleet'</a></p>
					</div>
				</div>
			</div>
			<div class="grid__item">
				<div class="summary">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black summary__title">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
							<span class="summary__price">$29.99</span>
						</div>
						<div class="flex flex-direction--row flex-align--start margin-bottom--default summary__details">
							<div class="icon-text">
								<svg class="icon icon--clock"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></svg> 60+ minutes
							</div>
							<div class="icon-text">
								<svg class="icon icon--people"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></svg> 3-4 players
							</div>
							<div class="icon-text">
								<svg class="icon icon--cake"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></svg> Age 14+
							</div>
						</div>
						<p class="margin-bottom--default">Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...</p>
						<p><a href="/pages/Games-Detail-Page.html">Read more about 'Black Fleet'</a></p>
					</div>
				</div>
			</div>
			<div class="grid__item">
				<div class="summary">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black summary__title">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
							<span class="summary__price">$29.99</span>
						</div>
						<div class="flex flex-direction--row flex-align--start margin-bottom--default summary__details">
							<div class="icon-text">
								<svg class="icon icon--clock"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></svg> 60+ minutes
							</div>
							<div class="icon-text">
								<svg class="icon icon--people"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></svg> 3-4 players
							</div>
							<div class="icon-text">
								<svg class="icon icon--cake"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></svg> Age 14+
							</div>
						</div>
						<p class="margin-bottom--default">Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...</p>
						<p><a href="/pages/Games-Detail-Page.html">Read more about 'Black Fleet'</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

Search results

Black Fleet

 $29.99
60+ minutes
3-4 players
Age 14+

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...

Read more about 'Black Fleet'

Black Fleet

 $29.99
60+ minutes
3-4 players
Age 14+

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...

Read more about 'Black Fleet'

Black Fleet

 $29.99
60+ minutes
3-4 players
Age 14+

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...

Read more about 'Black Fleet'

Featured

<div class="container container--contained container--contained-wide padding-top--huge padding-bottom--huge">
	<h2 class="text--title margin-bottom--large">Search results</h2>

	<div class="grid grid--triple gap--large">
		<div class="grid__row">
			<div class="grid__item">
				<div class="summary summary--featured summary--featured-1">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
							<span class="summary__price">$29.99</span>
						</div>
						<div class="flex flex-direction--row flex-align--start margin-bottom--default">
							<div class="icon-text">
								<svg class="icon icon--clock"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></svg> 60+ minutes
							</div>
							<div class="icon-text">
								<svg class="icon icon--people"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></svg> 3-4 players
							</div>
							<div class="icon-text">
								<svg class="icon icon--cake"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></svg> Age 14+
							</div>
						</div>
						<p class="margin-bottom--default">Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...</p>
						<p><a href="/pages/Games-Detail-Page.html">Read more about 'Black Fleet'</a></p>
					</div>
				</div>
			</div>
			<div class="grid__item">
				<div class="summary summary--featured summary--featured-1">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
							<span class="summary__price">$29.99</span>
						</div>
						<div class="flex flex-direction--row flex-align--start margin-bottom--default">
							<div class="icon-text">
								<svg class="icon icon--clock"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></svg> 60+ minutes
							</div>
							<div class="icon-text">
								<svg class="icon icon--people"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></svg> 3-4 players
							</div>
							<div class="icon-text">
								<svg class="icon icon--cake"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></svg> Age 14+
							</div>
						</div>
						<p class="margin-bottom--default">Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...</p>
						<p><a href="/pages/Games-Detail-Page.html">Read more about 'Black Fleet'</a></p>
					</div>
				</div>
			</div>
			<div class="grid__item">
				<div class="summary summary--featured summary--featured-1">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
							<span class="summary__price">$29.99</span>
						</div>
						<div class="flex flex-direction--row flex-align--start margin-bottom--default">
							<div class="icon-text">
								<svg class="icon icon--clock"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></svg> 60+ minutes
							</div>
							<div class="icon-text">
								<svg class="icon icon--people"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></svg> 3-4 players
							</div>
							<div class="icon-text">
								<svg class="icon icon--cake"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></svg> Age 14+
							</div>
						</div>
						<p class="margin-bottom--default">Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...</p>
						<p><a href="/pages/Games-Detail-Page.html">Read more about 'Black Fleet'</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

Search results

Black Fleet

 $29.99
60+ minutes
3-4 players
Age 14+

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...

Read more about 'Black Fleet'

Black Fleet

 $29.99
60+ minutes
3-4 players
Age 14+

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...

Read more about 'Black Fleet'

Black Fleet

 $29.99
60+ minutes
3-4 players
Age 14+

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade...

Read more about 'Black Fleet'

Simple

<div class="container container--contained container--contained-wide padding-top--huge padding-bottom--huge">
	<h2 class="text--title margin-bottom--large">Search results</h2>

	<div class="grid grid--triple gap--large">
		<div class="grid__row">
			<div class="grid__item">
				<div class="summary">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black summary__title">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="grid__item">
				<div class="summary">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black summary__title">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="grid__item">
				<div class="summary">
					<div class="summary__image">
						<a href="/pages/Games-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/product_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/Games-Detail-Page.html" class="border--none text--black summary__title">
								<h3 class="margin-bottom--none">Black Fleet</h3>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

Search results

Black Fleet

Black Fleet

Black Fleet

Vertical Simple

<div class="container container--contained padding-top--huge padding-bottom--huge">
	<h2 class="text--title margin-bottom--large">Search results</h2>

	<div class="grid gap--large">
		<div class="grid__row">
			<div class="grid__item grid__item--12">
				<div class="summary summary--horizontal">
					<div class="summary__image">
						<a href="/pages/News-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/news_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/News-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">The Elegant Solution</h3>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="grid__item grid__item--12">
				<div class="summary summary--horizontal">
					<div class="summary__image">
						<a href="/pages/News-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/news_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/News-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">The Elegant Solution</h3>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="grid__item grid__item--12">
				<div class="summary summary--horizontal">
					<div class="summary__image">
						<a href="/pages/News-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/news_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/News-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">The Elegant Solution</h3>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

Search results

The Elegant Solution

The Elegant Solution

The Elegant Solution

Vertical

<div class="container container--contained padding-top--huge padding-bottom--huge">
	<h2 class="text--title margin-bottom--large">Search results</h2>

	<div class="grid gap--large">
		<div class="grid__row">
			<div class="grid__item grid__item--12">
				<div class="summary summary--horizontal">
					<div class="summary__image">
						<a href="/pages/News-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/news_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/News-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">The Elegant Solution</h3>
							</a>
							<span>18/07/2017 | <a href="#" class="link--plain">Watson &amp; Holmes</a></span>
						</div>
						<p class="margin-bottom--default">The streets of Victorian London: a wellspring of crime in all its forms—theft, arson, the drug trade, blackmail, and murder most foul. And though the police may be hopelessly...</p>
						<span><a href="/pages/News-Detail-Page.html">Read more about 'The Elegant Solution'</a></span>
					</div>
				</div>
			</div>
			<div class="grid__item grid__item--12">
				<div class="summary summary--horizontal">
					<div class="summary__image">
						<a href="/pages/News-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/news_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/News-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">The Elegant Solution</h3>
							</a>
							<span>18/07/2017 | <a href="#" class="link--plain">Watson &amp; Holmes</a></span>
						</div>
						<p class="margin-bottom--default">The streets of Victorian London: a wellspring of crime in all its forms—theft, arson, the drug trade, blackmail, and murder most foul. And though the police may be hopelessly...</p>
						<span><a href="/pages/News-Detail-Page.html">Read more about 'The Elegant Solution'</a></span>
					</div>
				</div>
			</div>
			<div class="grid__item grid__item--12">
				<div class="summary summary--horizontal">
					<div class="summary__image">
						<a href="/pages/News-Detail-Page.html" class="border--none">
							<picture>
								<img src="/assets/toolkit/examples/news_artwork.jpg" alt="">
							</picture>
						</a>
					</div>
					<div class="summary__body">
						<div class="summary__meta">
							<a href="/pages/News-Detail-Page.html" class="border--none text--black">
								<h3 class="margin-bottom--none">The Elegant Solution</h3>
							</a>
							<span>18/07/2017 | <a href="#" class="link--plain">Watson &amp; Holmes</a></span>
						</div>
						<p class="margin-bottom--default">The streets of Victorian London: a wellspring of crime in all its forms—theft, arson, the drug trade, blackmail, and murder most foul. And though the police may be hopelessly...</p>
						<span><a href="/pages/News-Detail-Page.html">Read more about 'The Elegant Solution'</a></span>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

Search results

The Elegant Solution

 18/07/2017 | Watson & Holmes

The streets of Victorian London: a wellspring of crime in all its forms—theft, arson, the drug trade, blackmail, and murder most foul. And though the police may be hopelessly...

Read more about 'The Elegant Solution'

The Elegant Solution

 18/07/2017 | Watson & Holmes

The streets of Victorian London: a wellspring of crime in all its forms—theft, arson, the drug trade, blackmail, and murder most foul. And though the police may be hopelessly...

Read more about 'The Elegant Solution'

The Elegant Solution

 18/07/2017 | Watson & Holmes

The streets of Victorian London: a wellspring of crime in all its forms—theft, arson, the drug trade, blackmail, and murder most foul. And though the police may be hopelessly...

Read more about 'The Elegant Solution'