#212121 FOOTER,

LOGO,

hEADINGS

#363636

bODY TEXT

#797979

GREY TEXT

#F6F6F6

BG COLOUR

#ecdad0

Blush

#A20024

Maroon

Headings

H1 Plantin Pro Heading 54px

<h1 class=”h1″>H1 Plantin Pro Heading 54px</h1>

H2 Plantin Pro Heading 42px

<h2 class="h2">H2 Plantin Pro Heading 42px</h2>

H3 Plantin Pro Heading 40px

<h3 class="h3">H3 Plantin Pro Heading 40px</h3>

H4 Plantin Pro Heading 32px

<h4>H4 Plantin Pro Heading 32px</h4>

H5 Plantin Pro Heading 28px

<h5>H5 Plantin Pro Heading 28px</h5>

H6 Plantin Pro Heading 26px

<h6>H6 Plantin Pro Heading 26px</h6>

Body Text

Hero New. 16px / 28px line height bold and italic with a link<p>Hero New. 16px / 28px line height <strong>bold</strong> and <em>italic/<em> with <a href="#">a link</a></p>

Hero New. 14px / 26px line height<p class="small">Hero New. 14px / 26px line height</p>

Hero new. 13px<p class="capitalised">Hero new. 13px</p>

Hero new. 13px<p class="capitalised underline">Hero new. 13px</p>

  • Unordered List
  • Unordered List
  • Unordered List

<ul><li>Unordered List</li><li>Unordered List</li><li>Unordered List</li></ul>

  1. Ordered List
  2. Ordered List
  3. Ordered List

<ol><li>Ordered List</li><li>Ordered List</li><li>Ordered List</li></ol>

Buttons

This is a clear button <button class="button clear-button">button</button> This is a dark button <button class="button dark-button">button</button> This is a normal button <button class="button">button</button> This is a light pink button <button class="button blush-button">button</button>

Tables (Basic and Striped)

OrderDATESTATUSTOTAL
#123JUN 21, 2020COMPLETED£8,495.00
#123JUN 21, 2020COMPLETED£8,495.00

<table class="basic">
<thead>
<th>Order</th>
<th>DATE</th>
<th>STATUS</th>
<th>TOTAL</th>
</thead>
<tbody>
<tr>
<td data-title="order">#123</td>
<td data-title="date">JUN 21, 2020</td>
<td data-title="status">COMPLETED</td>
<td data-title="total">£8,495.00</td>
</tr>
<tr>
<td data-title="order">#123</td>
<td data-title="date">JUN 21, 2020</td>
<td data-title="status">COMPLETED</td>
<td data-title="total">£8,495.00</td>
</tr>
</tbody>
</table>

OrderDATESTATUSTOTAL
#123JUN 21, 2020COMPLETED£8,495.00
#123JUN 21, 2020COMPLETED£8,495.00
#123JUN 21, 2020COMPLETED£8,495.00
#123JUN 21, 2020COMPLETED£8,495.00

<table class="striped">
<thead>
<th>Order</th>
<th>DATE</th>
<th>STATUS</th>
<th>TOTAL</th>
</thead>
<tbody>
<tr>
<td data-title="order">#123</td>
<td data-title="date">JUN 21, 2020</td>
<td data-title="status">COMPLETED</td>
<td data-title="total">£8,495.00</td>
</tr>
<tr>
<td data-title="order">#123</td>
<td data-title="date">JUN 21, 2020</td>
<td data-title="status">COMPLETED</td>
<td data-title="total">£8,495.00</td>
</tr>
</tbody>
</table>

Breadcrumb

BrandsRolex <div class="woocommerce"><nav class="woocommerce-breadcrumb">Brands<i class="fas fa-chevron-right" aria-hidden="true"></i>Rolex</nav></div>

Accordion

Lorem ipsum dolor sit amet

Nunc tempor nisl quis commodo blandit. Proin iaculis commodo enim nec mollis. Maecenas bibendum, enim nec ornare porttitor, mauris massa fermentum neque, eu tempus sem diam id nisi.Quisque non magna bibendum, ornare tellus at, tempor tortor.

In viverra lorem nec augue finibus, ut feugiat massa porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Suspendisse potenti. Vestibulum congue nunc sit amet neque varius mattis.

