Frequently Used

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

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

Image

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

Cards used when playing 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.

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>
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. 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.