{% extends "templates/one-column.html" %}

{% block title %}Content strips | ubuntu.com documentation{% endblock %}

{% block head_extra %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}
{% block content %}

<section class="p-strip--light is-shallow">
  <div class="row">
    <div class="col-8">
      <h1>Content strips</h1>
    </div>
  </div>
</section>

<section class="p-strip--suru-accent is-dark">
  <div class="row">
    <div class="col-3 p-card u-hide--small u-vertically-center">
      {{
        image(
          url="https://assets.ubuntu.com/v1/3e31f0f5-ITstrategen+logo.svg",
          alt="",
          height="52",
          width="229",
          hi_def=True,
          loading="lazy",
        ) | safe
      }}
    </div>
    <div class="col-8 col-start-large-5">
      <div class="p-heading-icon--small">
        <div class="p-heading-icon__header">
          {{
            image(
              url="https://assets.ubuntu.com/v1/fc781c43-Case+study+-+white.svg",
              alt="",
              height="32",
              width="32",
              hi_def=True,
              loading="lazy",
              attrs={"class": "p-heading-icon__img"},
            ) | safe
          }}
          <p class="p-heading-icon__title p-heading--4">Case study</p>
        </div>
        <h4>ITstrategen keeps their applications secure with ESM</h4>
        <p>The security of customer data is of utmost importance to ITstrategen. That's why Ubuntu is their server
          operating system of choice.</p>
        <p><a href="/engage/ITstrategen-case-study" class="p-button">Read the case study</a></p>
      </div>
    </div>
  </div>
</section>

<section class="p-strip--suru">
  <div class="u-fixed-width">
    <h3>Webinars and case studies</h3>
    <div class="row p-divider u-no-padding--left u-no-padding--right is-dark">
      <div class="col-4 p-divider__block">
        <div class="p-heading-icon--muted">
          <div class="p-heading-icon__header">
            {{
              image(
              url="https://assets.ubuntu.com/v1/30037eac-datasheet-white.svg",
              alt="",
              width="32",
              height="28",
              hi_def=True,
              loading="lazy",
              attrs={"class": "p-heading-icon__img p-heading-icon__img--small"},
              ) | safe
            }}
            <h4 class="p-heading-icon__title">Datasheet</h4>
          </div>
          <h3 class="p-heading--4"><a class="p-link--inverted" href="https://assets.ubuntu.com/v1/8db65a1e-Kubernetes-for-the-Enterprise.pdf">Kubernetes for the enterprise</a></h3>
        </div>
      </div>
      <div class="col-4 p-divider__block">
        <div class="p-heading-icon--muted">
          <div class="p-heading-icon__header">
            {{
              image(
              url="https://assets.ubuntu.com/v1/005c3416-webinar-white.svg",
              alt="",
              width="32",
              height="28",
              hi_def=True,
              loading="lazy",
              attrs={"class": "p-heading-icon__img p-heading-icon__img--small"},
              ) | safe
            }}
            <h4 class="p-heading-icon__title">Webinar</h4>
          </div>
          <h3 class="p-heading--4"><a class="p-link--inverted" href="/blog/kubernetes-for-the-enterprise-1-2-3-go" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'External Link', 'eventAction' : 'Managed cloud', 'eventLabel' : 'Kubernetes for the Enterprise: 1, 2, 3, Go!', 'eventValue' : undefined });">Kubernetes for the Enterprise: 1, 2, 3, Go!</a></h3>
        </div>
      </div>
      <div class="col-4 p-divider__block">
        <div class="p-heading-icon--muted">
          <div class="p-heading-icon__header">
            {{
              image(
              url="https://assets.ubuntu.com/v1/574aaef4-whitepaper-white.svg",
              alt="",
              width="32",
              height="28",
              hi_def=True,
              loading="lazy",
              attrs={"class": "p-heading-icon__img p-heading-icon__img--small"},
              ) | safe
            }}
            <h4 class="p-heading-icon__title">Whitepaper</h4>
          </div>
          <h3 class="p-heading--4"><a class="p-link--inverted" href="https://pages.ubuntu.com/container-whitepaper.html" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'External Link', 'eventAction' : 'Managed cloud', 'eventLabel' : 'The no-nonsense way to accelerate your business with containers', 'eventValue' : undefined });">The no-nonsense way to accelerate your business with containers</a></h3>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="p-strip--suru is-dark">
  <div class="u-fixed-width">
    <blockquote class="p-pull-quote">
      <p class="p-pull-quote__quote">A new wave of workloads demand breakthrough efficiencies in density, energy, and operational costs which can be scaled to a customer's IT environment</p>
      <cite class="p-pull-quote__citation">Paul Santeler, VP &amp; GM, Hyperscale Business Unit, HP</cite>
    </blockquote>
  </div>
</div>
{% endblock content %}