Anchor

Default

<a href="#">This is a default anchor link</a>

This is a default anchor link

Subtle

<a href="#" class="link link--subtle">This is a subtle anchor link</a>

This is a subtle anchor link

Plain

<a href="#" class="link link--plain">This is a plain anchor link</a>

This is a plain anchor link

Button

Default

<button class="btn">Submit</button>

Full Width

<button class="btn width--full">Submit</button>

Icon

<button class="btn btn--icon" title="Submit Search">
    <svg class="icon icon--search icon--white">
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#search"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/search-white.png" x="0" y="0" height="18px" width="18px" alt="search"/>
    </svg>
</button>

Link Subtle

<button class="btn btn--link-subtle">Subtle Link Button</button>

Checkbox

<label>
	<input type="checkbox" /> Checkbox
</label>

Checkbox

Divider

Clash

<img class="divider is-width-full" alt="Vibrant gradient coloured shapes that create a divider across the page" src="/Themes/Asmodee.Orchard.DefaultTheme/Content/section-divider-clash.svg">

Vibrant gradient coloured shapes that create a divider across the page

Skew

<img class="divider is-width-full" alt="Vibrant gradient coloured shapes that are at a 30 degree counter clockwise rotation to create a divider across the page" src="/Themes/Asmodee.Orchard.DefaultTheme/Content/section-divider-skew.svg">

Vibrant gradient coloured shapes that are at a 30 degree counter clockwise rotation to create a divider across the page

Embed

Default

<div class="embed">
	<div class="embed__media">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/FvZDh93o3yM?rel=0" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

Wide

<div class="embed is-width-wide">
	<div class="embed__media">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/FvZDh93o3yM?rel=0" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

Fieldset

<fieldset>
	<legend class="text--h3">Technical Information</legend>
	<ul class="list list--divided">
		<li>
			<div class="info">
				<div class="info__name">SKU</div>
				<div class="info__value">CARD01</div>
			</div>
		</li>
		<li>
			<div class="info">
				<div class="info__name">Country of Origin</div>
				<div class="info__value">China</div>
			</div>
		</li>
		<li>
			<div class="info">
				<div class="info__name">Dimensions</div>
				<div class="info__value">4.75 x 1.50 x 4.75 in.</div>
			</div>
		</li>
		<li>
			<div class="info">
				<div class="info__name">Weight</div>
				<div class="info__value">0.64 lbs.</div>
			</div>
		</li>
		<li>
			<div class="info">
				<div class="info__name">Case Quantity</div>
				<div class="info__value">40</div>
			</div>
		</li>
		<li>
			<div class="info">
				<div class="info__name">Dimensions</div>
				<div class="info__value">19.50 x 10.25 x 10.25 in.</div>
			</div>
		</li>
		<li>
			<div class="info">
				<div class="info__name">Weight</div>
				<div class="info__value">27.62 lbs.</div>
			</div>
		</li>
	</ul>
</fieldset>

Technical Information

SKU

CARD01
Country of Origin

China
Dimensions

4.75 x 1.50 x 4.75 in.
Weight

0.64 lbs.
Case Quantity

40
Dimensions

19.50 x 10.25 x 10.25 in.
Weight

27.62 lbs.

Gallery

Default

<div class="grid grid--triple">
	<div class="grid__row js-gallery summary--featured">
		<a class="grid__item summary__image" href="/assets/toolkit/examples/product_artwork.jpg">
            <img src="/assets/toolkit/examples/product_artwork.jpg" />
        </a>
		<a class="grid__item summary__image" href="/assets/toolkit/examples/product_artwork.jpg">
            <img src="/assets/toolkit/examples/product_artwork.jpg" />
        </a>
		<a class="grid__item summary__image" href="/assets/toolkit/examples/product_artwork.jpg">
            <img src="/assets/toolkit/examples/product_artwork.jpg" />
        </a>
		<a class="grid__item summary__image" href="https://www.youtube.com/watch?v=meBbDqAXago">
            <img src="/assets/toolkit/examples/product_artwork.jpg" />
        </a>
		<a class="grid__item summary__image" href="https://www.youtube.com/watch?v=meBbDqAXago">
            <img src="/assets/toolkit/examples/product_artwork.jpg" />
        </a>
		<a class="grid__item summary__image" href="https://www.youtube.com/watch?v=meBbDqAXago">
            <img src="/assets/toolkit/examples/product_artwork.jpg" />
        </a>
	</div>
