Styleguide

Banner Component

Style for Banner Component

<div class="banner-container">
  <div class="container">
  <h1 class="banner-container_heading"> GoCD supports Pipeline as Code </h1>
  <div class="banner-container_content">
  <div class="banner-container_img">
    <img src="http://via.placeholder.com/600x400" alt="banner-img" />
  </div>

  <div class="banner-container_desc">
    <p>
      With GoCD’s pipelines as code functionality, get full flexibility and control into every aspect of your pipeline configuration without the need for administrator access. It’s easier to upgrade your configuration as often as needed.
    </p>
    <p>
      With pipelines as code, your changes are easier to audit, share, revert, and also to set up new servers.
    </p>
    <a href="#" class="button-brand banner-container_btn">Try Now </a>
  </div>
  </div>
  </div>  
</div>

Button

Style for Button Component

<a href="#" class="button-brand"> Click Me </a>

card Component

Style for Card Component

card-img

Native Kubernetes Integration

GoCD gives you the flexibility to effectively represent CD pipelines that model your organization’s processes. Kubernetes gives you a highly programmable delivery infrastructure platform. Together they provide the premiere continuous delivery tool on modern infrastructure.

card-img

Elastic Agents

Elastic Agents, also known as on-demand agents, are the worker bees of GoCD. Scale them up and shut them down as needed, giving you both flexibility and cost savings. We provide elastic agents for Docker, K8s, AWs and other popular cloud providers.

<div class="container cards-container">
    <div class="card">
      <img src="http://via.placeholder.com/200" class="card_img" alt="card-img" />
      <h2 class="card_heading"> Native Kubernetes Integration </h2>

      <p class="card_desc">
        GoCD gives you the flexibility to effectively represent CD pipelines that model your organization’s processes.
        Kubernetes gives you a highly programmable delivery infrastructure platform. Together they provide the premiere
        continuous delivery tool on modern infrastructure.
      </p>
    </div>

    <div class="card">
      <img src="http://via.placeholder.com/200" class="card_img" alt="card-img"/>
      <h2 class="card_heading"> Elastic Agents </h2>

      <p class="card_desc">
        Elastic Agents, also known as on-demand agents, are the worker bees of GoCD. Scale them up and shut them down
        as needed, giving you both flexibility and cost savings. We provide elastic agents for Docker, K8s, AWs and
        other popular cloud providers.
      </p>
    </div>
  </div>

Typography

Style of Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph Text style

<h1> Heading 1 </h1>
  <h2> Heading 2 </h2>
  <h3> Heading 3 </h3>
  <h4> Heading 4 </h4>
  <h5> Heading 5 </h5>
  <h6> Heading 6 </h6>
  <p> Paragraph Text style </p>