Accordion

/../hex/src/display/_accordion.scss

An accordion is a vertically stacked set of panels composed by a header and content. These panels are displayed based on user interactions. This component is useful to reduce the scroll of a page and hide the content below its header. This "extra information" (content) is not displayed until the user clicks on the header.

  • Good examples: list of elements that can be defined by a title. However, they have extra information that may be helpful if the user is interested (click).
  • Bad examples: list of elements that users must read. If we expect the user to open all elements, we musn't use an accordion.
Structure
  • .accordion: Main container of the accordion. It takes the 100% width of the container
  • .accordion__panel: Container for every element of the accordion. Headers + Content are placed inside panels
  • .accordion__header: Header of an element. Headers are always visible for users
  • .accordion__header__button: The button to toggle the accordion element
  • .accordion__content: Actual content of the element. Only the content of the active element is showed.
Accesibilty

Don't forget to associated the headers and the content using the id, aria-controls and aria-labelledby properties to the .accordion__header__button and the .accordion__content HTML elements. These properties must be present and correctly initialized to avoid accesibility issues.

<dl class="accordion type-color-reverse type-color-reverse-anchor-reset" role="presentation">
  <section class="accordion__panel accordion__panel-open">
    <!-- header -->
    <dt role="heading" aria-level="3" class="accordion__header">
      <!-- The first element is showed by default -->
      <button id="accordionSection1" aria-controls="section1" aria-expanded="true"
        class="accordion__header__button">
        <h2 class="accordion__header__title">Automation is a good thing to take in mind</h2>
      </button>
    </dt>
    <!-- content -->
    <dd id="section1" role="region" aria-labelledby="accordionSection1"
      class="accordion__content">
      <section>
        Continuous monitoring of component versions or CVE vulnerabilities and automated rebuild
      </section>
    </dd>
  </section>
  <section class="accordion__panel">
    <!-- header -->
    <dt role="heading" aria-level="3" class="accordion__header">
      <!-- The first element is showed by default -->
      <button id="accordionSection2" aria-controls="section2" aria-expanded="false"
        class="accordion__header__button">
        <h2 class="accordion__header__title">Multi-Format</h2>
      </button>
    </dt>
    <!-- content -->
    <dd id="section2" role="region" aria-labelledby="accordionSection2"
      class="accordion__content" aria-hidden="true">
      <section>
        Build and deploy multiple clouds and formats: VMs, containers, kubernetes, AWS...
      </section>
    </dd>
  </section>
  <section class="accordion__panel">
    <!-- header -->
    <dt role="heading" aria-level="3" class="accordion__header">
      <!-- The first element is showed by default -->
      <button id="accordionSection3" aria-controls="section3" aria-expanded="false"
        class="accordion__header__button">
        <h2 class="accordion__header__title">Consistency</h2>
      </button>
    </dt>
    <!-- content -->
    <dd id="section3" role="region" aria-labelledby="accordionSection3"
      class="accordion__content" aria-hidden="true">
      <section>
        Build and deploy multiple clouds and formats: VMs, containers, kubernetes, AWS...
      </section>
    </dd>
  </section>
  <section class="accordion__panel">
    <!-- header -->
    <dt role="heading" aria-level="3" class="accordion__header">
      <!-- The first element is showed by default -->
      <button id="accordionSection4" aria-controls="section4" aria-expanded="false"
        class="accordion__header__button">
        <h2 class="accordion__header__title">Optimization</h2>
      </button>
    </dt>
    <!-- content -->
    <dd id="section4" role="region" aria-labelledby="accordionSection4"
      class="accordion__content" aria-hidden="true">
      <section>
        Build and deploy multiple clouds and formats: VMs, containers, kubernetes, AWS...
      </section>
    </dd>
  </section>
</dl>
/../hex/src/display/_banner.scss
<div class="banner">
  <div class="container container-small text-c">
    <h1 class="margin-t-reset">CenturyLink Cloud</h1>
    <h5 class="subtitle">Free open-source apps and developer stacks</h5>
    <p class="margin-t-big">
      The Bitnami Launchpad for CenturyLink Cloud gives you fully configured applications and development stacks ready to run on your CenturyLink Cloud account in minutes.
    </p>
    <a class="button button-action">Visit CenturyLink site</a>
  </div>
</div>