</div>

Grid

Grid Default

By default items will displayed with 3 items per row.

<div class="grid">
	<div class="grid__row">
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
	<div class="grid__row">
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

Grid Variation

Grid layouts can vary by customising widths of grid items.

<div class="grid">
	<div class="grid__row">
		<div class="grid__item grid__item--12">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>

	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--9">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>

	<div class="grid__row">
		<div class="grid__item grid__item--9">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>

	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--6">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>

	<div class="grid__row">
		<div class="grid__item grid__item--6">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>

	<div class="grid__row">
		<div class="grid__item grid__item--2">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--2">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--2">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--2">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--2">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--2">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

Grid Shortcuts

Grid has a handful of shortcut modifiers to dictate layout of items without having to add modifiers to each individual item. Use grid--double, grid--triple or grid--quad to set all children to be 50%, 33.3% or 25% of the grid's width.

<div class="grid grid--double">
	<div class="grid__row">
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

<div class="grid grid--triple">
	<div class="grid__row">
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

<div class="grid grid--quad">
	<div class="grid__row">
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

Grid Spacing

Grid will space children evenly with a sensible spacing unit. The spacing can be customise with various modifiers to remove or increase the spacing.

<div class="grid gap--none">
	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

<div class="grid gap--large">
	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

<div class="grid gap--huge">
	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
	<div class="grid__row">
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
		<div class="grid__item grid__item--3">
			<div style="background-color: #472272; width: 100%; height: 40px;"></div>
		</div>
	</div>
</div>

Headings

Heading 1

For good semantics, there should only be a single h1 element on the page. This will represent the title of the page and should be positioned before any other heading elements.

<h1 class="text--h1">Heading One</h1>

Heading One

Heading 2

h2 elements can appear multiple times, however it's good to keep semantic ordering when using heading elements. This means that a heading element of a lower level (e.g. h3) should never appear before a heading element with a higher level (e.g. h2).

<h2 class="text--h2">Heading Two</h2>

Heading Two

Heading 3

<h3 class="text--h3">Heading Three</h3>

Heading Three

Section Title

Section titles don't necessarily have to be a h2 element. The type of element should be determined by the position of the section within the content on the page.

<h2 class="text--title">Section title</h2>

Section title

Heading Backgrounds

The example is using a h1, however in reality any heading element can be used (e.g. h2, h3, etc...).

<h1 class="background-color--purple">Heading on a purple background</h1>

Heading on a purple background

Hero

Default

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Default Left

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content hero__content--left">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Default Right

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content hero__content--right">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Default Short

Image dimensions: 2560 x 724. Download template (.psd).

<section class="hero">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x724.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Overlay Black

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero overlay overlay--black-gradient">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Overlay Blue

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero overlay overlay--blue-gradient">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Overlay Orange

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero overlay overlay--orange-gradient">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Overlay Primary

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero overlay overlay--primary-gradient">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Overlay Purple

Image dimensions: 2560 x 1100. Download template (.psd).

<section class="hero overlay overlay--purple-gradient">
	<picture>
		<img src="/assets/toolkit/examples/hero_artwork_2560x1100.jpg" alt="" class="display--block">
	</picture>

	<div class="hero__content">
		<h2 class="text--hero text--white">7 Wonders</h2>
		<a class="link link--cta" href="#">View full product details</a>
	</div>
</section>

7 Wonders

View full product details

Hr

<hr />

Icon

Default

