Home
0px
<header class="header">
<div class="header-container site-width">
<a class="header-logo-link" href="#">
<svg class="header-logo" width="126" height="34" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 637 173">
<path fill="#58595b" fill-rule="nonzero" d="M211.47 118.68h30.25c24.84 0 39.43-15.42 39.43-41.67v-.11c0-26.25-14.71-41.2-39.43-41.2h-30.25v82.98Zm14.83-12.47V48.29h13.89c16.48 0 25.9 10.13 25.9 28.72 0 18.96-9.19 29.2-25.9 29.2H226.3Z" />
<path fill="#58595b" fill-rule="nonzero" d="M299.68 138.93c12.71 0 19.9-4.83 24.48-18.13l21.9-63.1h-15.07l-14.24 48.74h-.47l-14.25-48.73h-15.65l21.9 60.97-.83 2.47c-1.89 5.18-4.83 6.71-10.36 6.71-2 0-3.65-.23-4.7-.47v10.95c1.64.24 4.58.59 7.29.59Z" />
<path fill="#58595b" fill-rule="nonzero" d="M352.71 118.68h14.24V83.37c0-8.83 5.3-14.83 13.54-14.83 8.12 0 12.12 4.94 12.12 13.54v36.6h14.37V79.25c0-14.12-7.66-22.72-21.07-22.72-9.3 0-15.42 4.24-18.6 10.71h-.36v-9.53h-14.24v60.97Z" />
<path fill="#58595b" fill-rule="nonzero" d="M436.42 119.74c8 0 14.83-4 18.24-10.47h.35v9.41h14.36v-41.9c0-12.24-9.88-20.25-25.07-20.25-15.42 0-24.84 8.12-25.66 18.84l-.12.7h13.3l.12-.47c.94-4.47 5.06-7.65 11.9-7.65 7.17 0 11.17 3.77 11.17 9.89v4.12l-15.89 1.06c-14.71.94-23.19 7.41-23.19 18.24v.12c0 10.83 8.24 18.36 20.49 18.36Zm-6.24-18.95v-.12c0-4.82 3.88-7.88 10.94-8.35l13.9-.83v4.6c0 7.3-6.13 12.7-14.37 12.7-6.24 0-10.47-3.06-10.47-8Z" />
<path fill="#58595b" fill-rule="nonzero" d="M480.88 118.68h14.24V81.37c0-7.42 4.83-12.83 11.78-12.83 6.7 0 10.82 4.24 10.82 11.06v39.08h13.9V81.02c0-7.3 4.7-12.48 11.65-12.48 6.94 0 10.83 4.35 10.83 11.89v38.25h14.36V76.9c0-12.25-7.89-20.37-19.9-20.37-8.82 0-16 4.71-18.95 12.24h-.35c-2.24-7.76-8.36-12.24-16.95-12.24-8 0-14.24 4.36-16.83 10.95h-.36V57.7h-14.24v60.97Z" />
<path fill="#58595b" fill-rule="nonzero" d="M606.87 119.86c17.89 0 29.42-11.89 29.42-31.66v-.12c0-19.66-11.77-31.55-29.54-31.55-17.66 0-29.43 12-29.43 31.55v.12c0 19.77 11.54 31.66 29.55 31.66Zm0-11.54c-9.07 0-14.95-7.3-14.95-20.12v-.12c0-12.6 6-20.01 14.83-20.01 9.06 0 14.95 7.3 14.95 20v.13c0 12.83-5.77 20.12-14.83 20.12Z" />
<path fill="#b452b4" fill-rule="nonzero" d="M55.9 5.9c2.98-2.34 5.54-1.85 7.87 1.07 2.36 2.95 4.82 5.81 7.25 8.7 4.05 4.8 9.78 3.98 12.43-1.8 1.4-3.03 2.81-6.08 3.93-9.21 1.34-3.75 3.5-5.4 7.6-4.34 2.66.69 5.44 1.01 8.19 1.2 4.63.32 6.64 2.79 6.85 7.29.16 3.33.63 6.65 1.08 9.96.7 5.01 5.7 7.62 10.07 5.08 3.38-1.97 6.6-4.26 9.74-6.6 2.96-2.2 5.5-1.98 8.14.52 2.64 2.48 5.43 4.81 8.18 7.19 2.06 1.78 2.38 3.8 1.17 6.23-1.76 3.5-3.54 7-5.07 10.62-2.3 5.38.75 10 6.61 10.17 3.2.1 6.4.07 9.6.1l-.4 12.03-.97.3c-2.49-1.64-4.81-3.64-7.49-4.88-11.3-5.24-23.08-5.86-35.11-2.98-13.13-11.71-28.13-14.59-44.83-9.52l-22.61-3.49c1.66-12.44.9-25.33 6.95-36.95l-.05.07.86-.76Z" />
<path fill="#f9be29" fill-rule="nonzero" d="M119.24 146.32c-7.57 2.48-9.07 8.3-9.43 15.48-.46 8.86-.9 8.84-9.77 10.37-8.97 1.56-8.97 1.56-12.52-6.68-.58-1.33-1.4-2.62-1.69-4-1.19-5.92-5.37-7.63-10.57-7.24a10.9 10.9 0 0 0-6.25 2.68c-2.93 2.77-5.34 6.12-7.87 9.3-1.62 2.03-3.35 2.4-5.7 1.18-2.95-1.54-6-2.95-9.1-4.16-3.04-1.17-3.83-3.05-3.02-6.14.69-2.65.46-5.6 1.43-8.12 2.48-6.36-.9-10.3-5.7-12.76-2.34-1.21-5.94-.02-8.97.08l2.47-15.13a97.31 97.31 0 0 0 56.85 10.26c10.14-1.22 20.1-3.97 30.15-6.03l-.31 20.9Z" />
<path fill="#ef295e" fill-rule="nonzero" d="m21.85 109.65-2.67-9.74-.81-.74.07.06c-.88-1.93-1.29-4.35-2.7-5.7-4.97-4.74-10.27-9.1-15.45-13.6-.41-3.02 1.09-4.54 3.89-5.25 3.64-.92 7.25-1.96 10.86-2.99 7.12-2.03 9.25-9.26 4.37-14.69-2.42-2.68-5.09-5.2-7.13-8.14-.92-1.32-.57-3.51-.79-5.31l36.06.54c-1.03 7.72-1.83 15.44.79 23.03A52.02 52.02 0 0 0 43.9 92.6l-11.7 27.7c-5.35-1.7-7.44-6.58-10.35-10.65Z" />
<path fill="#bfe163" fill-rule="nonzero" d="m158.17 64.42.97-.31 9.29-2.86c.9 2.26 2.25 4.46 2.54 6.79.16 1.26-1.14 3.19-2.33 4.05-3.3 2.37-6.9 4.3-10.34 6.48-4.96 3.15-4.92 9.56.1 12.78a243.8 243.8 0 0 0 10.4 6.37c2.48 1.43 3.54 3.06 2.49 6.05a87.18 87.18 0 0 0-2.84 10.5c-.7 3.18-2.48 4.29-5.61 4-2.75-.25-5.55.06-8.27-.33-4.65-.65-8.25.47-10.36 4.94l-23.68.92c.97-1.38 1.76-2.92 2.92-4.1 5.54-5.73 11.68-10.96 16.68-17.11 9.07-11.17 15.75-23.7 18.04-38.17Z" />
<path fill="#fcf366" fill-rule="nonzero" d="m120.53 123.8 23.68-.92c.03 2.45-.53 5.1.22 7.32 1.29 3.83 3.27 7.45 5.2 11.02 1.28 2.38.68 3.94-1.14 5.72-10.56 10.32-10.5 10.3-22.96 2.07-1.87-1.24-4.18-1.81-6.29-2.7l.31-20.9.39-1.4c.2-.04.4-.1.6-.2Z" />
<path fill="#ef62b6" fill-rule="nonzero" d="m47.55 44.08-36.06-.53c2.14-3.27 4.35-6.5 6.4-9.83 1.56-2.56 3.56-3 6.29-2.05C28 33 31.88 34.2 35.78 35.3c5.43 1.55 10.27-2.43 9.74-8.09-.35-3.6-.93-7.18-1.65-10.73-.73-3.64.02-6.26 3.88-7.43 2.47-.75 4.89-1.64 7.33-2.47-6.05 11.62-5.29 24.51-6.95 36.95-.19.19-.38.37-.58.54Z" />
<path fill="#f26a75" fill-rule="nonzero" d="M21.85 109.65c2.91 4.07 5 8.95 10.35 10.65l.35.89-2.47 15.12c-14.3 4.49-10.53 5.18-18.48-6.45-2.52-3.7-2.19-6.35.9-9.44 3.36-3.35 6.25-7.16 9.35-10.77Z" />
<path fill="#f26975" fill-rule="nonzero" d="M.3 79.93c5.17 4.5 10.47 8.86 15.43 13.6 1.42 1.35 1.83 3.77 2.71 5.7-5.02-1.41-10.11-2.6-15-4.37a6 6 0 0 1-3.27-4.1c-.4-3.56.03-7.22.12-10.83Z" />
<path fill="#70bce8" fill-rule="nonzero" d="m168.43 61.25-9.3 2.86.4-12.03c6.8-1.06 8.38.58 8.9 9.17Z" />
<path fill="#dfb048" fill-rule="nonzero" d="M112.54 119.32c5.69-6.2 11.14-12.5 13.41-20.94 3.75-13.95 1.4-26.64-7.43-38.1-.96-1.26-1.97-2.49-2.95-3.74 12.03-2.87 23.8-2.26 35.11 2.99 2.68 1.24 5 3.24 7.5 4.89-2.3 14.48-8.98 27-18.05 38.17-5 6.15-11.14 11.38-16.68 17.1-1.16 1.2-1.95 2.73-2.92 4.11-.19.1-.39.17-.6.2-.82-4.15-5.21-2.66-7.39-4.68Z" />
<path fill="#d705ad" fill-rule="nonzero" d="M70.74 47.03a49.45 49.45 0 0 0-22.4 20.09c-2.62-7.6-1.82-15.31-.8-23.04.2-.17.4-.35.59-.54l22.61 3.49Z" />
<path fill="#f7a413" fill-rule="nonzero" d="M112.54 119.33c2.18 2.02 6.57.52 7.4 4.68l-.39 1.4c-10.04 2.06-20 4.81-30.15 6.03a97.31 97.31 0 0 1-56.85-10.26l-.35-.88 11.7-27.7c2.12 5.36 3.52 11.16 6.5 15.99 11.86 19.25 36.33 25.22 56.1 14.15l6.04-3.41Z" />
</svg>
</a>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</div>
</header>
<div class="app">
<main class="main">
<div class="main-container site-width">
<section class="section">
<header>
<h1>Your dashboard</h1>
<p>Here's a list of all individuals you have told us about. Here you can see each person and how many Dynamo policies are active and view your policy documents.</p>
<p>Want even more Dynamo products? Just click on your profile and add more cover, really simple!</p>
</header>
<div class="cards">
<a class="card" href="#">
<div class="card-media">
<img class="card-avatar-image" src="resources/avatar.jpg">
</div>
<div class="card-content">
<div class="card-body">
<h3 class="card-title">Sam White</h3>
<div class="card-meta">141 Rhymney Street</div>
<div class="card-meta">CF24 8QD</div>
</div>
<div class="card-count cs-red">
4<span class="sr-only">products</span>
</div>
</div>
</a>
<a class="card" href="#">
<div class="card-media">
<img class="card-avatar-image" src="resources/avatar2.jpg">
</div>
<div class="card-content">
<div class="card-body">
<h3 class="card-title">Jason Green</h3>
<div class="card-meta">11 Senghenydd Road</div>
<div class="card-meta">CF23 6AD</div>
</div>
<div class="card-count cs-red">
3<span class="sr-only">products</span>
</div>
</div>
</a>
<a class="card" href="#">
<div class="card-media">
<img class="card-avatar-image" src="resources/avatar3.jpg">
</div>
<div class="card-content">
<div class="card-body">
<h3 class="card-title">Taylor Orange</h3>
<div class="card-meta">74 Miskin Street</div>
<div class="card-meta">CF45 7ND</div>
</div>
<div class="card-count cs-red">
2<span class="sr-only">products</span>
</div>
</div>
</a>
</div>
<button class="button button--secondary">Add a new person</button>
</section>
<section class="section">
<header>
<h2>Breakdown cover</h2>
<p>Here’s a list of all your active policies and additional products you might be interested in.</p>
</header>
<div class="cards">
<a class="card cs-red" href="#">
<div class="card-body">
<h3 class="card-title">Gold Cover (£2,000)</h3>
<div class="card-meta">Volvo V40 (FE07 DDO)</div>
</div>
<div class="card-price card-price--flat">
<div class="card-price-pounds">£3</div>
<div class="card-price-pence">.95</div>
<div class="card-price-period">per month</div>
</div>
<svg class="card-arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</a>
<a class="card cs-red" href="#">
<div class="card-body">
<h3 class="card-title">Gold Cover (£2,000)</h3>
<div class="card-meta">Volvo V40 (FE07 DDO)</div>
</div>
<div class="card-price card-price--flat">
<div class="card-price-pounds">£3</div>
<div class="card-price-pence">.95</div>
<div class="card-price-period">per month</div>
</div>
<svg class="card-arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
<button class="button button--secondary">Add more cover</button>
</section>
<section class="section">
<header>
<h2>Gadget insurance</h2>
<p>Click to view or change your cover.</p>
</header>
<div class="cards">
<a class="card cs-yellow" href="#">
<div class="card-body">
<h3 class="card-title">Gold Cover (£2,000)</h3>
<div class="card-meta">Volvo V40 (FE07 DDO)</div>
</div>
<div class="card-price card-price--flat">
<div class="card-price-pounds">£3</div>
<div class="card-price-pence">.95</div>
<div class="card-price-period">per month</div>
</div>
<svg class="card-arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</a>
<a class="card cs-yellow" href="#">
<div class="card-body">
<h3 class="card-title">Gold Cover (£2,000)</h3>
<div class="card-meta">Volvo V40 (FE07 DDO)</div>
</div>
<div class="card-price card-price--flat">
<div class="card-price-pounds">£3</div>
<div class="card-price-pence">.95</div>
<div class="card-price-period">per month</div>
</div>
<svg class="card-arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
<button class="button button--secondary">Add more cover</button>
</section>
<section class="section">
<header>
<h2>Diesel claim progress</h2>
<p>Click to view or change your cover.</p>
</header>
<div class="cards">
<a class="card cs-green" href="#">
<div class="card-body">
<h3 class="card-title">Gold Cover (£2,000)</h3>
<div class="card-meta">Volvo V40 (FE07 DDO)</div>
</div>
<div class="card-price card-price--flat">
<div class="card-price-pounds">£3</div>
<div class="card-price-pence">.95</div>
<div class="card-price-period">per month</div>
</div>
<svg class="card-arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
<button class="button button--secondary">Amend your claim</button>
</section>
</div>
</main>
</div>
{{ partial src="components/mobile-header/mobile-header" }}
<div class="app">
<main class="main">
<div class="main-container site-width">
<section class="section">
<header>
<h1>Your dashboard</h1>
<p>Here's a list of all individuals you have told us about. Here you can see each person and how many Dynamo policies are active and view your policy documents.</p>
<p>Want even more Dynamo products? Just click on your profile and add more cover, really simple!</p>
</header>
<div class="cards">
{{ partial src="components/card/card" :props="['avatar'=>'resources/avatar.jpg', 'name'=>'Sam White', 'productCount'=>4, 'address'=>'141 Rhymney Street', 'postcode'=>'CF24 8QD']" }} {{ partial src="components/card/card" :props="['avatar'=>'resources/avatar2.jpg', 'name'=>'Jason Green', 'productCount'=>3, 'address'=>'11 Senghenydd Road', 'postcode'=>'CF23 6AD']" }} {{ partial src="components/card/card" :props="['avatar'=>'resources/avatar3.jpg', 'name'=>'Taylor Orange', 'productCount'=>2, 'address'=>'74 Miskin Street', 'postcode'=>'CF45 7ND']" }}
</div>
{{ partial src="components/button/button-secondary" :props="['label'=>'Add a new person']" }}
</section>
<section class="section">
<header>
<h2>Breakdown cover</h2>
<p>Here’s a list of all your active policies and additional products you might be interested in.</p>
</header>
<div class="cards">
{{ partial src="components/product/product-red" }} {{ partial src="components/product/product-red" }}
</div>
{{ partial src="components/button/button-secondary" :props="['label'=>'Add more cover']" }}
</section>
<section class="section">
<header>
<h2>Gadget insurance</h2>
<p>Click to view or change your cover.</p>
</header>
<div class="cards">
{{ partial src="components/product/product-yellow" }} {{ partial src="components/product/product-yellow" }}
</div>
{{ partial src="components/button/button-secondary" :props="['label'=>'Add more cover']" }}
</section>
<section class="section">
<header>
<h2>Diesel claim progress</h2>
<p>Click to view or change your cover.</p>
</header>
<div class="cards">
{{ partial src="components/product/product-green" }}
</div>
{{ partial src="components/button/button-secondary" :props="['label'=>'Amend your claim']" }}
</section>
</div>
</main>
</div>