Beehive

/../hex/src/display/_beehive.scss

The beehive section display the inner hexagons as a beehive. This structure is very common to display a list of contributors, companies, applications, etc. This component enhances the main shape of Bitnami (the hexagon), so it fits very well with any iconography.

  • Good examples: list of application logos or any iconography.
  • Bad examples: don't use this component with text.

Sometimes, the behive is not correctly built due to the number of elements. You always need to alternate odd with even number of elements to display them correctly. However, this structure may unbalance the design of the beehive. To solve this, this library provides you with to helper to add an offset to a line so it fits with the previous line:

  • beehive__line-offset-in
  • beehive__line-offset-out

NOTE: These helpers only apply to screen sizes greater than the .phone-land breakpoint. Check the responsive section.

Structure
  • .beehive: Main container
  • .beehive__line: A line of hexagons
  • .beehive__hexagon: An individual element of the beehive
Responsive

For small screens, this components hides most of the hexagons:

  • Tablets: 3 elements on the first line, 2 on the second, 3 on the third. All other lines are hidden
  • Mobile: 2 elements on the first line, 1 on the second. All other lines are hidden

Odd + even

Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo

Odd + Odd (offset in)

Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo

Even + Even (offset out)

Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo

Mixed

Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
Bitnami logo
<h2 class="text-c">Odd + even</h2>
<div class="beehive margin-t-big margin-b-enormous">
  <div class="container container-small">
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
  </div>
</div>

<h2 class="text-c">Odd + Odd (offset in)</h2>
<div class="beehive margin-t-big margin-b-enormous">
  <div class="container container-small">
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line beehive__line-offset-in">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
  </div>
</div>

<h2 class="text-c">Even + Even (offset out)</h2>
<div class="beehive margin-t-big margin-b-enormous">
  <div class="container container-small">
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line beehive__line-offset-out">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
  </div>
</div>

<h2 class="text-c">Mixed</h2>
<div class="beehive margin-t-big margin-b-enormous">
  <div class="container container-small">
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line beehive__line-offset-in">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line beehive__line-offset-out">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
    <div class="beehive__line">
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
      <div class="beehive__hexagon hexagon">
        <img src="/assets/images/logo-white.svg" alt="Bitnami logo"/>
      </div>
    </div>
  </div>
</div>

Background Skew

/../hex/src/display/_bgskew.scss

This section is used in full width sections where the content is placed only on the left.

  • Good examples: Newsletter subscription form
  • Bad examples: Any section that includes content on the right
Architecture
  • .bg-skew: main container of the component
  • .bg-skew__pattern bg-skew__pattern-dark: this container will add the dark cube pattern to the right background
  • .bg-skew__content: content of the section. It takes 50% of the available above the phone-land breakpoint

Interested?

Signup for the Bitnami Newsletter for news, events and more.

Subscribe

<section class="padding-v-bigger bg-skew type-color-reverse">
  <div class="bg-skew__pattern bg-skew__pattern-dark">
    <div class="container">
      <div class="bg-skew__content">
        <h2>Interested?</h2>
        <p>
          <a href="#">Signup</a> for the Bitnami Newsletter for news, events and more.
        </p>
        <form>
          <div>
            <label for="username">Username</label>
            <input name="username" id="username" placeholder="Your username" />
          </div>
          <div>
            <label for="password">Password</label>
            <input name="password" id="password" placeholder="A secure password" />
          </div>
          <p>
            <a class="button button-accent">Subscribe</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</section>

Card

/../hex/src/display/_card.scss

Cards highlights a block of content as a single entity. Material.io made them popular in mobile, and currently you can see them in a lot of different design systems. They usually condense information as an entrypoint for a extended information.

  • Good examples: title and date of an article or event. Other example could be applications name and actions.
  • Bad examples: do not use cards to show a full content element in a single page
Structure
  • .card: main container. By default it takes all the space and set a min-height of 18em.
  • .card-accent, .card-action, .card-light: change the color of the ribbon
  • .card__image: it's an optional part of the card. It's displayed above the content
  • .card__time: datetime or any other non-primary information
  • .card__title: title of the card. The height is currently limited to 3 lines. Remember this limitation when you add content for the card
  • .card__actions: actions for the card

A company delivers cloud-ready applications for a new cloud provider

Read more

