PagerDuty elements for website.

This document shows all of our standard stlyle elements that are used in our custom theme. This theme is built on top of foundation, and customized to fit the specific needs of PagerDuty.

Color Palette

Base Color

Used for backgrounds, etc.

PD Colors

Primary Colors

PD Green

Secondary Colors

PD Dark Green
GZ Drk Gray
GZ Space Gray
GZ Med Gray
GZ Lt Gray
GZ xLt Gray

Foundation Default Colors

Primary
Secondary
Success
Warning
Alert

Try one of these buttons:

Check out the docs to see them all, along with details on making them your own.

Go to Foundation Docs

Typography

This is a h1. And with
a line break.

This is a h2. And with
a line break.

This is a h3. And with
a line break.

This is a h4. And with
a line break.

This is a h5. And with
a line break.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

 

This is a h6. And with
a line break.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.

The Grid

This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.

Six columns

Six columns

Six columns

Six columns

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Large-4 Med-3 Small-4 Columns. These divs are equal heights

Add the class collapse to the row to get rid of the gutters

class="row collapse"

Six columns

Callouts and Colors

Callouts use background opacity to reduce the strength of the color applied to the background

class="gz-green-color callout"
class="gz-blue callout"
class="gz-drk-gray callout"
class="gz-space-gray callout"
class="gz-med-gray callout"
class="gz-lt-gray callout"
class="gz-xlt-gray callout"
class="primary callout"
class="secondary callout"
class="success callout"
class="warning callout"
class="alert callout"

Code Snippets

To display a block of code, wrap the code in <pre> tags.
<pre class="prettyprint"></pre>
By adding the class 'prettyprint' to the tag, this will color the code syntax correctly

*NOTE to add HTML to a code block you need to do an extra step
<pre class="prettyprint"<xmp></xmp></pre>

Be careful when you are inserting your code snippets, because this will respect any tabs you have in your code, unlike HTML rendering that strips out tabs.

<pre class="prettyprint">
    /* Non HTML Code Here */
</pre>

<pre class="prettyprint">
  <xmp>
    /* HTML Code Here */
  </xmp>
</pre>

 

Output.
In this example the code was formatted with javascript syntax highlighting.
function updateSearchPlaceholderText(selectedTab) {
  var tabDisplayName = selectedTab.replace(/\b[a-z]/, function(letter) {
  return letter.toUpperCase();
});
$('#partners-search').attr("placeholder", "Search " + tabDisplayName + "s");
}
    

Font Awesome

Installed and maintained with bower. It is added in your /scss/app.scss file
@import 'font-awesome';
//Adding font awesome in html
    <i class='fa fa-rocket'></i>
    
Output


Adding font awesome directly in scss
//Adding font awesome in css
    pre.prettyprint:before {
      font-family: 'FontAwesome';
      content: "\f121";
    }
    

Forms

.com

Badges

1 2 3 A B B

Accordians

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.

Slide Switch

Slider