<svg class="icon icon--cake">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#cake"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/cake.png" x="0" y="0" height="19px" width="21px" alt="cake"/>
</svg>
<svg class="icon icon--calendar">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#calendar"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/calendar.png" x="0" y="0" height="19px" width="21px" alt="calendar"/>
</svg>
<svg class="icon icon--clock">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#clock"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/clock.png" x="0" y="0" height="19px" width="20px" alt="clock"/>
</svg>
<svg class="icon icon--envelope">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#envelope"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/envelope.png" x="0" y="0" height="19px" width="19px" alt="envelope"/>
</svg>
<svg class="icon icon--facebook">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#facebook"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/facebook.png" x="0" y="0" height="19px" width="19px" alt="facebook"/>
</svg>
<svg class="icon icon--globe">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#globe"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/globe.png" x="0" y="0" height="19px" width="20px" alt="globe"/>
</svg>
<svg class="icon icon--google-plus">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#googleplus"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/googleplus.png" x="0" y="0" height="19px" width="19px" alt="googleplus"/>
</svg>
<svg class="icon icon--instagram">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#instagram"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/instagram.png" x="0" y="0" height="19px" width="19px" alt="instagram"/>
</svg>
<svg class="icon icon--menu">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#menu"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/menu.png" x="0" y="0" height="24px" width="26px" alt="menu"/>
</svg>
<svg class="icon icon--people">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#people"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/people.png" x="0" y="0" height="19px" width="25px" alt="people"/>
</svg>
<svg class="icon icon--search">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#search"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/search.png" x="0" y="0" height="18px" width="18px" alt="search"/>
</svg>
<button class="btn btn--icon">
    <svg class="icon icon--search icon--white">
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#search"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/search-white.png" x="0" y="0" height="18px" width="18px" alt="search"/>
    </svg>
</button>
<svg class="icon icon--twitter">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#twitter"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/twitter.png" x="0" y="0" height="19px" width="19px" alt="twitter"/>
</svg>
<svg class="icon icon--youtube">
    <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#youtube"></use>
    <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/youtube.png" x="0" y="0" height="19px" width="19px" alt="youtube"/>
</svg>

Flag

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to Belgium website" aria-labelledby="title-belgium">
        <title id="title-belgium">Link to Belgium regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#belgium"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/belgium.png" x="0" y="0" height="20px" width="34px" alt="belgium"/>
    </svg>
    <span>Belgium</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to Canadas website" aria-labelledby="title-canada">
        <title id="title-canada">Link to Canadas regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#canada"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/canada.png" x="0" y="0" height="20px" width="34px" alt="canada"/>
    </svg>
    <span>Canada</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to French website" aria-labelledby="title-france">
        <title id="title-france">Link to French regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#france"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/france.png" x="0" y="0" height="20px" width="34px" alt="france"/>
    </svg>
    <span>France</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to German website" aria-labelledby="title-germany">
        <title id="title-germany">Link to German regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#germany"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/germany.png" x="0" y="0" height="20px" width="34px" alt="germany"/>
    </svg>
    <span>Germany</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to Italian website" aria-labelledby="title-italy">
        <title id="title-italy">Link to Italian regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#italy"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/italy.png" x="0" y="0" height="20px" width="34px" alt="italy"/>
    </svg>
    <span>Italy</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to Netherlands website" aria-labelledby="title-netherlands">
        <title id="title-netherlands">Link to Netherlands regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#netherlands"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/netherlands.png" x="0" y="0" height="20px" width="34px" alt="netherlands"/>
    </svg>
    <span>Netherlands</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to Spain website" aria-labelledby="title-spain">
        <title id="title-spain">Link to Spanish regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#spain"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/spain.png" x="0" y="0" height="20px" width="34px" alt="spain"/>
    </svg>
    <span>Spain</span>
</a>

<a href="#" class="link--plain flag-text">
    <svg class="flag" role="link" title="Navigate to United Kingdom website" aria-labelledby="title-uk">
        <title id="title-uk">Link to United Kingdom regional website</title>
        <use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#uk"></use>
        <image xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/icons/flags/uk.png" x="0" y="0" height="20px" width="34px" alt="uk"/>
    </svg>
    <span>United Kingdom</span>
</a>

Belgium Canada France Germany Italy Netherlands Spain United Kingdom

Icon Text

<div class="icon-text">
	<svg class="icon icon--menu"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#menu"></svg> MENU
</div>

MENU

Image

Default

When adding an image, it'll never grow large than the container. For accessibility, it's important to include the alt attribute.

<div class="container container--content">
	<p>Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players
		employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your
		way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.</p>
	<img src="/assets/toolkit/examples/games/detail-page/Cards.jpg" alt="Cards used when playing Black Fleet" />
	<p>Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players
		employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your
		way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.</p>
</div>

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.

Wide

To offset an image to be wider than the content, use the is-width-wide class.