A company delivers cloud-ready applications for a new cloud provider

Read more

Category

A company delivers cloud-ready applications for a new cloud provider

Read more

A company delivers cloud-ready applications for a new cloud provider

Read more

<div class="container">
  <div class="row collapse-2-b-desktop collapse-b-tablet">
    <div class="col-3">
      <div class="card shadow-1">
        <div class="card__image">
          <img src="https://via.placeholder.com/150x50" />
        </div>
        <time class="card__time" datetime="2017-09-12">September 12, 2017</time>
        <h3 class="card__title">
          A company delivers cloud-ready applications for a new cloud provider
        </h3>
        <p class="card__actions">
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
    <div class="col-3">
      <div class="card card-accent shadow-1">
        <time class="card__time" datetime="2017-09-12">September 12, 2017</time>
        <h3 class="card__title">
          A company delivers cloud-ready applications for a new cloud provider
        </h3>
        <p class="card__actions">
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
    <div class="col-3">
      <div class="card card-action shadow-1">
        <time class="card__time" datetime="2017-09-12">September 12, 2017</time>
        <p class="margin-reset">
          <b>Category</b>
        </p>
        <h3 class="card__title">
          A company delivers cloud-ready applications for a new cloud provider
        </h3>
        <p class="card__actions">
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
    <div class="col-3">
      <div class="card card-light shadow-1">
        <div class="card__image">
          <img src="https://via.placeholder.com/150x50" />
        </div>
        <time class="card__time" datetime="2017-09-12">September 12, 2017</time>
        <h3 class="card__title">
          A company delivers cloud-ready applications for a new cloud provider
        </h3>
        <p class="card__actions">
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
  </div>
</div>
/../hex/src/display/_carousel.scss

The purpose of the carousel is to add more information without adding visual workload to the current page. However, carousels have a very poor interaction ratio, so they're not good elements to place relevant information nor main call to actions of a page.

  • Good examples: list of quotes, image galleries.
  • Bad examples: list of features, top element on the page.
Structure
  • .carousel: Main container. It defines the content as a live element for accessibility
  • .carousel__touch: Touchable section. It allows users to drag and swipe the carousel
  • .carousel__slides: The slides container
  • .carousel__slides__slide: The different slides of the carousel
  • .carousel__controls: The controls containers. They're added automatically by the JS library
Accesibility
<div class="carousel" aria-live="polite">
  <div class="container container-small">
    <div class="carousel__touch">
      <ul class="carousel__slides">
        <li class="carousel__slides__slide">
          <blockquote class="outstanding margin-v-small" cite="https://twitter.com/ericabrescia/status/803775698297036801">
            Great day at my first Linux Foundation board meeting, but looking forward to seeing
            everyone at #awsreinvent. On my way!
            </br>
            See you there!
            <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
          </blockquote>
        </li>
        <li class="carousel__slides__slide carousel__slides__slide-top">
          <blockquote class="outstanding margin-v-small" cite="https://twitter.com/ericabrescia/status/950898931046662144">
            Join us at the Microsoft Reactor: Deploying Java apps with Microsoft's Azure Kubernetes Service and Cosmos DB
            <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
          </blockquote>
        </li>
        <li class="carousel__slides__slide">
          <blockquote class="outstanding margin-v-small" cite="https://twitter.com/ericabrescia/status/950898931046662144">
            Join us at the Microsoft Reactor: Deploying Java apps with Microsoft's Azure Kubernetes Service and Cosmos DB
            <a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
          </blockquote>
        </li>
      </ul>
    </div>
    <ul class="carousel__controls" aria-label="Carousel buttons">
      <!-- Will be added by the JS library -->
    </ul>
  </div>
</div>

Divider

/../hex/src/display/_divider.scss

Display 3 columns using a divider. We also can see the padding reset responsive helpers in action.

EVENT

Join us at Kubecon 2017

Join us at the Bitnami booth for a demo of any of our Kubernetes projects, to see simple ways to launch applications in your cluster

See All Events

BLOG

Exploring The Security Of Helm

Bitnami has been a part of the Helm community for a long while, but I personally started looking at Helm only a few weeks ago in the context of our work on ...

See All Articles

NEWS

Software vendors line up Kubernetes tasting menu for devops

