About

Sample Page

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">The first purpose-built hardware wallet for Liquid.</h1>
    
        <p class="text">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">
   <h2 class="title">3 Columns Grid</h2>
   
      <p class="text">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">
        Issuance
    </div>
    <div class="text">
        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">
        Tracking
    </div>
    <div class="text">
        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">
        Control
    </div>
    <div class="text">
        Quickly issue standards-based digital assets for applications such as security tokens, stablecoins, and more.
    </div>
</div>
            </div>
        </div>


        
<div class="title-section">
   <h2 class="title">3 Columns Grid</h2>
   
      <p class="text">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">
        Card Title
    </div>
    
    
    <div class="bs-card_note">
        &nbsp;
    </div>
    
    
    <div class="bs-card_text">
        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">
        Card Title
    </div>
    
    
    <div class="bs-card_note">
        COMING SOON
    </div>
    
    
    <div class="bs-card_text">
        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">
        Card Title
    </div>
    
    
    <div class="bs-card_note">
        COMING SOON
    </div>
    
    
    <div class="bs-card_text">
        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">
   <h2 class="title">4 Columns Grid</h2>
   
      <p class="text">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">Liquid Network</p>
        <p class="text">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">Blockstream Finance</p>
        <p class="text">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">Blockstream Mining</p>
        <p class="text">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">Blockstream Energy</p>
        <p class="text">Instant energy demand from the Bitcoin network</p>
    </div>
</a>
    </div>
</div>
        </div>
        

        
<div class="title-section">
   <h2 class="title">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">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">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">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">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">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">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">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">
   <h2 class="title">Mixed Components</h2>
   
      <p class="text">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">Blockstream Energy</p>
        <p class="text">Instant energy demand from the Bitcoin network</p>
    </div>
</a>
            </div>
            <div class="col-3">
                



<div id="accordionId" class="accordion-container">
  
    <button class="accordionBtn">
      
      <span>Title 1</span>
    </button>
    <div class="accordion-content">
      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">
      
      <span>Title 2</span>
    </button>
    <div class="accordion-content">
      Accordion Content 2 property of the page object.
    </div>
  
    <button class="accordionBtn">
      
      <span>Title 3</span>
    </button>
    <div class="accordion-content">
      Accordion Content 3 Ad pariatur nostrud pariatur
    </div>
  
</div>
            </div>
        </div>

        <section class="blks-container section-margin">
            
<div class="title-section">
   <h2 class="title">Containers</h2>
   
      <p class="text">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">Lorem ipsum dolor sit consectetur adipiscing </h4>
       <ul>
           <li>Justo nec ultrices dui sapien eget mi felis bibendum ut tristique</li>
           <li>Justo nec ultrices dui sapien eget felis bibendum ut tristique</li>
           <li>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" >Card Title goes here</h3>
   <p class="text" >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" >Card Title goes here</h3>
   <p class="text" >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" >Card Title goes here</h3>
   <p class="text" >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">
        Card Title
    </div>
    
    
    <div class="bs-card_note">
        &nbsp;
    </div>
    
    
    <div class="bs-card_text">
        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">
        Card Title
    </div>
    
    
    <div class="bs-card_note">
        &nbsp;
    </div>
    
    
    <div class="bs-card_text">
        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">
        Card Title
    </div>
    
    
    <div class="bs-card_note">
        &nbsp;
    </div>
    
    
    <div class="bs-card_text">
        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">Load Periodic maintenance</span>
   <span class="text">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">Load Factor</span>
   <span class="text">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">Equipment replacement</span>
   <span class="text">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">Load Periodic maintenance</span>
   <span class="text">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">Load Factor</span>
   <span class="text">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>

Blueprint Design System

Sample Page

Live Demo