In ullamcorper mattis nisl. Ut convallis, leo vitae varius mattis, arcu nibh imperdiet nisi, eget dapibus justo sapien id est.<div class="row faqs">
<div class="col-12">
<div>
<div>
<a class="collapsed" data-toggle="collapse" href="#question-111693" role="button" aria-expanded="false" aria-controls="question-111693">Lorem ipsum dolor sit amet</a>
<div class="collapse" id="question-111693">
<p>Nunc tempor nisl quis commodo blandit. Proin iaculis commodo enim nec mollis. Maecenas bibendum, enim nec ornare porttitor, mauris massa fermentum neque, eu tempus sem diam id nisi.</p>
</div>
</div>
<div>
<a class="collapsed" data-toggle="collapse" href="#question-111697" role="button" aria-expanded="false" aria-controls="question-111697">Quisque non magna bibendum, ornare tellus at, tempor tortor.</a>
<div class="collapse" id="question-111697">
<p>In viverra lorem nec augue finibus, ut feugiat massa porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div>
<a class="collapsed" data-toggle="collapse" href="#question-111695" role="button" aria-expanded="false" aria-controls="question-111695">Suspendisse potenti. Vestibulum congue nunc sit amet neque varius mattis.</a>
<div class="collapse" id="question-111695">
<p>In ullamcorper mattis nisl. Ut convallis, leo vitae varius mattis, arcu nibh imperdiet nisi, eget dapibus justo sapien id est.</p>
</div>
</div>
</div>
</div>
</div>

Form Elements

Name * <div class="luxe-form">
<label class="label" for="name">Name <span class="required">*</span></label>
<input name="name" id="name" type="text" value="" aria-required="true" aria-invalid="false">
</div>
Select Option <div class="luxe-form">
<select name="select" id="select">
<option value="select" selected="selected">Select</option>
<option value="option">Option</option>
</select>
</div>

  • Checkbox

<div class="luxe-form">
<ul>
<li>
<label for="choice_4_9_2" id="label_4_9_2">Checkbox</label>
<input name="input_9.1" type="checkbox" value="Email" id="choice_4_9_2">
</li>
</ul>
</div>

  • Yes
  • No

<div class="luxe-form">
<ul class="square-radio">
<li>
<input name="input_29" type="radio" value="Yes" checked="checked" id="choice_3_29_0">
<label for="choice_3_29_0" id="label_3_29_0">Yes</label>
</li>
<li>
<input name="input_29" type="radio" value="No" id="choice_3_29_1">
<label for="choice_3_29_1" id="label_3_29_1">No</label>
</li>
</ul>
</div>

  • Large
  • Radio Buttons

<div class="luxe-form">
<ul class="large">
<li>
<label for="choice_4_7_0" id="label_4_7_0">Large</label>
<input name="input_7" type="radio" value="Email" id="choice_4_7_0">
</li>
<li>
<label for="choice_4_7_1" id="label_4_7_1">Radio Buttons</label>
<input name="input_7" type="radio" value="Phone" id="choice_4_7_1">
</li>
</ul>
</div>

  • Large
  • Checkboxes

<div class="luxe-form">
<ul class="large">
<li>
<label for="choice_4_9_3" id="label_4_9_3">Large</label>
<input name="input_9.1" type="checkbox" value="Email" id="choice_4_9_3">
</li>
<li>
<label for="choice_4_9_4" id="label_4_9_4">Checkboxes</label>
<input name="input_9.2" type="checkbox" value="SMS" id="choice_4_9_4">
</li>
</ul>
</div>

Steps

1

Watch

2

Details

3

Inspect<div class="sell-steps checkout-steps">
<div class="completed">
<span class="number">1</span>
<p>Watch</p>
</div>
<div class="active">
<span class="number">2</span>
<p>Details</p>
</div>
<div>
<span class="number">3</span>
<p>Inspect</p>
</div>
</div>

Popover