With the advent of KubCon and CloudNativeCon in Austin, Texas, on Wednesday, assorted enterprise vendors have chosen ..

See All News

<div class="container">
  <div class="row collapse-b-tablet row-vdivide">
    <div class="col-4">
      <div class="padding-r-bigger padding-reset-b-desktop">
        <h4>EVENT</h4>
        <h3>Join us at Kubecon 2017</h3>
        <p>
          Join us at the Bitnami booth for a demo of any of our Kubernetes projects,
          to see simple ways to launch applications in your cluster
        </p>
        <p class="margin-b-reset">
          <a href="#">See All Events</a>
        </p>
      </div>
    </div>
    <div class="col-4">
      <div class="padding-h-bigger padding-reset-b-desktop">
        <h4>BLOG</h4>
        <h3>Exploring The Security Of Helm</h3>
        <p>
          Bitnami has been a part of the Helm community for a long while, but I
          personally started looking at Helm only a few weeks ago in the context
          of our work on ...
        </p>
        <p class="margin-b-reset">
          <a href="#">See All Articles</a>
        </p>
      </div>
    </div>
    <div class="col-4">
      <div class="padding-l-bigger padding-reset-b-desktop">
        <h4>NEWS</h4>
        <h3>Software vendors line up Kubernetes tasting menu for devops</h3>
        <p>
          With the advent of KubCon and CloudNativeCon in Austin, Texas, on Wednesday,
          assorted enterprise vendors have chosen ..
        </p>
        <p class="margin-b-reset">
          <a href="#">See All News</a>
        </p>
      </div>
    </div>
  </div>
</div>

Half Section

/../hex/src/display/_half-section.scss

Display related information that belongs to different topics. Each half should have its own background (image, color, gradient) to highlight this different.

  • Good examples: Information about two products of the same family. Two features of a product.
  • Bad examples: A title and paragraph in a section and a video / diagram on the other one.

If you want to cover the bad examples, you can use a flat background or a gradient with a two columns grid.

Architecture
  • .halfSection: Main container of the component
  • .halfSection__left and .halfSection__right: Containers that determines the position of the content
  • .halfSection__container: Container with the 50% of size

Any Application, Any Platform, Secure and Ready to Run

At the core of Bitnami is an application automation platform that builds software stacks from applications and their dependencies, packaging them for one-click deployment to all major platforms, local or cloud. Bitnami then maintains those stacks by continuously monitoring for updates and security vulnerabilities and providing new versions as necessary and available.

Any Application, Any Platform, Secure and Ready to Run

The Result: An application deployment platform that developers love and ops can trust

<section class="halfSection">
  <div class="halfSection__left bg-dark">
    <div class="halfSection__container">
      <div class="container padding-big">
        <h2>Any Application, Any Platform, Secure and Ready to Run</h2>
        <p>At the core of Bitnami is an application automation platform that builds software stacks
        from applications and their dependencies, packaging them for one-click deployment to all
        major platforms, local or cloud. Bitnami then maintains those stacks by continuously
        monitoring for updates and security vulnerabilities and providing new versions as necessary
        and available.</p>
      </div>
    </div>
  </div>
  <div class="halfSection__right gradient-brand">
    <div class="halfSection__container">
      <div class="container padding-big">
        <h2>Any Application, Any Platform, Secure and Ready to Run</h2>
        <p>The Result: An application deployment platform that developers love and ops can trust</p>
      </div>
    </div>
  </div>
</section>

Reasons

/../hex/src/display/_reasons.scss

The best of both worlds

The ease of Bitnami backed by the compute power of Google

Huge selection

Bitnami packages the most popular open source apps and development environments — 150+ and growing.

Up to date

Bitnami monitors all of the apps and components it packages and releases updates once they become available.

Fully configured

Bitnami cloud images are fully integrated and configured and ready-to-run. After clicking the "launch" button, you'll be up and running in minutes.

Free of charge

Bitnami cloud images are made available at no additional cost. In other words, you only pay for the Google Cloud Platform resources that you use to run the apps.

