#

<div class="header">
  <div class="inner">
    <img src="/static/images/icons/icon-digital.svg" alt="Digital Icon">
    <div>
      <h1 style="color: #222;">Digital</h1>
      <p style="padding-left: 2rem; margin-bottom: 0; color: #222;">Develop your next digital strategy with secure identity solutions and access best-of-breed martech, digital advertising, and payment processing apps.</p>
    </div>
  </div>
</div>

<div class="row" style="margin-top: 2.5rem;">
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/tag-manager-logo.png" alt="Tag Manager Logo">
      <h3>Tag Manager</h3>
      <p class="content">Manage all your website's tags in one place</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/tag-manager/" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/search-console-logo.svg" alt="Search Console Logo">
      <h3>Search Console</h3>
      <p class="content">Make your site shine in Google Search results</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/search-console/" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/analytics-logo.jpg" alt="Analytics Logo">
      <h3>Analytics</h3>
      <p class="content">Analyze your website data with the world's leading analytics platform</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/analytics" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/ads-logo.jpg" alt="Ads Logo">
      <h3>Ads</h3>
      <p class="content">Get in front of customers when they’re searching for businesses like yours</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/ads" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/customerio-logo.png" alt="Customer.io Logo">
      <h3>Customer.io</h3>
      <p class="content">Send data-driven emails, SMS, and push notifications with total control</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/customer.io" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/swiftype-logo.svg" alt="Swiftype Logo">
      <h3>Swiftype</h3>
      <p class="content">Create custom search experiences to drive sales and conversions</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/swiftype" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/recaptcha-logo.png" alt="reCAPTCHA Logo">
      <h3>reCAPTCHA</h3>
      <p class="content">Security service developed by Google to protect websites from spam and abuse</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/digital/recaptcha" class="no-link">INSTALL</a></p>
    </div>
  </div>
</div>

<style>
  /* Cards */
  .card {
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .15);
    height: 100%;
    box-sizing: content-box;
    padding: 1.5rem;
  }
  .card h3 {
    margin-top: 2rem;
    font-size: 1.4rem;
  }
  .card a {
    margin-top: .7rem;
    padding: .5rem 2.5rem;
    font-size: .9rem;
    border-radius: 25px;
    background-color: #0488ce;
    color: #fff!important;
  }
  .card img {
    height: 80px;
  }
  .card.card-color {
    border-radius: 35px;
    background-color: #0488ce;
    color: #fff;
  }
  .card.card-color h3 {
    color: #fff;
  }
  .card.card-color a {
    border: 1.5px solid #fff;
    background-color: #fff;
    color: #0488ce!important;
  }
  .card.card-color a:hover {
    color: #0488ce!important;
  }
  .card p.content {
    height: 100px;
    font-size: .9rem;
  }
  /* Headers */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    background-color: #eef6ff;
  }
  .header .inner {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .header img {
    width: 80px;
  }
  .header h1 {
    margin-left: 0;
    font-size: 2rem;
    margin-bottom: 0.25rem;
  }
  .header p {
    padding-left: 2rem;
    margin-bottom: 0;
  }
</style>