Live Demo
{% include components/arrow-link.html
content = "Click me"
url="https://blockstream.com"
arr-brand="primary"
%}<div class="blks-container-fluid">
<div class="blks-nav flex justify-content-btw align-center">
<a class="blks-nav-link" href="#"><img class="blks-logo" src="https://blockstream.com/img/icons/logo_blks.png" alt="logo"/></a>
<nav class="blks-nav justify-content-end nav-collapse">
<a class="blks-nav-link" href="#">Links</a>
<a class="blks-nav-link" href="#">Links</a>
<a class="blks-nav-link" href="#">Links</a>
<a class="blks-nav-link" href="#">Links</a>
</nav>
<div id="navToggle" class="pos-r-3 pos-t-2" onclick="navCollapse(this)">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="blks-container">
<div class="section-margin">
<div class="hero-header" style="height:auto;">
<div class="blks-grid" style="max_width: ;">
<div class="col-2">
<div class="card-hero">
<h1 class="title font-h1 text-white">The first purpose-built hardware wallet for Liquid.</h1>
<p class="text font-p2 text-gray">Blockstream Jade is a purely open-source hardware wallet for the storage of bitcoin and Liquid assets.</p>
<div class="buttons">
<a class="g-btn jade-btn "
href="#" >Get Jade</a>
<a class="g-btn jade-ter-btn "
href="#" >Setup Guide</a>
</div>
</div>
</div>
<div class="col-2">
<div class="card-image">
<img src="https://liquid.net/static/images/liquid_logo.svg" alt="Liquid Logo" style="width:;"/>
</div>
</div>
</div>
</div>
</div>
<div class="title-section
title-center
"
>
<h2 class="title text-white
font-h3
"
>3 Columns Grid</h2>
<p class="text text-gray
font-p2
">A Three Columns Grid displaying three Plain Card components.<br/> You can also include any component inside the Grid</p>
</div>
<div class="blks-grid section-margin">
<div class="col-3">
<div class="card-plain
"
>
<div class="icon" >
<img src="https://blockstream.com/img/icons/diamond-multiple.svg" alt="icon" />
</div>
<div class="title text-white
font-h3
">
Issuance
</div>
<div class="text text-gray
font-p2
">
Quickly issue standards-based digital assets for applications such as security tokens, stablecoins, and more.
</div>
</div>
</div>
<div class="col-3">
<div class="card-plain
"
>
<div class="icon" >
<img src="https://blockstream.com/img/icons/diamond-multiple.svg" alt="icon" />
</div>
<div class="title text-white
font-h3
">
Tracking
</div>
<div class="text text-gray
font-p2
">
Quickly issue standards-basedity tokens, stablecoins, and more.
</div>
</div>
</div>
<div class="col-3">
<div class="card-plain
"
>
<div class="icon" >
<img src="https://blockstream.com/img/icons/diamond-multiple.svg" alt="icon" />
</div>
<div class="title text-white
font-h3
">
Control
</div>
<div class="text text-gray
font-p2
">
Quickly issue standards-based digital assets for applications such as security tokens, stablecoins, and more.
</div>
</div>
</div>
</div>
<div class="title-section
title-center
"
>
<h2 class="title text-white
font-h3
"
>3 Columns Grid</h2>
<p class="text text-gray
font-p2
">Another Three Columns Grid displaying three Simple Card components</p>
</div>
<div class="blks-grid section-margin">
<div class="col-3">
<div class="bs-card">
<div class="bs-card_icon">
<img src="/assets/icons/icon3b.svg" alt="icon"/>
</div>
<div class="bs-card_title text-white
font-h3
">
Card Title
</div>
<div class="bs-card_note">
</div>
<div class="bs-card_text text-gray
font-p2
">
It is a long established fact tent of a page when looking at its layout.
</div>
</div>
</div>
<div class="col-3">
<div class="bs-card">
<div class="bs-card_icon">
<img src="/assets/icons/icon3b.svg" alt="icon"/>
</div>
<div class="bs-card_title text-white
font-h3
">
Card Title
</div>
<div class="bs-card_note">
COMING SOON
</div>
<div class="bs-card_text text-gray
font-p2
">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</div>
</div>
<div class="col-3">
<div class="bs-card">
<div class="bs-card_icon">
<img src="/assets/icons/icon3b.svg" alt="icon"/>
</div>
<div class="bs-card_title text-white
font-h3
">
Card Title
</div>
<div class="bs-card_note">
COMING SOON
</div>
<div class="bs-card_text text-gray
font-p2
">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</div>
</div>
</div>
<div class="title-section
title-center
"
>
<h2 class="title text-white
font-h3
"
>4 Columns Grid</h2>
<p class="text text-gray
font-p2
">A Four Columns Grid displaying 4 Product Menu Card components</p>
</div>
<div class="section-margin">
<div class="blks-grid">
<div class="col-4">
<a class="card-product-menu" href="#">
<div class="icon">
<img src="https://blockstream.com/img/nav_icons/navigation_icons_liquid_solid_colour.svg">
</div>
<div class="col">
<p class="title font-h4 text-white">Liquid Network</p>
<p class="text font-p3 text-gray">Bitcoin layer-2 for digital asset issuance.</p>
</div>
</a>
</div>
<div class="col-4">
<a class="card-product-menu" href="#">
<div class="icon">
<img src="https://blockstream.com/img/nav_icons/navigation_icons_finance_solid_colour.svg">
</div>
<div class="col">
<p class="title font-h4 text-white">Blockstream Finance</p>
<p class="text font-p3 text-gray">Financial products for the Bitcon era</p>
</div>
</a>
</div>
<div class="col-4">
<a class="card-product-menu" href="#">
<div class="icon">
<img src="https://blockstream.com/img/nav_icons/navigation_icons_mining_solid_colour.svg">
</div>
<div class="col">
<p class="title font-h4 text-white">Blockstream Mining</p>
<p class="text font-p3 text-gray">Colocation services for Bitcoin mining operations.</p>
</div>
</a>
</div>
<div class="col-4">
<a class="card-product-menu" href="#">
<div class="icon">
<img src="https://blockstream.com/img/nav_icons/navigation_icons_energy_solid_colour.svg">
</div>
<div class="col">
<p class="title font-h4 text-white">Blockstream Energy</p>
<p class="text font-p3 text-gray">Instant energy demand from the Bitcoin network</p>
</div>
</a>
</div>
</div>
</div>
<div class="title-section
title-center
"
>
<h2 class="title text-white
font-h3
"
>2 Columns Grid</h2>
</div>
<div class="blks-grid section-margin responsive-reverse">
<div class="col-2 justify">
<div class="card-logo-text" style="max-width: 400px;">
<img class="logo" src="https://blockstream.com/img/green/green.svg" alt="logo"/>
<span class="text font-p2 text-gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
<div class="col-2 justify">
<div class="card-image">
<img src="https://blockstream.com/img/img/amp_one_stop_platform.svg" alt="AMP logo" style="width:500px;"/>
</div>
</div>
</div>
<div class="blks-grid section-margin">
<div class="col-2 justify">
<div class="card-image">
<img src="https://blockstream.com/img/img_svg/benefit_from_added_privacy.svg" alt="image" style="width:;"/>
</div>
</div>
<div class="col-2 justify">
<div>
<h3 class="content-title-sm">Lorem ipsum dolor sit amet</h3>
<div class="card-icon-text">
<img class="icon" src="https://blockstream.com/img/cln/dual_funded.svg" alt="icon" />
<p class="text font-p2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
<div class="card-icon-text">
<img class="icon" src="https://blockstream.com/img/cln/dual_funded.svg" alt="icon" />
<p class="text font-p2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
<div class="card-icon-text">
<img class="icon" src="https://blockstream.com/img/cln/dual_funded.svg" alt="icon" />
<p class="text font-p2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
</div>
<div class="blks-grid responsive-reverse section-margin">
<div class="col-2 justify">
<div>
<h3 class="content-title-sm">Lorem ipsum dolor sit amet</h3>
<div class="card-icon-text">
<img class="icon" src="https://blockstream.com/img/cln/dual_funded.svg" alt="icon" />
<p class="text font-p2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
<div class="card-icon-text">
<img class="icon" src="https://blockstream.com/img/cln/dual_funded.svg" alt="icon" />
<p class="text font-p2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
<a class="g-btn cln-sec-btn "
href="#" >Browse All</a>
</div>
</div>
<div class="col-2 justify">
<div class="card-image">
<img src="https://blockstream.com/img/img_svg/setup_p2p_channels.svg" alt="image" style="width:;"/>
</div>
</div>
</div>
<div class="blks-grid section-margin">
<div class="col-2 justify">
<div class="card-logo-text" style="max-width: 390px;">
<img class="logo" src="https://blockstream.com/img/green/green.svg" alt="logo"/>
<span class="text font-p2 text-gray">Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
<div class="col-2 justify">
<div class="card-video" style="border: 2px solid #1CADB2; box-shadow: 0 0 4px #1CADB2;">
<iframe
src="https://www.youtube.com/embed/nv9ItZYCw2E"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
frameborder="0" style="width: 450px; height: 250px; border: 1px solid rgba(28, 173, 179, 0.43); box-shadow: 0 0 3px rgba(28, 173, 179, 0.43);">
</iframe>
</div>
</div>
</div>
<div class="title-section
title-center
"
>
<h2 class="title text-white
font-h3
"
>Mixed Components</h2>
<p class="text text-gray
font-p2
">Grid displaying 3 different components</p>
</div>
<div class="blks-grid justify">
<div class="col-3">
<div class="card-image">
<img src="https://blockstream.com/img/img/amp_one_stop_platform.svg" alt="AMP logo" style="width:;"/>
</div>
</div>
<div class="col-3">
<a class="card-product-menu" href="#">
<div class="icon">
<img src="https://blockstream.com/img/nav_icons/navigation_icons_energy_solid_colour.svg">
</div>
<div class="col">
<p class="title font-h4 text-white">Blockstream Energy</p>
<p class="text font-p3 text-gray">Instant energy demand from the Bitcoin network</p>
</div>
</a>
</div>
<div class="col-3">
<div id="accordionId" class="accordion-container">
<button class="accordionBtn font-h4 text-white">
<span>Title 1</span>
</button>
<div class="accordion-content font-p2 text-gray">
Accordion Content 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<button class="accordionBtn font-h4 text-white">
<span>Title 2</span>
</button>
<div class="accordion-content font-p2 text-gray">
Accordion Content 2 property of the page object.
</div>
<button class="accordionBtn font-h4 text-white">
<span>Title 3</span>
</button>
<div class="accordion-content font-p2 text-gray">
Accordion Content 3 Ad pariatur nostrud pariatur
</div>
</div>
</div>
</div>
<section class="blks-container section-margin">
<div class="title-section
title-center
"
>
<h2 class="title text-white
font-h3
"
>Containers</h2>
<p class="text text-gray
font-p2
">Center Align your content within magin 0 auto and also has max-width options</p>
</div>
<div class="blks-container">
<div class="card-features-list">
<img src="https://blockstream.com/img/img_svg/balanced_channels_with_peers.svg" alt="image" style="width:300px;"/>
<div class="card_content">
<h4 class="card_title font-h3 text-white">Lorem ipsum dolor sit consectetur adipiscing </h4>
<ul>
<li class="font-p2 text-gray">Justo nec ultrices dui sapien eget mi felis bibendum ut tristique</li>
<li class="font-p2 text-gray">Justo nec ultrices dui sapien eget felis bibendum ut tristique</li>
<li class="font-p2 text-gray">Justo nec ultrices dui felis bibendum ut tristique eget mi</li>
</ul>
<a href="https://medium.com/blockstream/setting-up-liquidity-ads-in-c-lightning-54e4c59c091d" class="g-btn cln-sec-btn" target="_blank">Explore Lorem ipsum</a>
</div>
</div>
</div>
</section>
<section>
<div class="blks-grid justify responsive-reverse">
<div class="col-2 justify">
<div class="card-headline" >
<h3 class="title font-h3 text-white">Card Title goes here</h3>
<p class="text font-p2 text-gray">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
</div>
<div class="col-2 justify">
<div class="card-image">
<img src="https://blockstream.com/img/img/network_stability_1.svg" alt="image name" style="width:300px;"/>
</div>
</div>
</div>
<div class="blks-grid justify">
<div class="col-2 justify">
<div class="card-image">
<img src="https://blockstream.com/img/img/network_stability_1.svg" alt="image name" style="width:300px;"/>
</div>
</div>
<div class="col-2 justify">
<div class="card-headline" >
<h3 class="title font-h3 text-white">Card Title goes here</h3>
<p class="text font-p2 text-gray">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
</div>
</div>
<div class="blks-grid justify responsive-reverse">
<div class="col-2 justify">
<div class="card-headline" >
<h3 class="title font-h3 text-white">Card Title goes here</h3>
<p class="text font-p2 text-gray">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
</div>
</div>
<div class="col-2 justify">
<div class="card-image">
<img src="https://blockstream.com/img/img/network_stability_1.svg" alt="image name" style="width:300px;"/>
</div>
</div>
</div>
<div class="blks-grid">
<div class="col">
<div class="bs-card">
<div class="bs-card_icon">
<img src="/assets/icons/icon3b.svg" alt="icon"/>
</div>
<div class="bs-card_title text-white
font-h3
">
Card Title
</div>
<div class="bs-card_note">
</div>
<div class="bs-card_text text-gray
font-p2
">
It is a long established fact tent of a page when looking at its layout.
</div>
</div>
</div>
<div class="col">
<div class="bs-card">
<div class="bs-card_icon">
<img src="/assets/icons/icon3b.svg" alt="icon"/>
</div>
<div class="bs-card_title text-white
font-h3
">
Card Title
</div>
<div class="bs-card_note">
</div>
<div class="bs-card_text text-gray
font-p2
">
It is a long established fact tent of a page when looking at its layout.
</div>
</div>
</div>
<div class="col">
<div class="bs-card">
<div class="bs-card_icon">
<img src="/assets/icons/icon3b.svg" alt="icon"/>
</div>
<div class="bs-card_title text-white
font-h3
">
Card Title
</div>
<div class="bs-card_note">
</div>
<div class="bs-card_text text-gray
font-p2
">
It is a long established fact tent of a page when looking at its layout.
</div>
</div>
</div>
</div>
<div class="blks-grid">
<div class="col-3">
<div class="card-service">
<span class="large-text" style="color: #32B284;">95%</span>
<span class="title font-h3 text-white">Load Periodic maintenance</span>
<span class="text font-p2 text-gray">TReference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. 95%</span>
</div>
</div>
<div class="col-3">
<div class="card-service">
<span class="large-text" style="color: #32B284;">95%</span>
<span class="title font-h3 text-white">Load Factor</span>
<span class="text font-p2 text-gray">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</span>
</div>
</div>
<div class="col-3">
<div class="card-service">
<span class="large-text" style="color: #32B284;">95%</span>
<span class="title font-h3 text-white">Equipment replacement</span>
<span class="text font-p2 text-gray">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</span>
</div>
</div>
</div>
<div class="blks-grid">
<div class="col-2">
<div class="card-service">
<span class="large-text" style="color: #32B284;">95%</span>
<span class="title font-h3 text-white">Load Periodic maintenance</span>
<span class="text font-p2 text-gray">TReference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. 95%</span>
</div>
</div>
<div class="col-2">
<div class="card-service">
<span class="large-text" style="color: #32B284;">95%</span>
<span class="title font-h3 text-white">Load Factor</span>
<span class="text font-p2 text-gray">Reference site about Lorem Ipsum, giving information on its origins, as well as a random <a href=# class=text_link_amp> Lipsum generator.</a></span>
</div>
</div>
</div>
</secton>
</div>
</div>