<div class="container container--content">
	<p>Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players
		employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your
		way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.</p>
	<img src="/assets/toolkit/examples/games/detail-page/Cards.jpg" alt="Cards used when playing Black Fleet" class="is-width-wide" />
	<p>Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players
		employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your
		way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.</p>
</div>

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.

Full

Images can be fill the width of the browser window by applying is-width-full.

<div class="container container--content">
	<p>Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players
		employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your
		way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.</p>
	<img src="/assets/toolkit/examples/games/detail-page/Black-Fleet_cover-large.jpg" alt="" class="is-width-full" />
	<p>Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players
		employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your
		way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.</p>
</div>

Dastardly villains have captured the governor’s daughter, and it’s up to you to save her. Employ merchants to trade goods, or use your pirates to sink your enemies and steal their treasures. Barter or blast your way to victory! In Black Fleet, players employ their pirates, merchants and occasionally, the Royal Navy to trade for gold, and sometimes just take it. Every turn you will play a movement card to determine where and how you can move, and what you can do when you get there. Swashbuckle your way across the Caribbean, and rescue the governor’s daughter from the Black Fleet.

Input

Default

<label for="textInput">Label name</label>
<input type="text" id="textInput" />

Label name

Rounded

<input type="text" class="input--rounded" />

List

Divided

<ul class="list list--divided">
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Horizontal

<ul class="list list--horizontal">
	<li>List item one.</li>
	<li>List item two.</li>
	<li>List item three.</li>
</ul>

List item one.
List item two.
List item three.

Ordered

<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ol>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Unordered

<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

Locations

<div class="grid">
	<div class="grid__row">
		<div class="grid__item grid__item--6">
			<h3>Paris</h3>
			<ul class="list list--divided">
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Clarks Cards</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Pulp's Comics VOF</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">WH Smith</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Les Super Heros</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="grid__item grid__item--6">
			<h3>Marseille</h3>
			<ul class="list list--divided">
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Shakespeare and Company</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Junkudo</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="grid__row">
		<div class="grid__item grid__item--6">
			<h3>Lyon</h3>
			<ul class="list list--divided">
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Khai Tri</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="grid__item grid__item--6">
			<h3>Nice</h3>
			<ul class="list list--divided">
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Galeries Lafayette Haussmann</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">Crocodisc</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
				<li>
					<div class="info">
						<div class="info__name font--alternate font--regular">La Rubrique a Bulles</div>
						<div class="info__link"><a href="" class="link--chevron">View</a></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>

Paris

Clarks Cards

View
Pulp's Comics VOF

View
WH Smith

View
Les Super Heros

View

Marseille

Shakespeare and Company

View
Junkudo

View

Lyon

Khai Tri

View

Nice

Galeries Lafayette Haussmann

View
Crocodisc

View
La Rubrique a Bulles

View

Logo

<div class="logo">
	<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>

Pager

<div class="pager">
	<div class="pager__newer">
		<a href="#">&laquo; Prev</a>
	</div>
	<div class="pager__summary">
		1 of 4
	</div>
	<div class="pager__older">
		<a href="#">Next &raquo;</a>
	</div>
</div>

Paragraph

<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
	nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.

Radio

<input type="radio" name="groupName" id="radio1" checked="checked" /><label for="radio1">Radio 1</label>
<input type="radio" name="groupName" id="radio2" /><label for="radio2">Radio 2</label>
<input type="radio" name="groupName" id="radio3" /><label for="radio3">Radio 3</label>

Radio 1 Radio 2 Radio 3

Select

Default

<select name="" id="">
	<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>

Half Width

<div class="grid gap--none">
	<div class="grid__item grid__item--6">
		<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>

Full Width

<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>

Show Hide

Toggle visibility of an element. To be visible by default, apply is-active to show-hide element.

<div class="show-hide js-example">
	<div class="show-hide__inactive">
		<button class="btn js-toggle-css" data-target=".js-example" data-css="is-active">Show</button>
	</div>

	<div class="show-hide__active">
		<p>This content is now visible.</p>
		<button class="btn js-toggle-css" data-target=".js-example" data-css="is-active">Hide</button>
	</div>
</div>

This content is now visible.

Social Follow