<div class="container container-small">
  <h1 class="text-c">The best of both worlds</h1>
  <h5 class="text-c subtitle">The ease of Bitnami backed by the compute power of Google</h5>
  <div class="row collapse-2-on-tablet">
    <div class="col-6">
      <h3>Huge selection</h3>
      <p>
        Bitnami packages the most popular open source apps and development environments — 150+ and growing.
      </p>
    </div>
    <div class="col-6">
      <h3>Up to date</h3>
      <p>
        Bitnami monitors all of the apps and components it packages and releases updates once they become available.
      </p>
    </div>
  </div>
  <div class="row collapse-2-on-tablet">
    <div class="col-6">
      <h3>Fully configured</h3>
      <p>
        Bitnami cloud images are fully integrated and configured and ready-to-run. After clicking the "launch" button, you'll be up and running in minutes.
      </p>
    </div>
    <div class="col-6">
      <h3>Free of charge</h3>
      <p>
        Bitnami cloud images are made available at no additional cost. In other words, you only pay for the Google Cloud Platform resources that you use to run the apps.
      </p>
    </div>
  </div>
</div>

Screenshots

/../hex/src/display/_screenshots.scss

1. Select your app

Ctl show

2. Customize your deployment

Ctl show

3. You're up and running

Ctl show
<div class="screenshots">
  <div class="screenshots__screenshot">
    <p class="text-c margin-t-normal">
      <b class="type-color-accent">1.</b> Select your app
    </p>
    <img src="//d33np9n32j53g7.cloudfront.net/assets/new/centurylink/ctl-show-4e35a87c5184b0b298cf190975fc1087.png" alt="Ctl show" />
  </div>
  <div class="screenshots__screenshot">
    <p class="text-c margin-t-normal">
      <b class="type-color-accent">2.</b> Customize your deployment
    </p>
    <img src="//d33np9n32j53g7.cloudfront.net/assets/new/centurylink/ctl-show-4e35a87c5184b0b298cf190975fc1087.png" alt="Ctl show" />
  </div>
  <div class="screenshots__screenshot">
    <p class="text-c margin-t-normal">
      <b class="type-color-accent">3.</b> You're up and running
    </p>
    <img src="//d33np9n32j53g7.cloudfront.net/assets/new/centurylink/ctl-show-4e35a87c5184b0b298cf190975fc1087.png" alt="Ctl show" />
  </div>
</div>

Steps

/../hex/src/display/_steps.scss

Display an ordered lists with a bigger numbers. Also, the numbers have a circle border

  1. Create a free Bitnami account or sign in to select an application or development stack
  2. Sign up or login to your CenturyLink account
  3. Launch images directly from Bitnami Launchpad for CenturyLink Cloud
<ol class="steps">
  <li>
    <span class="step">
      <a href="#">Create a free Bitnami account</a> or <a href="#">sign in</a> to select an application or development stack
    </span>
  </li>
  <li>
    <span class="step">
      <a href="#">Sign up</a> or <a href="#">login</a> to your CenturyLink account
    </span>
  </li>
  <li>
    <span class="step">
      Launch images directly from <a href="#">Bitnami Launchpad for CenturyLink Cloud</a>
    </span>
  </li>
</ol>

Tags or Pills

/../hex/src/display/_tags.scss

Small elements to display as pills or tags.

Tag Tag 2
<span class="tag">Tag</span>
<span class="tag tag-small">Tag 2</span>

Timeline

/../hex/src/display/_timeline.scss

Display a timeline with different events

Bitnami Founded

2003

Installers Released

2005

VM's Released

2007

Cloud Images Released

2008

Containers Released

2015

So much more to come!

Today

Bitnami Founded

2003

Installers Released

2005

VM's Released

2007

So much more to come!

Today

<div class="container">
  <div class="timeline clearfix margin-v-big">
    <div class="timeline__event">
      <h5 class="timeline__event__title">Bitnami Founded</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2003</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">Installers Released</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2005</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">VM's Released</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2007</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">Cloud Images Released</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2008</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">Containers Released</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2015</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">So much more to come!</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">Today</p>
    </div>
  </div>
  <!-- Second example -->
  <div class="timeline clearfix margin-v-big">
    <div class="timeline__event">
      <h5 class="timeline__event__title">Bitnami Founded</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2003</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">Installers Released</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2005</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">VM's Released</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">2007</p>
    </div>
    <div class="timeline__event">
      <h5 class="timeline__event__title">So much more to come!</h5>
      <div class="timeline__event__line"></div>
      <p class="timeline__event__date">Today</p>
    </div>
  </div>
</div>