Click to toggle popover – top <button type="button" class="button" data-toggle="popover" data-placement="top" title="Popover title" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Click to toggle popover - top</button> Click to toggle popover – right <button type="button" class="button" data-toggle="popover" data-placement="right" title="Popover title" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Click to toggle popover - right</button> Click to toggle popover – bottom <button type="button" class="button" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Click to toggle popover - bottom</button><button type="button" class="button" data-toggle="popover" data-placement="left" title="Popover title" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Click to toggle popover - left</button> Click to toggle popover – left

Tooltip

Tooltip on top <button type="button" class="button tooltip-button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> Tooltip on right <button type="button" class="button tooltip-button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> Tooltip on bottom <button type="button" class="button tooltip-button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button><button type="button" class="button tooltip-button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> Tooltip on left

Filters

Brand

  • Rolex
  • Audemars Piguet
  • Bell & Ross

Bracelet

  • Steel
  • 18k White Gold
  • 18k Rose Gold

Gender

  • Male
  • Female
  • Men
  • Unisex

<div class="bf-widget-product-filters luxe-filters">
<div class="filter-options">
<div>
<a data-toggle="collapse" class="collapsed" href="#filter-pa_brand" role="button" aria-expanded="false" aria-controls="filter-pa_brand">Brand</a>
<div class="collapse" id="filter-pa_brand" style="">
<ul>
<li>
<label><input type="checkbox" name="filter_brand" value="rolex">Rolex</label>
</li>
<li>
<label><input type="checkbox" name="filter_brand" value="audemars-piguet">Audemars Piguet</label>
</li>
<li>
<label><input type="checkbox" name="filter_brand" value="bell-ross">Bell & Ross</label>
</li>
</ul>
</div>
</div>
<div>
<a data-toggle="collapse" class="collapsed" href="#filter-pa_bracelet" role="button" aria-expanded="false" aria-controls="filter-pa_bracelet">Bracelet</a>
<div class="collapse" id="filter-pa_bracelet" style="">
<ul>
<li>
<label><input type="checkbox" name="filter_bracelet" value="steel">Steel</label>
</li>
<li>
<label><input type="checkbox" name="filter_bracelet" value="18k-white-gold">18k White Gold</label>
</li>
<li>
<label><input type="checkbox" name="filter_bracelet" value="18k-rose-gold">18k Rose Gold</label>
</li>
</ul>
</div>
</div>
<div>
<a data-toggle="collapse" class="collapsed" href="#filter-pa_gender" role="button" aria-expanded="false" aria-controls="filter-pa_gender">Gender</a>
<div class="collapse" id="filter-pa_gender" style="">
<ul>
<li>
<label><input type="checkbox" name="filter_gender" value="male">Male</label>
</li>
<li>
<label><input type="checkbox" name="filter_gender" value="female">Female</label>
</li>
<li>
<label><input type="checkbox" name="filter_gender" value="men">Men</label>
</li>
<li>
<label><input type="checkbox" name="filter_gender" value="unisex">Unisex</label>
</li>
</ul>
</div>
</div>
</div>
</div>

Alerts

A simple primary alert with an example link. <div class="alert alert-primary" role="alert">A simple primary alert with <a href="#" class="alert-link">an example link</a>.</div> A simple accent alert with an example link. <div class="alert alert-accent" role="alert">A simple accent alert with <a href="#" class="alert-link">an example link</a>.</div> A simple secondary alert with an example link. <div class="alert alert-secondary" role="alert">A simple secondary alert with <a href="#" class="alert-link">an example link</a>.</div> A simple success alert with an example link. <div class="alert alert-success" role="alert">A simple success alert with <a href="#" class="alert-link">an example link</a>.</div> A simple danger alert with an example link. <div class="alert alert-danger" role="alert">A simple danger alert with <a href="#" class="alert-link">an example link</a>.</div> A simple warning alert with an example link. <div class="alert alert-warning" role="alert">A simple warning alert with <a href="#" class="alert-link">an example link</a>.</div> A simple info alert with an example link. <div class="alert alert-info" role="alert">A simple info alert with <a href="#" class="alert-link">an example link</a>.</div> A simple light alert with an example link. <div class="alert alert-light" role="alert">A simple light alert with <a href="#" class="alert-link">an example link</a>.</div> A simple dark alert with an example link. <div class="alert alert-dark" role="alert">A simple dark alert with <a href="#" class="alert-link">an example link</a>.</div>