<hr>
<div class="flex flex-direction--row flex-align--center flex--shrink-none margin-bottom--small">
	<div class="flex flex-direction--row flex-align--center flex--shrink-none margin-right--default">
		Follow Us:
	</div>
	<div class="flex flex-direction--row flex-align--center flex--shrink-none">
		<a href="https://www.facebook.com/asmodeeNA/" class="link--plain margin-right--default" target="_blank"><svg class="icon icon--facebook"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#facebook"></svg></a>
		<a href="https://twitter.com/AsmodeeNA" class="link--plain margin-right--default" target="_blank"><svg class="icon icon--twitter"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#twitter"></svg></a>
		<a href="https://www.youtube.com/user/AsmodeeGamesUSA" class="link--plain margin-right--default" target="_blank"><svg class="icon icon--youtube"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#youtube"></svg></a>
		<a href="https://www.instagram.com/Asmodee_NorthAmerica/" class="link--plain margin-right--default" target="_blank"><svg class="icon icon--instagram"><use xlink:href="/Themes/Asmodee.Orchard.DefaultTheme/Content/sprite-sheet.svg#instagram"></svg></a>
	</div>
</div>

Summary

Default

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<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>

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 1

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<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>

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 2

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<div class="summary summary--featured summary--featured-2">
	<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>

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 3

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<div class="summary summary--featured summary--featured-3">
	<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>

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

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<div class="summary summary--featured">
	<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>

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'

Horizontal Simple

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<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>

The Elegant Solution

Horizontal

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<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>

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...

Overlay

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<div class="summary summary--overlay">
	<div class="summary__image">
		<a href="/pages/Events-Detail-Page.html" class="border--none">
            <img src="/assets/toolkit/examples/event_artwork_small.jpg" alt="">
            <div class="summary__meta">
                <h3 class="margin-bottom--small">Gen Con</h3>
                <span class="font--regular">17/08/2017 - 20/08/2017 | France | 2 Locations</span>
            </div>
        </a>
	</div>
	<div class="summary__body">
		<p>Gen Con is the original, longest-running gaming convention in the world!</p>
		<p>With 500+ exhibiting companies from the game industry, award-winning authors and artists, costumed attendees, more than 16,000 events, a Family Fun Pavilion...</p>
		<span><a href="/pages/Events-Detail-Page.html">Read more about 'Gen Con'</a></span>
	</div>
</div>

Gen Con

17/08/2017 - 20/08/2017 | France | 2 Locations

Gen Con is the original, longest-running gaming convention in the world!

With 500+ exhibiting companies from the game industry, award-winning authors and artists, costumed attendees, more than 16,000 events, a Family Fun Pavilion...

Simple

Image dimensions: 768 x 432 (16:9). Download template (.psd).

<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>

Black Fleet

Table

<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
		<tr>
			<td>Table Cell 1</td>
			<td>Table Cell 2</td>
			<td>Table Cell 3</td>
		</tr>
	</tbody>
</table>

Table Heading 1	Table Heading 2	Table Heading 3
Table Footer 1	Table Footer 2	Table Footer 3
Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 1	Table Cell 2	Table Cell 3

Textarea

<label for="textArea">Label name</label>
<textarea name="" id="textArea" cols="30" rows="10"></textarea>

Label name

Twitter Feed

<a class="twitter-grid" data-partner="tweetdeck" href="https://twitter.com/whatjackhasmade/timelines/897484827741626368">asmodee</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

asmodee

Components

Anchor

Default

Subtle

Plain

Button

Default

Full Width

Icon

Link Subtle

Checkbox

Divider

Clash

Skew

Embed

Default

Wide

Fieldset

Gallery

Default

Grid

Grid Default

Grid Variation

Grid Shortcuts

Grid Spacing

Headings

Heading 1

Heading One

Heading 2

Heading Two

Heading 3

Heading Three

Section Title

Section title

Heading Backgrounds

Heading on a purple background

Hero

Default

7 Wonders

Default Left

7 Wonders

Default Right

7 Wonders

Default Short

7 Wonders

Overlay Black

7 Wonders

Overlay Blue

7 Wonders

Overlay Orange

7 Wonders

Overlay Primary

7 Wonders

Overlay Purple

7 Wonders

Hr

Icon

Default

Flag

Icon Text

Image

Default

Wide

Full

Input

Default

Rounded

List

Divided

Horizontal

Ordered

Unordered

Locations

Paris

Marseille

Lyon

Nice

Logo

Pager

Paragraph