Themes

Internal Products

The Design System includes a variety of unique color themes. Each color theme is provided as its own CSS file. Design System themes affect contextual primary, secondary, tertiary, success, info, warning, and danger coloring of all child components.

Dan McKenna, Myles O'Connor

theme-blue.css

theme-darkblue.css

theme-darkgreen.css

theme-gold.css

theme-grayblue.css

theme-graygold.css

theme-grayred.css

theme-green.css

theme-orange.css

theme-orangegreen.css

theme-purple.css

theme-red.css

theme-vi.css

<link rel="stylesheet" href="https://assets.ggops.com/stable/theme-blue.css">
<link rel="stylesheet" href="https://assets.ggops.com/stable/theme-blue.css">

Color Palette

JavaScript

All colors used in the Design System are provided below, for use in JavaScript.

Myles O'Connor

import { blue } from './colorPalette'; // Or any of the other available themes listed below
import { blue } from './colorPalette'; // Or any of the other available themes listed below

Blue Theme

Colors for the Blue theme.

Myles O'Connor

const colorPalette = {
    "blue": {
        "primary": "#00a7cf",
        "secondary": "#ffb819",
        "tertiary": "#00c4b4",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "blue": { "primary": "#00a7cf", "secondary": "#ffb819", "tertiary": "#00c4b4", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Dark Blue Theme

Colors for the Dark Blue theme.

Myles O'Connor

const colorPalette = {
    "darkblue": {
        "primary": "#0085a5",
        "secondary": "#ffb819",
        "tertiary": "#555387",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "darkblue": { "primary": "#0085a5", "secondary": "#ffb819", "tertiary": "#555387", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Dark Green Theme

Colors for the Dark Green theme.

Myles O'Connor

const colorPalette = {
    "darkgreen": {
        "primary": "#3fae2a",
        "secondary": "#ffb819",
        "tertiary": "#00a7cf",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "darkgreen": { "primary": "#3fae2a", "secondary": "#ffb819", "tertiary": "#00a7cf", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Gold Theme

Colors for the Gold theme.

Myles O'Connor

const colorPalette = {
    "gold": {
        "primary": "#e5a516",
        "secondary": "#00a7cf",
        "tertiary": "#ff5a34",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "gold": { "primary": "#e5a516", "secondary": "#00a7cf", "tertiary": "#ff5a34", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Gray Blue Theme

Colors for the Gray Blue theme.

Myles O'Connor

const colorPalette = {
    "grayblue": {
        "primary": "#0085a5",
        "secondary": "#5f5f5f",
        "tertiary": "#00a7cf",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "grayblue": { "primary": "#0085a5", "secondary": "#5f5f5f", "tertiary": "#00a7cf", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Gray Gold Theme

Colors for the Gray Gold theme.

Myles O'Connor

const colorPalette = {
    "graygold": {
        "primary": "#e5a516",
        "secondary": "#5f5f5f",
        "tertiary": "#ffb819",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "graygold": { "primary": "#e5a516", "secondary": "#5f5f5f", "tertiary": "#ffb819", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Gray Red Theme

Colors for the Gray Red theme.

Myles O'Connor

const colorPalette = {
    "grayred": {
        "primary": "#e5512e",
        "secondary": "#5f5f5f",
        "tertiary": "#ff5a34",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "grayred": { "primary": "#e5512e", "secondary": "#5f5f5f", "tertiary": "#ff5a34", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Green Theme

Colors for the Green theme.

Myles O'Connor

const colorPalette = {
    "green": {
        "primary": "#00c4b4",
        "secondary": "#ff5a34",
        "tertiary": "#00a7cf",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "green": { "primary": "#00c4b4", "secondary": "#ff5a34", "tertiary": "#00a7cf", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

GumGum Social Theme

Colors for the GumGum Social theme.

Myles O'Connor

const colorPalette = {
    "vi": {
        "primary": "#00c4b4",
        "secondary": "#ff5a34",
        "tertiary": "#00a7cf",
        "success": "#3fae2a",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#e5512e",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "vi": { "primary": "#00c4b4", "secondary": "#ff5a34", "tertiary": "#00a7cf", "success": "#3fae2a", "info": "#555387", "warning": "#ffb819", "danger": "#e5512e", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Orange Green Theme

Colors for the Orange Green theme.

Myles O'Connor

const colorPalette = {
    "orangegreen": {
        "primary": "#3fae2a",
        "secondary": "#ff6c0c",
        "tertiary": "#555387",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "orangegreen": { "primary": "#3fae2a", "secondary": "#ff6c0c", "tertiary": "#555387", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Orange Theme

Colors for the Orange theme.

Myles O'Connor

const colorPalette = {
    "orange": {
        "primary": "#ff6c0c",
        "secondary": "#555387",
        "tertiary": "#ffb819",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "orange": { "primary": "#ff6c0c", "secondary": "#555387", "tertiary": "#ffb819", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Purple Theme

Colors for the Purple theme.

Myles O'Connor

const colorPalette = {
    "purple": {
        "primary": "#555387",
        "secondary": "#00a7cf",
        "tertiary": "#ff5a34",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "purple": { "primary": "#555387", "secondary": "#00a7cf", "tertiary": "#ff5a34", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Red Theme

Colors for the Red theme.

Myles O'Connor

const colorPalette = {
    "red": {
        "primary": "#e5512e",
        "secondary": "#3fae2a",
        "tertiary": "#0085a5",
        "success": "#00c4b4",
        "info": "#555387",
        "warning": "#ffb819",
        "danger": "#ff5a34",
        "blue": "#00a7cf",
        "gold": "#ffb819",
        "green": "#00c4b4",
        "orange": "#ff6c0c",
        "purple": "#555387",
        "red": "#ff5a34",
        "darkBlue": "#0085a5",
        "darkGold": "#e5a516",
        "darkGreen": "#3fae2a",
        "darkRed": "#e5512e"
    }
};

export colorPalette;
const colorPalette = { "red": { "primary": "#e5512e", "secondary": "#3fae2a", "tertiary": "#0085a5", "success": "#00c4b4", "info": "#555387", "warning": "#ffb819", "danger": "#ff5a34", "blue": "#00a7cf", "gold": "#ffb819", "green": "#00c4b4", "orange": "#ff6c0c", "purple": "#555387", "red": "#ff5a34", "darkBlue": "#0085a5", "darkGold": "#e5a516", "darkGreen": "#3fae2a", "darkRed": "#e5512e" } }; export colorPalette;

Scss Variables

All colors used in the Design System are provided below, for use as Scss variables.

Myles O'Connor

$blueColor: #00a7cf;
$goldColor: #ffb819;
$greenColor: #00c4b4;
$orangeColor: #ff6c0c;
$purpleColor: #555387;
$redColor: #ff5a34;
$darkBlueColor: #0085a5;
$darkGoldColor: #e5a516;
$darkGreenColor: #3fae2a;
$darkRedColor: #e5512e;
$blueDark1Color: mix(black, #00a7cf, 5%);
$blueDark2Color: mix(black, #00a7cf, 10%);
$blueDark3Color: mix(black, #00a7cf, 15%);
$blueDark4Color: mix(black, #00a7cf, 30%);
$blueLight1Color: mix(white, #00a7cf, 5%);
$blueLight2Color: mix(white, #00a7cf, 10%);
$blueLight3Color: mix(white, #00a7cf, 15%);
$blueLight4Color: mix(white, #00a7cf, 30%);
$goldDark1Color: mix(black, #ffb819, 5%);
$goldDark2Color: mix(black, #ffb819, 10%);
$goldDark3Color: mix(black, #ffb819, 15%);
$goldDark4Color: mix(black, #ffb819, 30%);
$goldLight1Color: mix(white, #ffb819, 5%);
$goldLight2Color: mix(white, #ffb819, 10%);
$goldLight3Color: mix(white, #ffb819, 15%);
$goldLight4Color: mix(white, #ffb819, 30%);
$greenDark1Color: mix(black, #00c4b4, 5%);
$greenDark2Color: mix(black, #00c4b4, 10%);
$greenDark3Color: mix(black, #00c4b4, 15%);
$greenDark4Color: mix(black, #00c4b4, 30%);
$greenLight1Color: mix(white, #00c4b4, 5%);
$greenLight2Color: mix(white, #00c4b4, 10%);
$greenLight3Color: mix(white, #00c4b4, 15%);
$greenLight4Color: mix(white, #00c4b4, 30%);
$orangeDark1Color: mix(black, #ff6c0c, 5%);
$orangeDark2Color: mix(black, #ff6c0c, 10%);
$orangeDark3Color: mix(black, #ff6c0c, 15%);
$orangeDark4Color: mix(black, #ff6c0c, 30%);
$orangeLight1Color: mix(white, #ff6c0c, 5%);
$orangeLight2Color: mix(white, #ff6c0c, 10%);
$orangeLight3Color: mix(white, #ff6c0c, 15%);
$orangeLight4Color: mix(white, #ff6c0c, 30%);
$purpleDark1Color: mix(black, #555387, 5%);
$purpleDark2Color: mix(black, #555387, 10%);
$purpleDark3Color: mix(black, #555387, 15%);
$purpleDark4Color: mix(black, #555387, 30%);
$purpleLight1Color: mix(white, #555387, 5%);
$purpleLight2Color: mix(white, #555387, 10%);
$purpleLight3Color: mix(white, #555387, 15%);
$purpleLight4Color: mix(white, #555387, 30%);
$redDark1Color: mix(black, #ff5a34, 5%);
$redDark2Color: mix(black, #ff5a34, 10%);
$redDark3Color: mix(black, #ff5a34, 15%);
$redDark4Color: mix(black, #ff5a34, 30%);
$redLight1Color: mix(white, #ff5a34, 5%);
$redLight2Color: mix(white, #ff5a34, 10%);
$redLight3Color: mix(white, #ff5a34, 15%);
$redLight4Color: mix(white, #ff5a34, 30%);
$darkBlueDark1Color: mix(black, #0085a5, 5%);
$darkBlueDark2Color: mix(black, #0085a5, 10%);
$darkBlueDark3Color: mix(black, #0085a5, 15%);
$darkBlueDark4Color: mix(black, #0085a5, 30%);
$darkBlueLight1Color: mix(white, #0085a5, 5%);
$darkBlueLight2Color: mix(white, #0085a5, 10%);
$darkBlueLight3Color: mix(white, #0085a5, 15%);
$darkBlueLight4Color: mix(white, #0085a5, 30%);
$darkGoldDark1Color: mix(black, #e5a516, 5%);
$darkGoldDark2Color: mix(black, #e5a516, 10%);
$darkGoldDark3Color: mix(black, #e5a516, 15%);
$darkGoldDark4Color: mix(black, #e5a516, 30%);
$darkGoldLight1Color: mix(white, #e5a516, 5%);
$darkGoldLight2Color: mix(white, #e5a516, 10%);
$darkGoldLight3Color: mix(white, #e5a516, 15%);
$darkGoldLight4Color: mix(white, #e5a516, 30%);
$darkGreenDark1Color: mix(black, #3fae2a, 5%);
$darkGreenDark2Color: mix(black, #3fae2a, 10%);
$darkGreenDark3Color: mix(black, #3fae2a, 15%);
$darkGreenDark4Color: mix(black, #3fae2a, 30%);
$darkGreenLight1Color: mix(white, #3fae2a, 5%);
$darkGreenLight2Color: mix(white, #3fae2a, 10%);
$darkGreenLight3Color: mix(white, #3fae2a, 15%);
$darkGreenLight4Color: mix(white, #3fae2a, 30%);
$darkRedDark1Color: mix(black, #e5512e, 5%);
$darkRedDark2Color: mix(black, #e5512e, 10%);
$darkRedDark3Color: mix(black, #e5512e, 15%);
$darkRedDark4Color: mix(black, #e5512e, 30%);
$darkRedLight1Color: mix(white, #e5512e, 5%);
$darkRedLight2Color: mix(white, #e5512e, 10%);
$darkRedLight3Color: mix(white, #e5512e, 15%);
$darkRedLight4Color: mix(white, #e5512e, 30%);
$blueColor: #00a7cf; $goldColor: #ffb819; $greenColor: #00c4b4; $orangeColor: #ff6c0c; $purpleColor: #555387; $redColor: #ff5a34; $darkBlueColor: #0085a5; $darkGoldColor: #e5a516; $darkGreenColor: #3fae2a; $darkRedColor: #e5512e; $blueDark1Color: mix(black, #00a7cf, 5%); $blueDark2Color: mix(black, #00a7cf, 10%); $blueDark3Color: mix(black, #00a7cf, 15%); $blueDark4Color: mix(black, #00a7cf, 30%); $blueLight1Color: mix(white, #00a7cf, 5%); $blueLight2Color: mix(white, #00a7cf, 10%); $blueLight3Color: mix(white, #00a7cf, 15%); $blueLight4Color: mix(white, #00a7cf, 30%); $goldDark1Color: mix(black, #ffb819, 5%); $goldDark2Color: mix(black, #ffb819, 10%); $goldDark3Color: mix(black, #ffb819, 15%); $goldDark4Color: mix(black, #ffb819, 30%); $goldLight1Color: mix(white, #ffb819, 5%); $goldLight2Color: mix(white, #ffb819, 10%); $goldLight3Color: mix(white, #ffb819, 15%); $goldLight4Color: mix(white, #ffb819, 30%); $greenDark1Color: mix(black, #00c4b4, 5%); $greenDark2Color: mix(black, #00c4b4, 10%); $greenDark3Color: mix(black, #00c4b4, 15%); $greenDark4Color: mix(black, #00c4b4, 30%); $greenLight1Color: mix(white, #00c4b4, 5%); $greenLight2Color: mix(white, #00c4b4, 10%); $greenLight3Color: mix(white, #00c4b4, 15%); $greenLight4Color: mix(white, #00c4b4, 30%); $orangeDark1Color: mix(black, #ff6c0c, 5%); $orangeDark2Color: mix(black, #ff6c0c, 10%); $orangeDark3Color: mix(black, #ff6c0c, 15%); $orangeDark4Color: mix(black, #ff6c0c, 30%); $orangeLight1Color: mix(white, #ff6c0c, 5%); $orangeLight2Color: mix(white, #ff6c0c, 10%); $orangeLight3Color: mix(white, #ff6c0c, 15%); $orangeLight4Color: mix(white, #ff6c0c, 30%); $purpleDark1Color: mix(black, #555387, 5%); $purpleDark2Color: mix(black, #555387, 10%); $purpleDark3Color: mix(black, #555387, 15%); $purpleDark4Color: mix(black, #555387, 30%); $purpleLight1Color: mix(white, #555387, 5%); $purpleLight2Color: mix(white, #555387, 10%); $purpleLight3Color: mix(white, #555387, 15%); $purpleLight4Color: mix(white, #555387, 30%); $redDark1Color: mix(black, #ff5a34, 5%); $redDark2Color: mix(black, #ff5a34, 10%); $redDark3Color: mix(black, #ff5a34, 15%); $redDark4Color: mix(black, #ff5a34, 30%); $redLight1Color: mix(white, #ff5a34, 5%); $redLight2Color: mix(white, #ff5a34, 10%); $redLight3Color: mix(white, #ff5a34, 15%); $redLight4Color: mix(white, #ff5a34, 30%); $darkBlueDark1Color: mix(black, #0085a5, 5%); $darkBlueDark2Color: mix(black, #0085a5, 10%); $darkBlueDark3Color: mix(black, #0085a5, 15%); $darkBlueDark4Color: mix(black, #0085a5, 30%); $darkBlueLight1Color: mix(white, #0085a5, 5%); $darkBlueLight2Color: mix(white, #0085a5, 10%); $darkBlueLight3Color: mix(white, #0085a5, 15%); $darkBlueLight4Color: mix(white, #0085a5, 30%); $darkGoldDark1Color: mix(black, #e5a516, 5%); $darkGoldDark2Color: mix(black, #e5a516, 10%); $darkGoldDark3Color: mix(black, #e5a516, 15%); $darkGoldDark4Color: mix(black, #e5a516, 30%); $darkGoldLight1Color: mix(white, #e5a516, 5%); $darkGoldLight2Color: mix(white, #e5a516, 10%); $darkGoldLight3Color: mix(white, #e5a516, 15%); $darkGoldLight4Color: mix(white, #e5a516, 30%); $darkGreenDark1Color: mix(black, #3fae2a, 5%); $darkGreenDark2Color: mix(black, #3fae2a, 10%); $darkGreenDark3Color: mix(black, #3fae2a, 15%); $darkGreenDark4Color: mix(black, #3fae2a, 30%); $darkGreenLight1Color: mix(white, #3fae2a, 5%); $darkGreenLight2Color: mix(white, #3fae2a, 10%); $darkGreenLight3Color: mix(white, #3fae2a, 15%); $darkGreenLight4Color: mix(white, #3fae2a, 30%); $darkRedDark1Color: mix(black, #e5512e, 5%); $darkRedDark2Color: mix(black, #e5512e, 10%); $darkRedDark3Color: mix(black, #e5512e, 15%); $darkRedDark4Color: mix(black, #e5512e, 30%); $darkRedLight1Color: mix(white, #e5512e, 5%); $darkRedLight2Color: mix(white, #e5512e, 10%); $darkRedLight3Color: mix(white, #e5512e, 15%); $darkRedLight4Color: mix(white, #e5512e, 30%);

Subatomic

CSS Grid

The CSS grid component, prefixed with gds-grid, is used to assemble CSS grid-based layouts.

Dan McKenna, Myles O'Connor

Some content

Some content

Some content

Some content

Some content

gds-grid

gds-grid__container--fluid-1

gds-grid__container--fluid-2

gds-grid__container--fluid-3

gds-grid__container--fluid-4

gds-grid__container--fluid-5

gds-grid__container--fluid-6

gds-grid__container--fluid-7

gds-grid__container--fluid-8

gds-grid__container--fluid-9

gds-grid__container--fluid-10

gds-grid__container--fluid-11

gds-grid__container--fluid-12

gds-grid__container--fluid-13

gds-grid__container--fluid-14

gds-grid__container--fluid-15

gds-grid__container--fluid-16

gds-grid__container--fluid-xs-*

gds-grid__container--fluid-sm-*

gds-grid__container--fluid-md-*

gds-grid__container--fluid-lg-*

gds-grid__container--fluid-xl-*

gds-grid__container--pct-1

gds-grid__container--pct-2

gds-grid__container--pct-3

gds-grid__container--pct-4

gds-grid__container--pct-5

gds-grid__container--pct-6

gds-grid__container--pct-7

gds-grid__container--pct-8

gds-grid__container--pct-9

gds-grid__container--pct-10

gds-grid__container--pct-11

gds-grid__container--pct-12

gds-grid__container--pct-13

gds-grid__container--pct-14

gds-grid__container--pct-15

gds-grid__container--pct-16

gds-grid__container--pct-xs-*

gds-grid__container--pct-sm-*

gds-grid__container--pct-md-*

gds-grid__container--pct-lg-*

gds-grid__container--pct-xl-*

gds-grid__container--no-gap

gds-grid__item--col-span-*

gds-grid__item--col-span-xs-*

gds-grid__item--col-span-sm-*

gds-grid__item--col-span-md-*

gds-grid__item--col-span-lg-*

gds-grid__item--col-span-xl-*

gds-grid__item--row-span-*

gds-grid__item--row-span-*

gds-grid__item--row-span-xs-*

gds-grid__item--row-span-sm-*

gds-grid__item--row-span-md-*

gds-grid__item--row-span-lg-*

gds-grid__item--row-span-xl-*

<div class="gds-grid__container--3">
    <div class="gds-card -m-a-0">
        <p class="gds-card__block">Some content</p>
    </div>
    <div class="gds-card -m-a-0">
        <p class="gds-card__block">Some content</p>
    </div>
    <div class="gds-card -m-a-0">
        <p class="gds-card__block">Some content</p>
    </div>
    <div class="gds-card -m-a-0">
        <p class="gds-card__block">Some content</p>
    </div>
    <div class="gds-card -m-a-0">
        <p class="gds-card__block">Some content</p>
    </div>
</div>
<div class="gds-grid__container--3"> <div class="gds-card -m-a-0"> <p class="gds-card__block">Some content</p> </div> <div class="gds-card -m-a-0"> <p class="gds-card__block">Some content</p> </div> <div class="gds-card -m-a-0"> <p class="gds-card__block">Some content</p> </div> <div class="gds-card -m-a-0"> <p class="gds-card__block">Some content</p> </div> <div class="gds-card -m-a-0"> <p class="gds-card__block">Some content</p> </div> </div>

Flex

The flex component, prefixed by gds-flex is used to create extremely flexible 1-dimensional layouts. Flexbox components can be either rows or columns and modifiers used on this component control how children are spread, aligned, and sized across the primary and perpendicular axes. All modifiers come in universal and breakpoint specific variants. Flexbox is an extremely powerful tool and as such, the component has a high degree of granularity to its modifiers.

It is strongly encouraged that you refer to the prototypes page for this component to better understand the ways in which these modifiers interact with one another.

Dan McKenna

gds-flex

gds-flex--direction-row

gds-flex--direction-row-*

gds-flex--direction-rowrev

gds-flex--direction-rowrev-*

gds-flex--direction-col

gds-flex--direction-col-*

gds-flex--direction-colrev

gds-flex--direction-colrev-*

gds-flex--wrap

gds-flex--wrap-*

gds-flex--wrap-no

gds-flex--wrap-no-*

gds-flex--wrap-rev

gds-flex--wrap-rev-*

gds-flex--justify-start

gds-flex--justify-start-*

gds-flex--justify-end

gds-flex--justify-end-*

gds-flex--justify-center

gds-flex--justify-center-*

gds-flex--justify-between

gds-flex--justify-between-*

gds-flex--justify-around

gds-flex--justify-around-*

gds-flex--align-start

gds-flex--align-start-*

gds-flex--align-end

gds-flex--align-end-*

gds-flex--align-center

gds-flex--align-center-*

gds-flex--align-baseline

gds-flex--align-baseline-*

gds-flex--align-stretch

gds-flex--align-stretch-*

gds-flex--content-start

gds-flex--content-start-*

gds-flex--content-end

gds-flex--content-end-*

gds-flex--content-center

gds-flex--content-center-*

gds-flex--content-between

gds-flex--content-between-*

gds-flex--content-around

gds-flex--content-around-*

gds-flex--content-stretch

gds-flex--content-stretch-*

<div class="gds-flex">
    <div class="gds-flex__item">Flex Item</div>
    <div class="gds-flex__item">Flex Item</div>
    <div class="gds-flex__item">Flex Item</div>
    <div class="gds-flex__item">Flex Item</div>
</div>
<div class="gds-flex"> <div class="gds-flex__item">Flex Item</div> <div class="gds-flex__item">Flex Item</div> <div class="gds-flex__item">Flex Item</div> <div class="gds-flex__item">Flex Item</div> </div>

Flex Item

The flex item is a direct child of a gds-flex block. By default, flex items are based on a common spacing amount normalized across all siblings based on the amount of content. Modifiers for flex items control the amount individual children should grow, shrink, order, and align. Basis modifiers are used to set the minimum size that an item should be. All modifiers come in universal and breakpoint specific variants.

As with the flex component, it is strongly encouraged that you refer to the prototypes page for this component to help understand the ways in which these modifiers interact with one another.

Dan McKenna

gds-flex__item--align-auto

gds-flex__item--align-auto-*

gds-flex__item--align-start

gds-flex__item--align-start-*

gds-flex__item--align-end

gds-flex__item--align-end-*

gds-flex__item--align-center

gds-flex__item--align-center-*

gds-flex__item--align-baseline

gds-flex__item--align-baseline-*

gds-flex__item--align-stretch

gds-flex__item--align-stretch-*

gds-flex__item--grow-0

gds-flex__item--grow-1

gds-flex__item--grow-2

gds-flex__item--grow-3

gds-flex__item--grow-4

gds-flex__item--grow-5

gds-flex__item--grow-6

gds-flex__item--grow-7

gds-flex__item--grow-8

gds-flex__item--grow-9

gds-flex__item--grow-10

gds-flex__item--grow-11

gds-flex__item--grow-12

gds-flex__item--grow-*-1

gds-flex__item--grow-*-2

gds-flex__item--grow-*-3

gds-flex__item--grow-*-4

gds-flex__item--grow-*-5

gds-flex__item--grow-*-6

gds-flex__item--grow-*-7

gds-flex__item--grow-*-8

gds-flex__item--grow-*-9

gds-flex__item--grow-*-10

gds-flex__item--grow-*-11

gds-flex__item--grow-*-12

gds-flex__item--shrink-1

gds-flex__item--shrink-2

gds-flex__item--shrink-3

gds-flex__item--shrink-4

gds-flex__item--shrink-5

gds-flex__item--shrink-6

gds-flex__item--shrink-7

gds-flex__item--shrink-8

gds-flex__item--shrink-9

gds-flex__item--shrink-10

gds-flex__item--shrink-11

gds-flex__item--shrink-12

gds-flex__item--shrink-*-1

gds-flex__item--shrink-*-2

gds-flex__item--shrink-*-3

gds-flex__item--shrink-*-4

gds-flex__item--shrink-*-5

gds-flex__item--shrink-*-6

gds-flex__item--shrink-*-7

gds-flex__item--shrink-*-8

gds-flex__item--shrink-*-9

gds-flex__item--shrink-*-10

gds-flex__item--shrink-*-11

gds-flex__item--shrink-*-12

gds-flex__item--order-1

gds-flex__item--order-2

gds-flex__item--order-3

gds-flex__item--order-4

gds-flex__item--order-5

gds-flex__item--order-6

gds-flex__item--order-7

gds-flex__item--order-8

gds-flex__item--order-9

gds-flex__item--order-10

gds-flex__item--order-11

gds-flex__item--order-12

gds-flex__item--order-*-1

gds-flex__item--order-*-2

gds-flex__item--order-*-3

gds-flex__item--order-*-4

gds-flex__item--order-*-5

gds-flex__item--order-*-6

gds-flex__item--order-*-7

gds-flex__item--order-*-8

gds-flex__item--order-*-9

gds-flex__item--order-*-10

gds-flex__item--order-*-11

gds-flex__item--order-*-12

gds-flex__item--basis-pct-5

gds-flex__item--basis-pct-10

gds-flex__item--basis-pct-20

gds-flex__item--basis-pct-30

gds-flex__item--basis-pct-40

gds-flex__item--basis-pct-50

gds-flex__item--basis-pct-60

gds-flex__item--basis-pct-70

gds-flex__item--basis-pct-80

gds-flex__item--basis-pct-90

gds-flex__item--basis-pct-100

gds-flex__item--basis-pct-*-5

gds-flex__item--basis-pct-*-10

gds-flex__item--basis-pct-*-20

gds-flex__item--basis-pct-*-30

gds-flex__item--basis-pct-*-40

gds-flex__item--basis-pct-*-50

gds-flex__item--basis-pct-*-60

gds-flex__item--basis-pct-*-70

gds-flex__item--basis-pct-*-80

gds-flex__item--basis-pct-*-90

gds-flex__item--basis-pct-*-100

gds-flex__item--basis-fix-50

gds-flex__item--basis-fix-100

gds-flex__item--basis-fix-200

gds-flex__item--basis-fix-300

gds-flex__item--basis-fix-400

gds-flex__item--basis-fix-500

gds-flex__item--basis-fix-600

gds-flex__item--basis-fix-700

gds-flex__item--basis-fix-800

gds-flex__item--basis-fix-900

gds-flex__item--basis-fix-1000

gds-flex__item--basis-fix-*-50

gds-flex__item--basis-fix-*-100

gds-flex__item--basis-fix-*-200

gds-flex__item--basis-fix-*-300

gds-flex__item--basis-fix-*-400

gds-flex__item--basis-fix-*-500

gds-flex__item--basis-fix-*-600

gds-flex__item--basis-fix-*-700

gds-flex__item--basis-fix-*-800

gds-flex__item--basis-fix-*-900

gds-flex__item--basis-fix-*-1000

<div class="gds-flex">
    <div class="gds-flex__item">Flex Item</div>
    <div class="gds-flex__item">Flex Item</div>
    <div class="gds-flex__item">Flex Item</div>
    <div class="gds-flex__item">Flex Item</div>
</div>
<div class="gds-flex"> <div class="gds-flex__item">Flex Item</div> <div class="gds-flex__item">Flex Item</div> <div class="gds-flex__item">Flex Item</div> <div class="gds-flex__item">Flex Item</div> </div>

Flex Grid

The Flexbox Grid component, prefixed by gds-flex-grid, allows you to create a flexible grid of items that remain the same height as their siblings.

The item classes indicate how many items should flow across in each row before wrapping. 1-6 items are supported at desktop width, 1-3 columns are supported at tablet width, and 1-2 columns are supported at mobile width. To make the contents of an item take up the full item height, use gds-flex-grid__item--full-height.

Myles O'Connor

Content

Content

Content

Content

Content

gds-flex-grid

gds-flex-grid__container

gds-flex-grid__row

gds-flex-grid__item

gds-flex-grid__item--half-gutter

gds-flex-grid__item--no-gutter

gds-flex-grid__item--full-height

gds-flex-grid__item--desktop-6

gds-flex-grid__item--desktop-5

gds-flex-grid__item--desktop-4

gds-flex-grid__item--desktop-3

gds-flex-grid__item--desktop-2

gds-flex-grid__item--desktop-1

gds-flex-grid__item--tablet-3

gds-flex-grid__item--tablet-2

gds-flex-grid__item--tablet-1

gds-flex-grid__item--mobile-2

gds-flex-grid__item--mobile-1

<div class="gds-flex-grid__container">
    <div class="gds-flex-grid__row">
        <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-1 gds-flex-grid__item--mobile-1 -m-b-3">
            <div class="gds-flex-grid__row">
                <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1 -m-b-3">
                    <div class="gds-card gds-flex-grid__item--full-height">
                        <div class="gds-card__block -p-a-3">
                            <p>Content</p>
                        </div>
                    </div>
                </div>
                <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1 -m-b-3">
                    <div class="gds-card gds-flex-grid__item--full-height">
                        <div class="gds-card__block -p-a-3">
                            <p>Content</p>
                        </div>
                    </div>
                </div>
                <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1 -m-b-3-xs">
                    <div class="gds-card gds-flex-grid__item--full-height">
                        <div class="gds-card__block -p-a-3">
                            <p>Content</p>
                        </div>
                    </div>
                </div>
                <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1">
                    <div class="gds-card gds-flex-grid__item--full-height">
                        <div class="gds-card__block -p-a-3">
                            <p>Content</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-1 gds-flex-grid__item--mobile-1 -m-b-3">
            <div class="gds-card gds-flex-grid__item--full-height">
                <div class="gds-card__block -p-a-3">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="gds-flex-grid__container"> <div class="gds-flex-grid__row"> <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-1 gds-flex-grid__item--mobile-1 -m-b-3"> <div class="gds-flex-grid__row"> <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1 -m-b-3"> <div class="gds-card gds-flex-grid__item--full-height"> <div class="gds-card__block -p-a-3"> <p>Content</p> </div> </div> </div> <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1 -m-b-3"> <div class="gds-card gds-flex-grid__item--full-height"> <div class="gds-card__block -p-a-3"> <p>Content</p> </div> </div> </div> <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1 -m-b-3-xs"> <div class="gds-card gds-flex-grid__item--full-height"> <div class="gds-card__block -p-a-3"> <p>Content</p> </div> </div> </div> <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-2 gds-flex-grid__item--mobile-1"> <div class="gds-card gds-flex-grid__item--full-height"> <div class="gds-card__block -p-a-3"> <p>Content</p> </div> </div> </div> </div> </div> <div class="gds-flex-grid__item gds-flex-grid__item--desktop-2 gds-flex-grid__item--tablet-1 gds-flex-grid__item--mobile-1 -m-b-3"> <div class="gds-card gds-flex-grid__item--full-height"> <div class="gds-card__block -p-a-3"> <p>Content</p> </div> </div> </div> </div> </div>

HTML5 Boilerplate

To create a layout with the Design System, begin with the following page template:

Myles O'Connor

<!doctype html>
<html lang="en" data-gds-slide-nav-html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        <title>GumGum Design System</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="https://assets.ggops.com/stable/theme-blue.css">
    </head>
    <body class="-has-page-header -has-slide-nav" data-gds-slide-nav>
        <!-- gds-slide-nav component goes here -->
        <!-- gds-page-header component goes here -->
        <div class="gds-slide-content">
            <!-- Page content goes here -->
        </div>
        <script src="https://assets.ggops.com/stable/app.js"></script>
    </body>
</html>
<!doctype html> <html lang="en" data-gds-slide-nav-html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <title>GumGum Design System</title> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="https://assets.ggops.com/stable/theme-blue.css"> </head> <body class="-has-page-header -has-slide-nav" data-gds-slide-nav> <!-- gds-slide-nav component goes here --> <!-- gds-page-header component goes here --> <div class="gds-slide-content"> <!-- Page content goes here --> </div> <script src="https://assets.ggops.com/stable/app.js"></script> </body> </html>

Layout

The layout component, prefixed with gds-layout, is used for centering containers and for responsive grid columns. The grid system works exactly like Twitter Bootstrap's, with columns automatically stacking at mobile widths. All page content except for the gds-page-header and gds-slide-nav components should be placed inside the gds-layout__container.

By default, the gds-layout__container has a max-width of 1200px. For a 100% width container, add gds-layout__container--full-width to gds-layout__container.

Myles O'Connor

Left column

Center column

Right column

gds-layout

gds-layout__container--full-width

<div class="gds-layout__container">
    <div class="gds-layout__row">
        <div class="gds-layout__column--md-4">
            <p>Left column</p>
        </div>
        <div class="gds-layout__column--md-4">
            <p>Center column</p>
        </div>
        <div class="gds-layout__column--md-4">
            <p>Right column</p>
        </div>
    </div>
</div>
<div class="gds-layout__container"> <div class="gds-layout__row"> <div class="gds-layout__column--md-4"> <p>Left column</p> </div> <div class="gds-layout__column--md-4"> <p>Center column</p> </div> <div class="gds-layout__column--md-4"> <p>Right column</p> </div> </div> </div>

Columns

Responsive columns are constructed using the format gds-layout__column--{breakpoint}-{width}. Breakpoint can bexs,sm,md,lg orxl. Width can be1,2,3,4,5,6,7,8,9,10,11 or12.

The Design System uses a standard 12-column grid, so at a given breakpoint, columns ending in-3 will be 25% wide (3 of the 12 columns), columns ending in-6 will be 50% wide (6 of the 12 columns), columns ending in-9 will be 75% wide (9 of the 12 columns), and so on.

Myles O'Connor

gds-layout__column--xs-*

gds-layout__column--sm-*

gds-layout__column--md-*

gds-layout__column--lg-*

gds-layout__column--xl-*

gds-layout__column--xs-offset-*

gds-layout__column--sm-offset-*

gds-layout__column--md-offset-*

gds-layout__column--lg-offset-*

gds-layout__column--xl-offset-*

gds-layout__column--xs-push-*

gds-layout__column--sm-push-*

gds-layout__column--md-push-*

gds-layout__column--lg-push-*

gds-layout__column--xl-push-*

gds-layout__column--xs-pull-*

gds-layout__column--sm-pull-*

gds-layout__column--md-pull-*

gds-layout__column--lg-pull-*

gds-layout__column--xl-pull-*

gds-layout__hidden-xs-up

gds-layout__hidden-xs-down

gds-layout__hidden-sm-up

gds-layout__hidden-sm-down

gds-layout__hidden-md-up

gds-layout__hidden-md-down

gds-layout__hidden-lg-up

gds-layout__hidden-lg-down

gds-layout__hidden-xl-up

gds-layout__hidden-xl-down

<div class="gds-layout__container">
    <div class="gds-layout__row">
        <div class="gds-layout__column--sm-6 gds-layout__column--md-4">
            <p>Left column</p>
        </div>
        <div class="gds-layout__column--sm-6 gds-layout__column--md-8">
            <p>Right column</p>
        </div>
    </div>
</div>
<div class="gds-layout__container"> <div class="gds-layout__row"> <div class="gds-layout__column--sm-6 gds-layout__column--md-4"> <p>Left column</p> </div> <div class="gds-layout__column--sm-6 gds-layout__column--md-8"> <p>Right column</p> </div> </div> </div>

Rows

Rows of columns should be placed inside a gds-layout__row.

Myles O'Connor

<div class="gds-layout__container">
    <div class="gds-layout__row">
        <div class="gds-layout__column--md-6">
            <p>Left column</p>
        </div>
        <div class="gds-layout__column--md-6">
            <p>Right column</p>
        </div>
    </div>
</div>
<div class="gds-layout__container"> <div class="gds-layout__row"> <div class="gds-layout__column--md-6"> <p>Left column</p> </div> <div class="gds-layout__column--md-6"> <p>Right column</p> </div> </div> </div>

Atoms

Badge

The badge component, prefixed by gds-badge, is a numerical indicator of associated items.

Myles O'Connor

Default badge2

Inverse badge2

Warning badge2

Danger badge2

gds-badge

gds-badge--inverse

gds-badge--success

gds-badge--success-inverse

gds-badge--info

gds-badge--info-inverse

gds-badge--warning

gds-badge--warning-inverse

gds-badge--danger

gds-badge--danger-inverse

<p>Default badge<span class="gds-badge">2</span></p>
<p>Inverse badge<span class="gds-badge gds-badge--inverse">2</span></p>
<p>Warning badge<span class="gds-badge gds-badge--warning">2</span></p>
<p>Danger badge<span class="gds-badge gds-badge--danger">2</span></p>
<p>Default badge<span class="gds-badge">2</span></p> <p>Inverse badge<span class="gds-badge gds-badge--inverse">2</span></p> <p>Warning badge<span class="gds-badge gds-badge--warning">2</span></p> <p>Danger badge<span class="gds-badge gds-badge--danger">2</span></p>

Empty Badge

For a simple colored circle without a number inside, use an empty badge.

Myles O'Connor

Empty default badge

Empty info badge

Empty warning badge

Empty danger badge

gds-badge--inverse

gds-badge--success

gds-badge--success-inverse

gds-badge--info

gds-badge--info-inverse

gds-badge--warning

gds-badge--warning-inverse

gds-badge--danger

gds-badge--danger-inverse

<p>Empty default badge<span class="gds-badge gds-badge--empty"></span></p>
<p>Empty info badge<span class="gds-badge gds-badge--info gds-badge--empty"></span></p>
<p>Empty warning badge<span class="gds-badge gds-badge--warning gds-badge--empty"></span></p>
<p>Empty danger badge<span class="gds-badge gds-badge--danger gds-badge--empty"></span></p>
<p>Empty default badge<span class="gds-badge gds-badge--empty"></span></p> <p>Empty info badge<span class="gds-badge gds-badge--info gds-badge--empty"></span></p> <p>Empty warning badge<span class="gds-badge gds-badge--warning gds-badge--empty"></span></p> <p>Empty danger badge<span class="gds-badge gds-badge--danger gds-badge--empty"></span></p>

Button

The button component, prefixed by gds-button, is used to style <button> tags. Note that all optional classes may be used in combination with each other, for example on a single element with gds-button--success, gds-button--lg, & gds-button--block classes. To indicate that a button is disabled, use the disabled="disabled" HTML attribute.

To make a button appear at block level at a specific breakpoint and below, use the breakpoint-specific block modifiers.

Dan McKenna, Myles O'Connor

gds-button

gds-button--default

gds-button--lg

gds-button--sm

gds-button--xs

gds-button--primary

gds-button--secondary

gds-button--white

gds-button--tertiary

gds-button--success

gds-button--warning

gds-button--info

gds-button--danger

gds-button--link

gds-button--toggle

gds-button--active

gds-button--block

gds-button--block-xs

gds-button--block-sm

gds-button--block-md

gds-button--block-lg

gds-button--block-xl

gds-button--dark

gds-button--dark-primary

gds-button--dark-secondary

gds-button--dark-tertiary

gds-button--dark-success

gds-button--dark-danger

gds-button--dark-info

gds-button--dark-warning

gds-button--dark-toggle

<button class="gds-button gds-button--default">Default button</button>
<button class="gds-button gds-button--default">Default button</button>

Circular Button

The circular button component, prefixed by gds-circular-button, is used to style <button> tags. Note that all optional classes may be used in combination with each other, for example on a single element with gds-circular-button--success, gds-circular-button--lg, & gds-circular-button--block classes. To indicate that a button is disabled, use the disabled="disabled" HTML attribute.

To make a button appear at block level at a specific breakpoint and below, use the breakpoint-specific block modifiers.

Mike Watt

gds-circular-button

gds-circular-button--xs

gds-circular-button--sm

gds-circular-button--lg

gds-circular-button--xl

gds-circular-button--secondary

gds-circular-button--success

gds-circular-button--warning

gds-circular-button--info

gds-circular-button--danger

gds-circular-button--dark

gds-circular-button--white

gds-circular-button--toggle

gds-circular-button--active

gds-circular-button--dark

gds-circular-button--dark-primary

gds-circular-button--dark-secondary

gds-circular-button--dark-tertiary

gds-circular-button--dark-success

gds-circular-button--dark-info

gds-circular-button--dark-warning

gds-circular-button--dark-danger

gds-circular-button--dark-toggle

gds-circular-button__image

gds-circular-button--inactive

<button class="gds-circular-button gds-circular-button--primary"><i class="fa fa-fw fa-trash-o"></i></button>
<button class="gds-circular-button gds-circular-button--primary"><i class="fa fa-fw fa-trash-o"></i></button>

Circular Thumbnail

The circular thumbnail component, prefixed by gds-circular-thumbnail, is used to display images within a circular frame.

Dan McKenna, Myles O'Connor

Ken Weiner

gds-circular-thumbnail

gds-circular-thumbnail--xs

gds-circular-thumbnail--sm

gds-circular-thumbnail--lg

gds-circular-thumbnail--xl

gds-circular-thumbnail--secondary

gds-circular-thumbnail--success

gds-circular-thumbnail--warning

gds-circular-thumbnail--info

gds-circular-thumbnail--danger

gds-circular-thumbnail--dark

gds-circular-thumbnail--white

gds-circular-thumbnail--tertiary

<img class="gds-circular-thumbnail" src="https://assets.ggops.com/images/ken.png" alt="Ken Weiner" />
<img class="gds-circular-thumbnail" src="https://assets.ggops.com/images/ken.png" alt="Ken Weiner" />

Container

The container component, prefixed by gds-container, is used to organize groups of similar information.

Dan McKenna

Paragraph in default container

gds-container

gds-container--sm

gds-container--lg

gds-container--gray

gds-container--primary

gds-container--success

gds-container--warning

gds-container--danger

<div class="gds-container">
    <p>Paragraph in default container</p>
</div>
<div class="gds-container"> <p>Paragraph in default container</p> </div>

Divider

The standard divider component is used to separate distinct segments of content. It is prefixed by gds-divider

Dan McKenna

Standard Divider

gds-divider

gds-divider--collapsible

gds-divider--reversed

gds-divider--centered

<div class="gds-divider" data-gds-divider="0">
    <span class="gds-divider__label">Standard Divider</span>
    <span class="gds-divider__line"></span>
</div>
<div class="gds-divider" data-gds-divider="0"> <span class="gds-divider__label">Standard Divider</span> <span class="gds-divider__line"></span> </div>

Centered

The centered divider component is used to divide content into collapsible segments and is prefixed by gds-divider gds-divider--centered and, optionally, gds-divider--collapsible.

Dan McKenna

Centered Divider

gds-divider--collapsible

gds-divider--reversed

gds-divider__arrow--collapse

<div class="gds-divider gds-divider--centered gds-divider--collapsible" data-gds-divider="0">
    <span class="gds-divider__line"></span>
    <span class="gds-divider__label">Centered Divider</span>
    <span class="gds-divider__line"></span>
    <span class="gds-divider__arrow" data-gds-arrow></span>
</div>
<div class="gds-divider gds-divider--centered gds-divider--collapsible" data-gds-divider="0"> <span class="gds-divider__line"></span> <span class="gds-divider__label">Centered Divider</span> <span class="gds-divider__line"></span> <span class="gds-divider__arrow" data-gds-arrow></span> </div>

Collapsible

The collapsible divider component is used to divide content into collapsible segments and is prefixed by gds-divider gds-divider--collapsible. Collapsible dividers should be used in conjunction with the gds-segment component. Use the attribute data-gds-divider="x" where X is a unique ID that corresponds with a data-gds-segment ID.

Dan McKenna

Standard Divider

gds-divider--reversed

gds-divider--centered

gds-divider__arrow--collapse

<div class="gds-divider gds-divider--collapsible" data-gds-divider="0">
    <span class="gds-divider__label">Standard Divider</span>
    <span class="gds-divider__line"></span>
    <span class="gds-divider__arrow" data-gds-arrow></span>
</div>
<div class="gds-divider gds-divider--collapsible" data-gds-divider="0"> <span class="gds-divider__label">Standard Divider</span> <span class="gds-divider__line"></span> <span class="gds-divider__arrow" data-gds-arrow></span> </div>

Hotkey

The hotkey component, prefixed by gds-hotkey, is used to indicate keyboard-based hotkey commands in a standardized format

Dan McKenna

A

gds-hotkey

gds-hotkey--sm

gds-hotkey--xs

gds-hotkey--lg

gds-hotkey--xl

gds-hotkey--block

gds-hotkey--dark

gds-hotkey--light

gds-hotkey--primary

gds-hotkey--secondary

gds-hotkey--tertiary

gds-hotkey--success

gds-hotkey--warning

gds-hotkey--danger

gds-hotkey--info

gds-hotkey--outline

gds-hotkey--outline-secondary

gds-hotkey--outline-success

gds-hotkey--outline-danger

gds-hotkey--white

gds-hotkey--blue

gds-hotkey--dkblue

gds-hotkey--gold

gds-hotkey--red

gds-hotkey--green

gds-hotkey--orange

gds-hotkey--dkgreen

gds-hotkey--purple

gds-hotkey--primary-dark

gds-hotkey--secondary-dark

gds-hotkey--tertiary-dark

gds-hotkey--secondary-dark

gds-hotkey--warning-dark

gds-hotkey--danger-dark

gds-hotkey--info-dark

<span class="gds-hotkey">A</span>
<span class="gds-hotkey">A</span>

Image

The image component, prefixed by gds-image, is used to style <img> tags. Note: <img> tags should always include an alt="" attribute with a brief description of the image's content.

To include a label element after the gds-image, use the gds-image__label class.

Myles O'Connor

Girl with Coca-Cola logo placeholder

gds-image--border

<img class="gds-image" src="https://c.gumgum.com/ads/com/gumgum/mantii/internal_mobile_inscreen_test/full_canvas/01/mantii_fullscreen.hyperesources/girl@2x.png" alt="Girl with Coca-Cola logo placeholder" />
<img class="gds-image" src="https://c.gumgum.com/ads/com/gumgum/mantii/internal_mobile_inscreen_test/full_canvas/01/mantii_fullscreen.hyperesources/girl@2x.png" alt="Girl with Coca-Cola logo placeholder" />

Link

The link component, prefixed by gds-text--link, is used to style text links.

Myles O'Connor

gds-text--link-secondary

<a class="gds-text--link" href="#">Default text link</a>
<a class="gds-text--link-secondary" href="#">Secondary color text link</a>

Loading

The loading component, prefixed by gds-loading, is used to indicate asynchronous loading of content. To show the indicator on a transparent overlay, add the gds-loading--bg class to the parent element containing gds-loading.

For a white variation, add the gds-loading__dot--white modifier class to gds-loading__dot.

Myles O'Connor

gds-loading__dot--white

<div class="gds-loading">
    <div class="gds-loading__dot"></div>
</div>
<div class="gds-loading"> <div class="gds-loading__dot"></div> </div>

Large

For a larger variation of gds-loading, add the gds-loading__dot--lg class to gds-loading__dot.

Myles O'Connor

<div class="gds-loading">
    <div class="gds-loading__dot gds-loading__dot--lg"></div>
</div>
<div class="gds-loading"> <div class="gds-loading__dot gds-loading__dot--lg"></div> </div>

Small

For a smaller variation of gds-loading, add the gds-loading__dot--sm class to gds-loading__dot.

Myles O'Connor

<div class="gds-loading">
    <div class="gds-loading__dot gds-loading__dot--sm"></div>
</div>
<div class="gds-loading"> <div class="gds-loading__dot gds-loading__dot--sm"></div> </div>

Number-Circle

The number-circle component, prefixed by gds-number-circle, is used to indicate numeric rankings for associated content.

Myles O'Connor

1

gds-number-circle

gds-number-circle--xs

gds-number-circle--sm

gds-number-circle--lg

gds-number-circle--xl

gds-number-circle--secondary

gds-number-circle--success

gds-number-circle--warning

gds-number-circle--info

gds-number-circle--danger

gds-number-circle--white

<span class="gds-number-circle">1</span>
<span class="gds-number-circle">1</span>

Progress Bar

The progress bar component, prefixed by gds-progress-bar, is a single element component. It accepts a data-value attribute with an integer value between 0 and 100, which is used to style the component and indicate elapsed progress of an event.

Myles O'Connor

gds-progress-bar

gds-progress-bar--lg

gds-progress-bar--sm

gds-progress-bar--xs

gds-progress-bar--striped-primary

gds-progress-bar--secondary

gds-progress-bar--striped-secondary

gds-progress-bar--animated

gds-progress-bar--value-colors

<div class="gds-progress-bar -m-b-2" data-value="35"></div>
<div class="gds-progress-bar -m-b-2 gds-progress-bar--sm" data-value="42"></div>
<div class="gds-progress-bar -m-b-2 gds-progress-bar--lg" data-value="53"></div>
<div class="gds-progress-bar gds-progress-bar--striped-primary gds-progress-bar--animated" data-value="55"></div>
<div class="gds-progress-bar -m-b-2" data-value="35"></div> <div class="gds-progress-bar -m-b-2 gds-progress-bar--sm" data-value="42"></div> <div class="gds-progress-bar -m-b-2 gds-progress-bar--lg" data-value="53"></div> <div class="gds-progress-bar gds-progress-bar--striped-primary gds-progress-bar--animated" data-value="55"></div>

Segment

The segment component is used to wrap content in an optionally collapsible container. It's prefixed by gds-segment and the content you want contained by it is inserted inside. Use the attribute data-gds-segment="x" where X is a unique ID that corresponds with a data-gds-divider ID.

Dan McKenna

gds-segment--collapse

<div class="gds-segment" data-gds-segment="1">Content Goes Here</div>
<div class="gds-segment" data-gds-segment="1">Content Goes Here</div>

Skeleton

The skeleton component, prefixed by gds-skeleton, is a placeholder for loading content.

Myles O'Connor

gds-skeleton

gds-skeleton--header

<div class="gds-skeleton gds-skeleton--header" style="width: 30%"></div>
<div class="gds-skeleton" style="width: 90%"></div>
<div class="gds-skeleton" style="width: 70%"></div>
<div class="gds-skeleton" style="width: 80%"></div>
<div class="gds-skeleton gds-skeleton--header" style="width: 30%"></div> <div class="gds-skeleton" style="width: 90%"></div> <div class="gds-skeleton" style="width: 70%"></div> <div class="gds-skeleton" style="width: 80%"></div>

Snackbar

The snackbar component, prefixed by gds-snackbar, is used to quickly display user feedback, warnings and errors.

To hide a notification, add gds-snackbar__notification--hidden to it.

Myles O'Connor

gds-snackbar

gds-snackbar__notification--success

gds-snackbar__notification--info

gds-snackbar__notification--warning

gds-snackbar__notification--danger

gds-snackbar__notification--hidden

gds-snackbar__notification-button--dark

gds-snackbar__notification-button--success

gds-snackbar__notification-button--info

gds-snackbar__notification-button--warning

gds-snackbar__notification-button--danger

<ul class="gds-snackbar">
    <li class="gds-snackbar__notification">
        <p class="gds-snackbar__notification-text">Some text goes here.</p>
        <button class="gds-snackbar__notification-button"></button>
    </li>
    <li class="gds-snackbar__notification">
        <p class="gds-snackbar__notification-text">Some text goes here.</p>
        <button class="gds-snackbar__notification-button"></button>
    </li>
</ul>
<ul class="gds-snackbar"> <li class="gds-snackbar__notification"> <p class="gds-snackbar__notification-text">Some text goes here.</p> <button class="gds-snackbar__notification-button"></button> </li> <li class="gds-snackbar__notification"> <p class="gds-snackbar__notification-text">Some text goes here.</p> <button class="gds-snackbar__notification-button"></button> </li> </ul>

Tag

The tag component, prefixed by gds-tag, is used to indicate selected items or options.

To include a close button inside the gds-tag, use a gds-tag__button. For a smaller tag, use the --sm modifiers

Myles O'Connor

This is a tag
Gillette
Primary Tag
Success Tag
Warning Tag
Danger Tag
Small Tag
Small Primary Tag

gds-tag

gds-tag--sm

gds-tag--primary

gds-tag--success

gds-tag--warning

gds-tag--danger

gds-tag--blue

gds-tag--gold

gds-tag--green

gds-tag--orange

gds-tag--purple

gds-tag--red

gds-tag--darkblue

gds-tag--darkgreen

gds-tag--darkred

gds-tag--dark

gds-tag--primary-dark

gds-tag--secondary-dark

gds-tag--success-dark

gds-tag--warning-dark

gds-tag--danger-dark

gds-tag--blue-dark

gds-tag--gold-dark

gds-tag--green-dark

gds-tag--orange-dark

gds-tag--purple-dark

gds-tag--red-dark

gds-tag--darkblue-dark

gds-tag--darkgold-dark

gds-tag--darkgreen-dark

gds-tag--darkred-dark

gds-tag__button--blue

gds-tag__button--blue-dark

gds-tag__button--gold-dark

gds-tag__button--green-dark

gds-tag__button--orange-dark

gds-tag__button--purple-dark

gds-tag__button--red-dark

gds-tag__button--darkblue-dark

gds-tag__button--darkgold-dark

gds-tag__button--darkgreen-dark

gds-tag__button--darkred-dark

gds-tag__option--primary

gds-tag__option--primary-dark

gds-tag__option--secondary

gds-tag__option--secondary-dark

gds-tag__option--success

gds-tag__option--success-dark

gds-tag__option--warning

gds-tag__option--warning-dark

gds-tag__option--danger

gds-tag__option--danger-dark

gds-tag__option--blue

gds-tag__option--blue-dark

gds-tag__option--gold

gds-tag__option--gold-dark

gds-tag__option--green

gds-tag__option--green-dark

gds-tag__option--orange

gds-tag__option--orange-dark

gds-tag__option--purple

gds-tag__option--purple-dark

gds-tag__option--red

gds-tag__option--red-dark

gds-tag__option--darkblue

gds-tag__option--darkblue-dark

gds-tag__option--darkgold

gds-tag__option--darkgold-dark

gds-tag__option--darkgreen

gds-tag__option--darkgreen-dark

gds-tag__option--darkred

gds-tag__option--darkred-dark

<div class="gds-tag">This is a tag</div>
<div class="gds-tag gds-tag--with-button">Gillette<button class="gds-tag__button"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--primary">Primary Tag<button class="gds-tag__button gds-tag__button--primary"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--success">Success Tag<button class="gds-tag__button gds-tag__button--success"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--warning">Warning Tag<button class="gds-tag__button gds-tag__button--warning"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--danger">Danger Tag<button class="gds-tag__button gds-tag__button--danger"></button></div>
<div class="gds-tag gds-tag--with-button-sm gds-tag--sm">
    Small Tag<button class="gds-tag__button gds-tag__button--sm"></button>
</div>
<div class="gds-tag gds-tag--primary gds-tag--with-button-sm gds-tag--sm">
    Small Primary Tag<button class="gds-tag__button gds-tag__button--primary gds-tag__button--sm"></button>
</div>
<div class="gds-tag">This is a tag</div> <div class="gds-tag gds-tag--with-button">Gillette<button class="gds-tag__button"></button></div> <div class="gds-tag gds-tag--with-button gds-tag--primary">Primary Tag<button class="gds-tag__button gds-tag__button--primary"></button></div> <div class="gds-tag gds-tag--with-button gds-tag--success">Success Tag<button class="gds-tag__button gds-tag__button--success"></button></div> <div class="gds-tag gds-tag--with-button gds-tag--warning">Warning Tag<button class="gds-tag__button gds-tag__button--warning"></button></div> <div class="gds-tag gds-tag--with-button gds-tag--danger">Danger Tag<button class="gds-tag__button gds-tag__button--danger"></button></div> <div class="gds-tag gds-tag--with-button-sm gds-tag--sm"> Small Tag<button class="gds-tag__button gds-tag__button--sm"></button> </div> <div class="gds-tag gds-tag--primary gds-tag--with-button-sm gds-tag--sm"> Small Primary Tag<button class="gds-tag__button gds-tag__button--primary gds-tag__button--sm"></button> </div>

Text

The text component, prefixed with gds-text, is used for displaying text. In the Design System, all headings (h1-h6) are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility. The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.

Dan McKenna, Myles O'Connor

XX-large header

X-large header

Large header

Medium header

Small header

X-small header

Medium body text, this is the default

Small body text

X-small body text

It's gonna esplode. Mario Lazaro

Hero (extra bold) text

Bold text

Regular (slightly heavier) text

Italic text

Primary text

Secondary text

Success text

Info text

Warning text

Danger text

Some highlighted text

Inline code

Keyboard command text

gds-text

gds-text--header-xxl

gds-text--header-xl

gds-text--header-lg

gds-text--header-md

gds-text--header-sm

gds-text--header-xs

gds-text--body-md

gds-text--body-sm

gds-text--body-xs

gds-text--hero

gds-text--bold

gds-text--regular

gds-text--italic

gds-text--primary

gds-text--success

gds-text--info

gds-text--warning

gds-text--danger

gds-text--highlight

gds-text--code

gds-text--keyboard

gds-text--blockquote

gds-text__list-item--disc

gds-text__list-item--number

<p class="gds-text--header-xxl -m-b-2">XX-large header</p>
<p class="gds-text--header-xl -m-b-2">X-large header</p>
<p class="gds-text--header-lg -m-b-2">Large header</p>
<p class="gds-text--header-md -m-b-2">Medium header</p>
<p class="gds-text--header-sm -m-b-2">Small header</p>
<p class="gds-text--header-xs -m-b-2">X-small header</p>
<p class="gds-text--body-md -m-b-2">Medium body text, this is the default</p>
<p class="gds-text--body-sm -m-b-2">Small body text</p>
<p class="gds-text--body-xs -m-b-2">X-small body text</p>
<p class="gds-text--blockquote -m-b-2">
    It's gonna esplode.
    <span class="gds-text--blockquote--footer">Mario Lazaro</span>
</p>
<p class="gds-text--hero -m-b-2">Hero (extra bold) text</p>
<p class="gds-text--bold -m-b-2">Bold text</p>
<p class="gds-text--regular -m-b-2">Regular (slightly heavier) text</p>
<p class="gds-text--italic -m-b-2">Italic text</p>
<p class="gds-text--primary -m-b-2">Primary text</p>
<p class="gds-text--secondary -m-b-2">Secondary text</p>
<p class="gds-text--success -m-b-2">Success text</p>
<p class="gds-text--info -m-b-2">Info text</p>
<p class="gds-text--warning -m-b-2">Warning text</p>
<p class="gds-text--danger -m-b-2">Danger text</p>
<p>Some <span class="gds-text--highlight -m-b-2">highlighted</span> text</p>
<p class="gds-text--code -m-b-2">Inline code</p>
<p class="gds-text--keyboard -m-b-2">Keyboard command text</p>
<p class="gds-text--header-xxl -m-b-2">XX-large header</p> <p class="gds-text--header-xl -m-b-2">X-large header</p> <p class="gds-text--header-lg -m-b-2">Large header</p> <p class="gds-text--header-md -m-b-2">Medium header</p> <p class="gds-text--header-sm -m-b-2">Small header</p> <p class="gds-text--header-xs -m-b-2">X-small header</p> <p class="gds-text--body-md -m-b-2">Medium body text, this is the default</p> <p class="gds-text--body-sm -m-b-2">Small body text</p> <p class="gds-text--body-xs -m-b-2">X-small body text</p> <p class="gds-text--blockquote -m-b-2"> It's gonna esplode. <span class="gds-text--blockquote--footer">Mario Lazaro</span> </p> <p class="gds-text--hero -m-b-2">Hero (extra bold) text</p> <p class="gds-text--bold -m-b-2">Bold text</p> <p class="gds-text--regular -m-b-2">Regular (slightly heavier) text</p> <p class="gds-text--italic -m-b-2">Italic text</p> <p class="gds-text--primary -m-b-2">Primary text</p> <p class="gds-text--secondary -m-b-2">Secondary text</p> <p class="gds-text--success -m-b-2">Success text</p> <p class="gds-text--info -m-b-2">Info text</p> <p class="gds-text--warning -m-b-2">Warning text</p> <p class="gds-text--danger -m-b-2">Danger text</p> <p>Some <span class="gds-text--highlight -m-b-2">highlighted</span> text</p> <p class="gds-text--code -m-b-2">Inline code</p> <p class="gds-text--keyboard -m-b-2">Keyboard command text</p>

Tooltip

The tooltip component, prefixed by gds-tooltip, is a small explanatory message that appears when hovering over an element. Tooltips require a 'data-tooltip' attribute containing their message.

Myles O'Connor

gds-tooltip

gds-tooltip--top

gds-tooltip--right

gds-tooltip--bottom

gds-tooltip--left

gds-tooltip--primary

gds-tooltip--success

gds-tooltip--info

gds-tooltip--warning

gds-tooltip--danger

gds-tooltip--lg

gds-tooltip--always

gds-tooltip--no-animate

gds-tooltip--bounce

gds-tooltip--dark

<span class="gds-tooltip--right" data-tooltip="I am a tooltip!">
    <button type="button" class="gds-button gds-button--primary">Button with tooltip</button>
</span>
<span class="gds-tooltip--right" data-tooltip="I am a tooltip!"> <button type="button" class="gds-button gds-button--primary">Button with tooltip</button> </span>

Molecules

Accordion

The accordion component, prefixed by gds-accordion, is a collapsible container for holding related elements. Add gds-accordion__item--active to the gds-accordion__item to open the drawer.

Dan McKenna

  • Lists
    32

    • Ricardo Vega
      32

    • David Valdez
      32

      • Ricardo Vega
        32

      • David Valdez
        32

        • Ricardo Vega
          32

        • David Valdez
          32

    • Christopher Clarke
      32

    • Ricardo Vega
      32

    • David Valdez
      32

  • Controls

  • Tables

gds-accordion

gds-accordion__item-title--sm

gds-accordion__child-item-title--sm

gds-accordion__item-icon--sm

gds-accordion--white

gds-accordion__item-title--primary

gds-accordion--dark

gds-accordion__item--dark

gds-accordion__child-item--dark

gds-accordion__child-items--dark

gds-accordion__item--primary

gds-accordion__item--secondary

gds-accordion__item--tertiary

gds-accordion__item--quaternary

gds-accordion__item-title--primary

gds-accordion__item-title--secondary

gds-accordion__item-title--tertiary

gds-accordion__item-title--quaternary

<div class="gds-accordion" data-gds-accordion>
    <ul class="gds-accordion-list">
        <li class="gds-accordion__item gds-accordion__item--active" data-gds-accordion-item>
            <h4 class="gds-accordion__item-title" data-gds-accordion-title>Lists
                <div class="gds-badge">32</div>
            </h4>
            <i class="gds-accordion__item-icon"></i>
            <ul class="gds-accordion__child-items">
                <li class="gds-accordion__child-item">
                    <h4 class="gds-accordion__child-item-title">Ricardo Vega
                        <div class="gds-badge gds-badge--dark">32</div>
                    </h4>
                </li>
                <li class="gds-accordion__child-item gds-accordion__item" data-gds-accordion-item>
                    <h4 class="gds-accordion__child-item-title gds-accordion__item-title" data-gds-accordion-title>David Valdez
                        <div class="gds-badge gds-badge--dark">32</div>
                    </h4>
                    <i class="gds-accordion__child-item-icon gds-accordion__item-icon"></i>
                    <ul class="gds-accordion__child-items">
                        <li class="gds-accordion__child-item">
                            <h4 class="gds-accordion__child-item-title">Ricardo Vega
                                <div class="gds-badge gds-badge--dark">32</div>
                            </h4>
                        </li>
                        <li class="gds-accordion__child-item gds-accordion__item" data-gds-accordion-item>
                            <h4 class="gds-accordion__child-item-title gds-accordion__item-title" data-gds-accordion-title>David Valdez
                                <div class="gds-badge gds-badge--dark">32</div>
                            </h4>
                            <i class="gds-accordion__child-item-icon gds-accordion__item-icon"></i>
                            <ul class="gds-accordion__child-items">
                                <li class="gds-accordion__child-item">
                                    <h4 class="gds-accordion__child-item-title">Ricardo Vega
                                        <div class="gds-badge gds-badge--dark">32</div>
                                    </h4>
                                </li>
                                <li class="gds-accordion__child-item">
                                    <h4 class="gds-accordion__child-item-title">David Valdez
                                        <div class="gds-badge gds-badge--dark">32</div>
                                    </h4>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="gds-accordion__child-item">
                    <h4 class="gds-accordion__child-item-title">Christopher Clarke
                        <div class="gds-badge gds-badge--dark">32</div>
                    </h4>
                </li>
                <li class="gds-accordion__child-item">
                    <h4 class="gds-accordion__child-item-title">Ricardo Vega
                        <div class="gds-badge gds-badge--dark">32</div>
                    </h4>
                </li>
                <li class="gds-accordion__child-item">
                    <h4 class="gds-accordion__child-item-title">David Valdez
                        <div class="gds-badge gds-badge--dark">32</div>
                    </h4>
                </li>
            </ul>
        </li>
        <li class="gds-accordion__item" data-gds-accordion-item>
            <h4 class="gds-accordion__item-title" data-gds-accordion-title>Controls</h4>
            <i class="gds-accordion__item-icon"></i>
        </li>
        <li class="gds-accordion__item" data-gds-accordion-item>
            <h4 class="gds-accordion__item-title" data-gds-accordion-title>Tables</h4>
            <i class="gds-accordion__item-icon"></i>
        </li>
    </ul>
</div>
<div class="gds-accordion" data-gds-accordion> <ul class="gds-accordion-list"> <li class="gds-accordion__item gds-accordion__item--active" data-gds-accordion-item> <h4 class="gds-accordion__item-title" data-gds-accordion-title>Lists <div class="gds-badge">32</div> </h4> <i class="gds-accordion__item-icon"></i> <ul class="gds-accordion__child-items"> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">Ricardo Vega <div class="gds-badge gds-badge--dark">32</div> </h4> </li> <li class="gds-accordion__child-item gds-accordion__item" data-gds-accordion-item> <h4 class="gds-accordion__child-item-title gds-accordion__item-title" data-gds-accordion-title>David Valdez <div class="gds-badge gds-badge--dark">32</div> </h4> <i class="gds-accordion__child-item-icon gds-accordion__item-icon"></i> <ul class="gds-accordion__child-items"> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">Ricardo Vega <div class="gds-badge gds-badge--dark">32</div> </h4> </li> <li class="gds-accordion__child-item gds-accordion__item" data-gds-accordion-item> <h4 class="gds-accordion__child-item-title gds-accordion__item-title" data-gds-accordion-title>David Valdez <div class="gds-badge gds-badge--dark">32</div> </h4> <i class="gds-accordion__child-item-icon gds-accordion__item-icon"></i> <ul class="gds-accordion__child-items"> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">Ricardo Vega <div class="gds-badge gds-badge--dark">32</div> </h4> </li> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">David Valdez <div class="gds-badge gds-badge--dark">32</div> </h4> </li> </ul> </li> </ul> </li> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">Christopher Clarke <div class="gds-badge gds-badge--dark">32</div> </h4> </li> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">Ricardo Vega <div class="gds-badge gds-badge--dark">32</div> </h4> </li> <li class="gds-accordion__child-item"> <h4 class="gds-accordion__child-item-title">David Valdez <div class="gds-badge gds-badge--dark">32</div> </h4> </li> </ul> </li> <li class="gds-accordion__item" data-gds-accordion-item> <h4 class="gds-accordion__item-title" data-gds-accordion-title>Controls</h4> <i class="gds-accordion__item-icon"></i> </li> <li class="gds-accordion__item" data-gds-accordion-item> <h4 class="gds-accordion__item-title" data-gds-accordion-title>Tables</h4> <i class="gds-accordion__item-icon"></i> </li> </ul> </div>

Avatar

The avatar component, prefixed by gds-avatar, can display a user's photo, a brand's logo, or a flag icon for internationalization. The avatar can include a dropdown menu, which is meant to be shown when the avatar is clicked on. To show the dropdown menu, add the gds-avatar--menu-open class to gds-avatar As with bubble menu and filter components, the button that invokes the avatar menu should contain a gds-bubble-button attribute with a value that points at some form of selector for the menu it corresponds to.

Dan McKenna, Myles O'Connor

Ken Weiner

gds-avatar

gds-bubble__menu--menu-open

gds-avatar__image--active

gds-avatar__image--dark

gds-avatar__menu--dark

gds-avatar__menu-list--dark

gds-avatar__menu-list-divider--dark

gds-avatar__menu-list-item--dark

gds-avatar__menu-list-link--dark

<div class="gds-avatar">
    <div class="gds-avatar__image" data-gds-bubble-button="[data-gds-bubble-menu='avatar']" data-gds-active-class="gds-avatar__image--active">
        <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner" />
    </div>
    <div class="gds-avatar__menu" data-gds-bubble-menu="avatar">
        <ul class="gds-avatar__menu-list">
            <li class="gds-avatar__menu-list-item -ellipsis -p-h-3 -p-v-2">Ken Weiner</li>
            <li class="gds-avatar__menu-list-divider"></li>
            <li class="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer class="gds-avatar__menu-list-link" href="#">Profile</a></li>
            <li class="gds-avatar__menu-list-item -ellipsis" data-gds-bubble-closer ><a class="gds-avatar__menu-list-link" href="#">Settings</a></li>
            <li class="gds-avatar__menu-list-divider"></li>
            <li class="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer class="gds-avatar__menu-list-link" href="#">Logout</a></li>
        </ul>
    </div>
</div>
<div class="gds-avatar"> <div class="gds-avatar__image" data-gds-bubble-button="[data-gds-bubble-menu='avatar']" data-gds-active-class="gds-avatar__image--active"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner" /> </div> <div class="gds-avatar__menu" data-gds-bubble-menu="avatar"> <ul class="gds-avatar__menu-list"> <li class="gds-avatar__menu-list-item -ellipsis -p-h-3 -p-v-2">Ken Weiner</li> <li class="gds-avatar__menu-list-divider"></li> <li class="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer class="gds-avatar__menu-list-link" href="#">Profile</a></li> <li class="gds-avatar__menu-list-item -ellipsis" data-gds-bubble-closer ><a class="gds-avatar__menu-list-link" href="#">Settings</a></li> <li class="gds-avatar__menu-list-divider"></li> <li class="gds-avatar__menu-list-item -ellipsis"><a data-gds-bubble-closer class="gds-avatar__menu-list-link" href="#">Logout</a></li> </ul> </div> </div>

Balloon

The gds-balloon component is meant to be used to display contextual information when rolling over or clicking some other element. It is, in essence, a more robust and flexible version of a tooltip complete with formatting for titles and descriptions instead of just a simple string of text. While it has built in elements for title and description, it can contain any formatted HTML.

Use the position modifiers gds-balloon--left, gds-balloon--right, gds-balloon--top, & gds-balloon--bottom to make the arrow position correctly with respect to the balloon and the corresponding element being highlighted.

Dan McKenna

gds-balloon

gds-balloon--right

gds-balloon--left

gds-balloon--top

gds-balloon--bottom

gds-balloon--primary

gds-balloon--secondary

gds-balloon--tertiary

gds-balloon--success

gds-balloon--warning

gds-balloon--danger

gds-balloon--dark

gds-balloon__label--dark

gds-balloon__label--primary

gds-balloon__label--secondary

gds-balloon__label--tertiary

gds-balloon__label--success

gds-balloon__label--warning

gds-balloon__label--danger

gds-balloon__group--primary

gds-balloon__group--secondary

gds-balloon__group--tertiary

gds-balloon__group--success

gds-balloon__group--warning

gds-balloon__group--danger

gds-balloon__group--divide-bottom

gds-balloon__group--divide-top

<div class="gds-balloon gds-balloon--right">
    <div class="gds-balloon__group gds-balloon__group--divide-bottom">
        <span class="gds-balloon__label gds-form-group__label">Balloon Title</span>
    </div>
    <div class="gds-balloon__group">
        <span class="gds-balloon__description">A short description goes here</span>
    </div>
</div>
<div class="gds-balloon gds-balloon--right"> <div class="gds-balloon__group gds-balloon__group--divide-bottom"> <span class="gds-balloon__label gds-form-group__label">Balloon Title</span> </div> <div class="gds-balloon__group"> <span class="gds-balloon__description">A short description goes here</span> </div> </div>

Bubble

The bubble menu component is a component used to include a dropdown "bubble" menu on anything. The menu can be used in conjunction with elements like buttons and links by wrapping the menu and the target element with a gds-bubble element but it can also be implemented without the bubble "wrapper" by simply appending the gds-bubble__menu beneath the element in question. This will not always behave as intended unless the parent of both the menu and the target element are set to display inline or inline-block

As with avatar menu and filter components, the button that invokes the bubble menu should contain a gds-bubble-button attribute with a value that points at some form of selector for the menu it corresponds to.

Dan McKenna

gds-bubble

gds-bubble__menu--offset-xs

gds-bubble__menu--offset-sm

gds-bubble__menu--offset-md

gds-bubble__menu--offset-lg

gds-bubble__menu--offset-xl

gds-bubble__menu--menu-open

gds-bubble__menu--dark

gds-bubble__menu-list-item--dark

gds-bubble__menu-list-link--dark

gds-bubble__menu-list--dark

gds-bubble__menu-list-divider--dark

<div class="gds-bubble -m-b-6" data-gds-bubble>
    <div class="gds-button gds-button--outline gds-button--xs" data-gds-bubble-button="[data-gds-bubble-menu='example']"><i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i></div>
    <div class="gds-bubble__menu gds-bubble__menu gds-bubble__menu--menu-open  gds-bubble__menu--offset-sm" data-gds-bubble-menu>
        <ul class="gds-bubble__menu-list" data-gds-bubble-menu="example">
            <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Alert 1</a></li>
            <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Alert 2</a></li>
            <li class="gds-bubble__menu-list-divider"></li>
            <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Clear Alerts</a></li>
        </ul>
    </div>
</div>
<div class="gds-bubble -m-b-6" data-gds-bubble> <div class="gds-button gds-button--outline gds-button--xs" data-gds-bubble-button="[data-gds-bubble-menu='example']"><i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i></div> <div class="gds-bubble__menu gds-bubble__menu gds-bubble__menu--menu-open gds-bubble__menu--offset-sm" data-gds-bubble-menu> <ul class="gds-bubble__menu-list" data-gds-bubble-menu="example"> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Alert 1</a></li> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Alert 2</a></li> <li class="gds-bubble__menu-list-divider"></li> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Clear Alerts</a></li> </ul> </div> </div>

Button-Dropdown

The button-dropdown component, prefixed by gds-button-dropdown, is used for dropdown menus. To expand the dropdown menu, add the gds-button-dropdown--active class to gds-button-dropdown. Use the modifier gds-button-dropdown--sm for a smaller dropdown menu.

Dan McKenna

gds-button-dropdown

gds-button-dropdown--secondary

gds-button-dropdown--tertiary

gds-button-dropdown--xs

gds-button-dropdown--sm

gds-button-dropdown--lg

gds-button-dropdown__button--dark

gds-button-dropdown__button--dark-primary

gds-button-dropdown__button--dark-secondary

gds-button-dropdown__button--dark-tertiary

gds-button-dropdown__menu--dark

gds-button-dropdown__button--no-rotate

<div class="gds-button-dropdown" data-gds-dropdown>
    <button type="button" class="gds-button-dropdown__button gds-button--primary" data-gds-dropdown-button>Dropdown Menu</button>
    <ul class="gds-button-dropdown__menu">
        <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
        <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
        <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
        <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
        <li class="gds-button-dropdown__divider"></li>
        <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
        <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
    </ul>
</div>
<div class="gds-button-dropdown" data-gds-dropdown> <button type="button" class="gds-button-dropdown__button gds-button--primary" data-gds-dropdown-button>Dropdown Menu</button> <ul class="gds-button-dropdown__menu"> <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li> <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li> <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li> <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li> <li class="gds-button-dropdown__divider"></li> <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li> <li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li> </ul> </div>

Button-Group

The button-group component, prefixed by gds-button-group, is used for arranging button components into a group. For a toolbar made up of multiple button-groups, see the gds-button-toolbar component documentation.

Note: By using HTML comments in between 'display:inline-block' elements as in the example code below, the default spacing between the elements is eliminated and they render directly adjacent to each other.

Dan McKenna

gds-button-group

gds-button-group--lg

gds-button-group__button--lg

gds-button-group--sm

gds-button-group__button--sm

gds-button-group--xs

gds-button-group__button--xs

gds-button-group--responsive

gds-button-group__button--responsive

<div class="gds-button-group">
    <button type="button" class="gds-button-group__button gds-button--default">Default</button><!--
    --><button type="button" class="gds-button-group__button gds-button--primary">Primary</button><!--
    --><button type="button" class="gds-button-group__button gds-button--success">Success</button><!--
    --><button type="button" class="gds-button-group__button gds-button--info">Info</button><!--
    --><button type="button" class="gds-button-group__button gds-button--warning">Warning</button><!--
    --><button type="button" class="gds-button-group__button gds-button--danger">Danger</button><!--
    --><button type="button" class="gds-button-group__button gds-button--link">Link</button>
</div>
<div class="gds-button-group"> <button type="button" class="gds-button-group__button gds-button--default">Default</button><!-- --><button type="button" class="gds-button-group__button gds-button--primary">Primary</button><!-- --><button type="button" class="gds-button-group__button gds-button--success">Success</button><!-- --><button type="button" class="gds-button-group__button gds-button--info">Info</button><!-- --><button type="button" class="gds-button-group__button gds-button--warning">Warning</button><!-- --><button type="button" class="gds-button-group__button gds-button--danger">Danger</button><!-- --><button type="button" class="gds-button-group__button gds-button--link">Link</button> </div>

Button-Toolbar

The button-toolbar component, prefixed by gds-button-toolbar, is used to combine multiple button-groups into a cohesive toolbar.

Note: By using HTML comments in between 'display:inline-block' elements as in the example code below, the default spacing between the elements is eliminated and they render directly adjacent to each other.

Dan McKenna

gds-button-toolbar

<div class="gds-button-toolbar">
    <div class="gds-button-group gds-button-group--md">
        <button type="button" class="gds-button-group__button gds-button--default">Default</button><!--
        --><button type="button" class="gds-button-group__button gds-button--primary">Primary</button><!--
        --><button type="button" class="gds-button-group__button gds-button--success">Success</button>
    </div>
    <div class="gds-button-group gds-button-group--md">
        <button type="button" class="gds-button-group__button gds-button--info">Info</button><!--
        --><button type="button" class="gds-button-group__button gds-button--warning">Warning</button>
    </div>
    <div class="gds-button-group gds-button-group--md">
        <button type="button" class="gds-button-group__button gds-button--danger">Danger</button>
    </div>
</div>
<div class="gds-button-toolbar"> <div class="gds-button-group gds-button-group--md"> <button type="button" class="gds-button-group__button gds-button--default">Default</button><!-- --><button type="button" class="gds-button-group__button gds-button--primary">Primary</button><!-- --><button type="button" class="gds-button-group__button gds-button--success">Success</button> </div> <div class="gds-button-group gds-button-group--md"> <button type="button" class="gds-button-group__button gds-button--info">Info</button><!-- --><button type="button" class="gds-button-group__button gds-button--warning">Warning</button> </div> <div class="gds-button-group gds-button-group--md"> <button type="button" class="gds-button-group__button gds-button--danger">Danger</button> </div> </div>

Card

The card component, prefixed by gds-card, is a standard container component, designed to hold groups of related information.

Dan McKenna

Some quick example text to build on the card title and make up the bulk of the card's content.

gds-card

gds-card--white

gds-card--no-shadow

gds-card--underlined

gds-card--underlined-secondary

gds-card--xl

gds-card--lg

gds-card--md

gds-card--sm

gds-card--xs

gds-card--dark

<div class="gds-card">
    <div class="gds-card__block">
        <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="gds-card"> <div class="gds-card__block"> <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>

Card Footer

Use gds-card__footer to create a footer block on a card.

Dan McKenna

Card Title

Hero Text

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="gds-card">
    <div class="gds-card__block">
        <h4 class="gds-card__title">Card Title</h4>
        <h2 class="gds-text--header-md gds-text--regular -inline-block">Hero Text</h2>
        <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    <div class="gds-card__footer">
        <span>Card Footer</span>
    </div>
</div>

Card Header

Use gds-card__header to create a header block on a card.

Dan McKenna

Card Header

Card Title

Hero Text

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="gds-card">
    <div class="gds-card__header">
        <span>Card Header</span>
    </div>
    <div class="gds-card__block">
        <h4 class="gds-card__title">Card Title</h4>
        <h2 class="gds-text--header-md gds-text--regular -inline-block">Hero Text</h2>
        <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="gds-card"> <div class="gds-card__header"> <span>Card Header</span> </div> <div class="gds-card__block"> <h4 class="gds-card__title">Card Title</h4> <h2 class="gds-text--header-md gds-text--regular -inline-block">Hero Text</h2> <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>

Chart Card

Use gds-card__chart to add a container for charts to cards.

Dan McKenna

Card Title

Major Card Stat

gds-card__chart--abs

gds-card__chard--no-fade

<div class="gds-card gds-card--md">
    <div class="gds-card__block">
        <h4 class="gds-card__title">Card Title</h4>
        <h4 class="gds-text--regular gds-text--header-md">Major Card Stat</h4>
    </div>
    <div class="gds-card__chart gds-card__chart--abs">
        <img class="chart-placeholder" src="http://design-prototypes.gumgum.com/ds_dm/images/sample-chart.png" height="100%" width="100%">
    </div>
</div>
<div class="gds-card gds-card--md"> <div class="gds-card__block"> <h4 class="gds-card__title">Card Title</h4> <h4 class="gds-text--regular gds-text--header-md">Major Card Stat</h4> </div> <div class="gds-card__chart gds-card__chart--abs"> <img class="chart-placeholder" src="http://design-prototypes.gumgum.com/ds_dm/images/sample-chart.png" height="100%" width="100%"> </div> </div>

Content Block

Use gds-card__block to wrap a card's content into distinct chunks.

Dan McKenna

Major Card Stat

123,456,890

Medium Card Stat

123,456,890
<div class="gds-card">
    <div class="gds-card__block">
        <h4 class="gds-card__title">Major Card Stat</h4>
        <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2>
    </div>
    <div class="gds-card__block gds-card__block--divide-top">
        <h4 class="gds-card__title">Medium Card Stat</h4>
        <h5 class="gds-text--header-sm gds-text--regular -inline-block">123,456,890</h5>
    </div>
</div>
<div class="gds-card"> <div class="gds-card__block"> <h4 class="gds-card__title">Major Card Stat</h4> <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2> </div> <div class="gds-card__block gds-card__block--divide-top"> <h4 class="gds-card__title">Medium Card Stat</h4> <h5 class="gds-text--header-sm gds-text--regular -inline-block">123,456,890</h5> </div> </div>

Control Card

Use gds-card__control to add button and other intereactive element clusters into a corner of a card.

Dan McKenna

Expand

Major Card Stat

123,456,890

5%

Some quick example text to build on the card title and make up the bulk of the card's content.

gds-card__control--t-r

gds-card__control--t-l

gds-card__control--b-r

gds-card__control--b-l

<div class="gds-card">
    <div class="gds-card__control gds-card__control--t-r">
        <div class="gds-button gds-button--primary gds-button--xs gds-button--inline">Expand</div>
    </div>
    <div class="gds-card__block">
        <h4 class="gds-card__title">Major Card Stat</h4>
        <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2>
        <span class="gds-card__trend gds-card__trend--up">5%</span>
        <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="gds-card"> <div class="gds-card__control gds-card__control--t-r"> <div class="gds-button gds-button--primary gds-button--xs gds-button--inline">Expand</div> </div> <div class="gds-card__block"> <h4 class="gds-card__title">Major Card Stat</h4> <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2> <span class="gds-card__trend gds-card__trend--up">5%</span> <p class="gds-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>

Image Card

Use gds-card__img-container, gds-card__img-helper and gds-card__img to append images inside cards

Dan McKenna

Major Card Stat

123,456,890

5%

gds-card__img-container--xs

gds-card__img-container--sm

gds-card__img-container--md

gds-card__img-container--lg

gds-card__img-container--xl

gds-card__img-container--top

gds-card__img-container--bottom

<div class="gds-card">
    <div class="gds-card__img-container">
        <img class="gds-card__img" src="http://design-prototypes.gumgum.com/ds_dm/images/sample-1.jpg"/>
        <div class="gds-card__img-helper"></div>
    </div>
    <div class="gds-card__block">
        <h4 class="gds-card__title">Major Card Stat</h4>
        <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2>
        <span class="gds-card__trend gds-card__trend--up">5%</span>
    </div>
</div>
<div class="gds-card"> <div class="gds-card__img-container"> <img class="gds-card__img" src="http://design-prototypes.gumgum.com/ds_dm/images/sample-1.jpg"/> <div class="gds-card__img-helper"></div> </div> <div class="gds-card__block"> <h4 class="gds-card__title">Major Card Stat</h4> <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2> <span class="gds-card__trend gds-card__trend--up">5%</span> </div> </div>

Tile Card

Tile cards can include a large icon, and are used for category-level navigation.

Dan McKenna

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="gds-card gds-card--tile -p-a-3">
    <div class="gds-card--tile__block">
        <div class="gds-card--tile__icon"><i class="btl bt-gear"></i></div>
        <p class="gds-card__text gds-card--tile__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>
<div class="gds-card gds-card--tile -p-a-3"> <div class="gds-card--tile__block"> <div class="gds-card--tile__icon"><i class="btl bt-gear"></i></div> <p class="gds-card__text gds-card--tile__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>

Trend Card

Use gds-card__trend to display trend information

Dan McKenna

Major Card Stat

123,456,890

5%

Medium Card Stat

123,456,890
0%

Medium Card Stat

123,456,890
2%

gds-card__trend--up

gds-card__trend--same

gds-card__trend--down

<div class="gds-card">
    <div class="gds-card__block">
        <h4 class="gds-card__title">Major Card Stat</h4>
        <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2>
        <span class="gds-card__trend gds-card__trend--up">5%</span>
    </div>
    <div class="gds-card__block gds-card__block--divide-top">
        <h4 class="gds-card__title">Medium Card Stat</h4>
        <h5 class="gds-text--header-sm gds-text--regular -inline-block">123,456,890</h5>
        <div class="gds-card__trend gds-card__trend--same">0%</div>
    </div>
    <div class="gds-card__block gds-card__block--divide-top">
        <h4 class="gds-card__title">Medium Card Stat</h4>
        <h5 class="gds-text--header-sm gds-text--regular -inline-block">123,456,890</h5>
        <div class="gds-card__trend gds-card__trend--down">2%</div>
    </div>
</div>
<div class="gds-card"> <div class="gds-card__block"> <h4 class="gds-card__title">Major Card Stat</h4> <h2 class="gds-text--header-md gds-text--regular -inline-block">123,456,890</h2> <span class="gds-card__trend gds-card__trend--up">5%</span> </div> <div class="gds-card__block gds-card__block--divide-top"> <h4 class="gds-card__title">Medium Card Stat</h4> <h5 class="gds-text--header-sm gds-text--regular -inline-block">123,456,890</h5> <div class="gds-card__trend gds-card__trend--same">0%</div> </div> <div class="gds-card__block gds-card__block--divide-top"> <h4 class="gds-card__title">Medium Card Stat</h4> <h5 class="gds-text--header-sm gds-text--regular -inline-block">123,456,890</h5> <div class="gds-card__trend gds-card__trend--down">2%</div> </div> </div>

Checklist

The checklist component, prefixed by gds-checklist, denotes a list of tasks along with each task's current state of completion or incompletion.

Dan McKenna, Myles O'Connor

  • Milk
  • Bread
  • Eggs
  • Waffles

gds-checklist

gds-checklist__item--sm

gds-checklist__item--lg

gds-checklist__item--inverse

gds-checklist__item--active

gds-checklist__item--completed

<ul class="gds-checklist">
    <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--completed">
        <span class="gds-checklist__item-text">Milk</span>
    </li>
    <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--completed">
        <span class="gds-checklist__item-text">Bread</span>
    </li>
    <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--active">
        <span class="gds-checklist__item-text">Eggs</span>
    </li>
    <li class="gds-checklist__item gds-checklist__item--sm">
        <span class="gds-checklist__item-text">Waffles</span>
    </li>
</ul>
<ul class="gds-checklist"> <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--completed"> <span class="gds-checklist__item-text">Milk</span> </li> <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--completed"> <span class="gds-checklist__item-text">Bread</span> </li> <li class="gds-checklist__item gds-checklist__item--sm gds-checklist__item--active"> <span class="gds-checklist__item-text">Eggs</span> </li> <li class="gds-checklist__item gds-checklist__item--sm"> <span class="gds-checklist__item-text">Waffles</span> </li> </ul>

Chooser

The chooser component, prefixed by gds-chooser is used to select an active option from a set that is too large to be displayed inline via standard nav. The component is comprised of a set of buttons for traversing forward and backwards through an option set, and a central dropdown menu for selecting a specific option from the entire set.

Daniel McKenna

This is the current Item

gds-chooser--secondary

gds-chooser--tertiary

gds-chooser__menu--secondary

gds-chooser__menu--tertiary

<div class="gds-chooser">
    <button class="gds-chooser__button gds-chooser__button--left"><i class="btl bt-fw bt-angle-left"></i></button>
    <div class="gds-chooser__console">
        <div class="gds-chooser__currentItem"><span class="gds-chooser__item-name">This is the current Item<i class="gds-chooser__item-icon fa fa-caret-right" aria-hidden="true"></i></span></div>
        <ul class="gds-chooser__menu">
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
            <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li>
        </ul>
    </div>
    <button class="gds-chooser__button gds-chooser__button--right"><i class="btl bt-fw bt-angle-right"></i></button>
</div>
<div class="gds-chooser"> <button class="gds-chooser__button gds-chooser__button--left"><i class="btl bt-fw bt-angle-left"></i></button> <div class="gds-chooser__console"> <div class="gds-chooser__currentItem"><span class="gds-chooser__item-name">This is the current Item<i class="gds-chooser__item-icon fa fa-caret-right" aria-hidden="true"></i></span></div> <ul class="gds-chooser__menu"> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> <li class="gds-chooser__menu-item"><a class="gds-chooser__menu-link">Link</a></li> </ul> </div> <button class="gds-chooser__button gds-chooser__button--right"><i class="btl bt-fw bt-angle-right"></i></button> </div>

Corner-Content

The corner-content component, prefixed by gds-corner-content, is meant for secondary navigation that does not work in the context of a standard gds-modal component. To show the component, add the gds-corner-content--shown class to gds-corner-content. This component can be aligned to the right or left side of the user's window by toggling the gds-corner-content--right and gds-corner-content--left classes.

Myles O'Connor

gds-corner-content--shown

gds-corner-content--top

gds-corner-content--left

gds-corner-content--right

<div class="gds-corner-content gds-corner-content--right gds-corner-content--shown">
    <div class="gds-corner-content__header" data-gds-corner-content>
        <h4 class="gds-corner-content__title">Corner content title</h4>
        <div class="gds-corner-content__controls">
            <button class="gds-corner-content__button"><i class="fa fa-arrows-v"></i></button>
        </div>
    </div>
    <div class="gds-corner-content__block">
        ...
    </div>
</div>
<div class="gds-corner-content gds-corner-content--right gds-corner-content--shown"> <div class="gds-corner-content__header" data-gds-corner-content> <h4 class="gds-corner-content__title">Corner content title</h4> <div class="gds-corner-content__controls"> <button class="gds-corner-content__button"><i class="fa fa-arrows-v"></i></button> </div> </div> <div class="gds-corner-content__block"> ... </div> </div>

HTML Preview

The HTML-preview component, prefixed by gds-html-preview is a stage for displaying HTML content on a simulated transparent background.

Dan McKenna, Myles O'Connor

gds-html-preview

gds-html-preview--active

gds-html-preview--disabled

gds-html-preview--resize

<div class="gds-html-preview">
    <iframe class="gds-html-preview__content" frameborder="0" scrolling="0"></iframe>
</div>
<div class="gds-html-preview"> <iframe class="gds-html-preview__content" frameborder="0" scrolling="0"></iframe> </div>

Hotkey-Toggle

The hotkey toggle component, prefixed by gds-hotkey-toggle, is used in conjunction with hotkey atoms to create togglable, keyboard-enabled buttons.

The buttons come in two main flavors - standard and thumbnail styles. However, by using the options available in the hotkey atom and hotkey-toggle, and by rearranging the contents of the toggle elements you can find new permutations of this component to suit other needs.

The hotkey toggles come in several sizes, but it's important to note that none of the sizes include explicit heights or widths - just changes in font and padding sizes. If you want explicit control over element widths or heights it's recommended that you use the gds-hotkey-toggle--block modifier and wrap the toggle inside a container with more explicit sizing rules. Then use the size modifiers to find the internal sizing of the toggle elements that most closely coincides with the container sizing you've chosen.

Dan McKenna

E
Denver Nuggets

gds-hotkey-toggle

gds-hotkey-toggle--active

gds-hotkey-toggle--block

gds-hotkey-toggle--primary

gds-hotkey-toggle--secondary

gds-hotkey-toggle--success

gds-hotkey-toggle--warning

gds-hotkey-toggle--danger

gds-hotkey-toggle--info

gds-hotkey-toggle--xs

gds-hotkey-toggle--sm

gds-hotkey-toggle--lg

gds-hotkey-toggle--xl

gds-hotkey-toggle__label--xs

gds-hotkey-toggle__label--sm

gds-hotkey-toggle__label--lg

gds-hotkey-toggle__label--xl

gds-hotkey-toggle__icon--xs

gds-hotkey-toggle__icon--sm

gds-hotkey-toggle__icon--overlay

gds-hotkey-toggle__icon--overlay-xs

gds-hotkey-toggle__icon--overlay-sm

gds-hotkey-toggle__icon--overlay-lg

gds-hotkey-toggle__icon--overlay-xl

gds-hotkey-toggle--dark-primary

gds-hotkey-toggle--dark-secondary

gds-hotkey-toggle--dark-tertiary

gds-hotkey-toggle--dark-success

gds-hotkey-toggle--dark-warning

gds-hotkey-toggle--dark-danger

gds-hotkey-toggle--dark-info

<div class="gds-hotkey-toggle" data-gds-hotkey-toggle='e' data-gds-hotkey-active="false">
    <div class="gds-hotkey -m-r-1">E</div>
    <span class="gds-hotkey-toggle__label -m-r-4">Denver Nuggets</span>
    <i class="gds-hotkey-toggle__icon fa fa-fw fa-check"></i>
</div>
<div class="gds-hotkey-toggle" data-gds-hotkey-toggle='e' data-gds-hotkey-active="false"> <div class="gds-hotkey -m-r-1">E</div> <span class="gds-hotkey-toggle__label -m-r-4">Denver Nuggets</span> <i class="gds-hotkey-toggle__icon fa fa-fw fa-check"></i> </div>

Input

All inputs should be wrapped in a standard gds-form-group element. The inside of the form group generally contains an input, a label, and if necessary, a hint or error text element.

By default, gds-form-group is a block element but you can change it to inline by using gds-form-group--inline. Note: this will not make the contents of the group inline, only the group as a whole.

Form groups can also have contextual modifiers to indicate different situations. For example, an error, or a successfully validated entry. These contextual states can be applied by adding gds-form-group--danger, gds-form-group--warning and gds-form-group--success.

Finally, you can disable input groups by applying the gds-form-group--disabled modifier to the entire group.

Dan McKenna, Myles O'Connor

text input hint / validation error text.

gds-input

gds-form-group__text-input--xs

gds-form-group__text-input--sm

gds-form-group__text-input--lg

gds-form-group__text-input--search

gds-form-group__text-input--dark

<div class="gds-form-group">
    <label class="gds-form-group__label">Example Text Input</label>
    <input class="gds-form-group__text-input" type="text" placeholder="Enter Text" />
    <small class="gds-form-group__text-help">text input hint / validation error text.</small>
</div>
<div class="gds-form-group"> <label class="gds-form-group__label">Example Text Input</label> <input class="gds-form-group__text-input" type="text" placeholder="Enter Text" /> <small class="gds-form-group__text-help">text input hint / validation error text.</small> </div>

Capped Text Input

You can add caps to inputs by wrapping the input in a gds-form-group__input-group. Caps can be added to the left and/or right of the input and can be used to indicate units or currency.

To remove the input's border-radius, so that it fits seamlessly up against the cap, use the gds-form-group__text-input--left-edge & gds-form-group__text-input--right-edge modifier classes.

Dan McKenna, Myles O'Connor

$
.00

gds-form-group__text-input--left-edge

gds-form-group__text-input--right-edge

<div class="gds-form-group__input-group">
    <div class="gds-form-group__input-group-addon">
        <div class="gds-form-group__input-group-cap">&#36;</div>
    </div>
    <input class="gds-form-group__text-input gds-form-group__text-input--addon" type="text" placeholder="Enter Text" />
    <div class="gds-form-group__input-group-addon">
        <div class="gds-form-group__input-group-cap">.00</div>
    </div>
</div>
<div class="gds-form-group__input-group"> <div class="gds-form-group__input-group-addon"> <div class="gds-form-group__input-group-cap">&#36;</div> </div> <input class="gds-form-group__text-input gds-form-group__text-input--addon" type="text" placeholder="Enter Text" /> <div class="gds-form-group__input-group-addon"> <div class="gds-form-group__input-group-cap">.00</div> </div> </div>

Checkbox

Checkbox inputs use the following syntax.

Dan McKenna, Myles O'Connor

gds-form-group__checkbox-label--dark

gds-form-group__checkbox-indicator--dark

gds-form-group__checkbox--xs

gds-form-group__checkbox--sm

<div class="gds-form-group">
    <div class="gds-form-group__checkbox">
        <label class="gds-form-group__checkbox-label">
            <input class="gds-form-group__checkbox-input" type="checkbox" value="" />
            <span class="gds-form-group__checkbox-indicator"></span>Single Checkbox Option.
        </label>
    </div>
</div>
<div class="gds-form-group"> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label"> <input class="gds-form-group__checkbox-input" type="checkbox" value="" /> <span class="gds-form-group__checkbox-indicator"></span>Single Checkbox Option. </label> </div> </div>

Combination Input and Button Cap

You can also add button caps to inputs by wrapping the input in a gds-form-group__input-group.

To remove the input's border-radius, so that it fits seamlessly up against the cap, use the gds-form-group__text-input--left-edge & gds-form-group__text-input--right-edge modifier classes.

Dan McKenna, Myles O'Connor

gds-button--button-cap-xs

gds-button--button-cap-sm

gds-button--button-cap-lg

gds-form-group__text-input--right-edge

gds-form-group__text-input--left-edge

gds-form-group__select-input--right-edge

gds-form-group__select-input--left-edge

<div class="gds-form-group">
    <label class="gds-form-group__label">Example Text Input With Button Cap</label>
    <div class="gds-form-group__input-group">
        <input class="gds-form-group__text-input gds-form-group__text-input--right-edge" type="text" placeholder="Enter Text" />
        <button class="gds-button gds-button--primary gds-button--button-cap">Button Cap</button>
    </div>
</div>
<div class="gds-form-group"> <label class="gds-form-group__label">Example Text Input With Button Cap</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--right-edge" type="text" placeholder="Enter Text" /> <button class="gds-button gds-button--primary gds-button--button-cap">Button Cap</button> </div> </div>

Date Input

Date inputs are a special form of capped text input. Their structure is similar.

Dan McKenna, Myles O'Connor

/ /

gds-form-group__date-input--xs

gds-form-group__date-input--sm

gds-form-group__date-input--lg

<div class="gds-form-group">
    <label class="gds-form-group__label">Date Input with Button</label>
    <div class="gds-form-group__input-group">
        <div class="gds-form-group__date-group gds-form-group__date-group--addon">
            <input class="gds-form-group__date-input" type="text" maxlength="2" placeholder="mm" /><span class="gds-form-group__date-divider">/</span>
            <input class="gds-form-group__date-input" type="text" maxlength="2" placeholder="dd" /><span class="gds-form-group__date-divider">/</span>
            <input class="gds-form-group__date-input" type="text" maxlength="4" placeholder="yyyy" />
        </div>
        <div class="gds-form-group__date-group-addon">
            <button class="gds-button gds-button--primary gds-form-group__date-group-button"><i class="fa fa-calendar"></i></button>
        </div>
    </div>
</div>
<div class="gds-form-group"> <label class="gds-form-group__label">Date Input with Button</label> <div class="gds-form-group__input-group"> <div class="gds-form-group__date-group gds-form-group__date-group--addon"> <input class="gds-form-group__date-input" type="text" maxlength="2" placeholder="mm" /><span class="gds-form-group__date-divider">/</span> <input class="gds-form-group__date-input" type="text" maxlength="2" placeholder="dd" /><span class="gds-form-group__date-divider">/</span> <input class="gds-form-group__date-input" type="text" maxlength="4" placeholder="yyyy" /> </div> <div class="gds-form-group__date-group-addon"> <button class="gds-button gds-button--primary gds-form-group__date-group-button"><i class="fa fa-calendar"></i></button> </div> </div> </div>

Dual Range Slider

Dual range slider inputs allow users to click and drag two points until a desired range of values is reached. You can initialize this component using $(input-id or data attribute).gdsRangeSlider(optionsObject). It accepts these options: minVal:Number,maxValue:Number,initialVal:Array(Number,Number) You can return the values of the slider like so: $(slider).gdsRangeSlider().get(). and manually set those values at any time by doing $(slider).gdsRangeSlider().set(options). The options object passed to set is identical in structure to the one used for initialization.

Dan McKenna, Myles O'Connor

<div class="gds-form-group -m-b-1">
    <label class="gds-form-group__label" for="range-input-1" >Dual Selector Range Input (Requires JS)</label>
    <div class="gds-form-group__range-input gds-form-group__range-input--dual" id="range-input-1" data-gds-dual-range-slider data-gds-max-value="100" data-gds-min-value="0">
        <div class="gds-form-group__range-wrapper" data-gds-range-wrapper>
            <div class="gds-form-group__range-thumb gds-form-group__range-thumb--dual" data-gds-range-thumb></div>
            <div class="gds-form-group__range-thumb gds-form-group__range-thumb--dual" data-gds-range-thumb></div>
        </div>
        <div class="gds-form-group__range-track" data-gds-range-track>
            <div class="gds-form-group__range-selected" data-gds-range-selected></div>
        </div>
    </div>
</div>
<div class="gds-form-group -m-b-1"> <label class="gds-form-group__label" for="range-input-1" >Dual Selector Range Input (Requires JS)</label> <div class="gds-form-group__range-input gds-form-group__range-input--dual" id="range-input-1" data-gds-dual-range-slider data-gds-max-value="100" data-gds-min-value="0"> <div class="gds-form-group__range-wrapper" data-gds-range-wrapper> <div class="gds-form-group__range-thumb gds-form-group__range-thumb--dual" data-gds-range-thumb></div> <div class="gds-form-group__range-thumb gds-form-group__range-thumb--dual" data-gds-range-thumb></div> </div> <div class="gds-form-group__range-track" data-gds-range-track> <div class="gds-form-group__range-selected" data-gds-range-selected></div> </div> </div> </div>

File Upload

File upload inputs allow users to submit local files in a form.

Dan McKenna, Myles O'Connor

gds-form-group__file--xs

gds-form-group__file--sm

gds-form-group__file--lg

<div class="gds-form-group">
    <label class="gds-form-group__label">Basic File Input</label>
    <label class="gds-form-group__file">
        <input class="gds-form-group__file-input" type="file" />
        <span class="gds-form-group__file-indicator" data-button-label="Browse" data-input-label="Example File Input"></span>
    </label>
</div>
<div class="gds-form-group"> <label class="gds-form-group__label">Basic File Input</label> <label class="gds-form-group__file"> <input class="gds-form-group__file-input" type="file" /> <span class="gds-form-group__file-indicator" data-button-label="Browse" data-input-label="Example File Input"></span> </label> </div>

Radio button

Radio button inputs use the following syntax.

Dan McKenna, Myles O'Connor

gds-form-group__radio-indicator--dark

gds-form-group__radio-label--dark

gds-form-group__radio--xs

gds-form-group__radio--sm

<div class="gds-form-group">
    <div class="gds-form-group__radio">
        <label class="gds-form-group__radio-label">
            <input class="gds-form-group__radio-input" type="radio" value="" />
            <span class="gds-form-group__radio-indicator"></span>Radio button
        </label>
    </div>
</div>
<div class="gds-form-group"> <div class="gds-form-group__radio"> <label class="gds-form-group__radio-label"> <input class="gds-form-group__radio-input" type="radio" value="" /> <span class="gds-form-group__radio-indicator"></span>Radio button </label> </div> </div>

Range Slider

Basic Range slider inputs allow users to click and drag one point until a desired value is reached.

Dan McKenna, Myles O'Connor

<div class="gds-form-group">
    <label class="gds-form-group__label" for="range-input-0" >Basic Range Input</label>
    <input class="gds-form-group__range-input" type="range" id='range-input-0' />
</div>
<div class="gds-form-group"> <label class="gds-form-group__label" for="range-input-0" >Basic Range Input</label> <input class="gds-form-group__range-input" type="range" id='range-input-0' /> </div>

Select

Select inputs are used to allow the user to choose a value from a set of options.

Dan McKenna, Myles O'Connor

gds-form-group__select-input--no-border

gds-form-group__select-input--dark

gds-form-group__select-input--primary

gds-form-group__select-input--xs

gds-form-group__select-input--sm

gds-form-group__select-input--lg

gds-form-group__select-multiple

gds-form-group__select-multiple-option

<div class="gds-form-group">
    <label class="gds-form-group__label">Basic Select Input</label>
    <select class="gds-form-group__select-input">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<div class="gds-form-group"> <label class="gds-form-group__label">Basic Select Input</label> <select class="gds-form-group__select-input"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div>

Textarea

Textarea inputs are used for inputting large blocks of text into a form.

Dan McKenna, Myles O'Connor

gds-form-group__text-area-input--resize-h

gds-form-group__text-area-input--resize-v

gds-form-group__text-area-input--no-resize

gds-form-group__text-area-input--dark

gds-form-group__text-area-input--xs

gds-form-group__text-area-input--sm

gds-form-group__text-area-input--lg

<div class="gds-form-group">
    <label class="gds-form-group__label">Example Text Area</label>
    <textarea class="gds-form-group__text-area-input" placeholder="Enter Text"/></textarea>
</div>
<div class="gds-form-group"> <label class="gds-form-group__label">Example Text Area</label> <textarea class="gds-form-group__text-area-input" placeholder="Enter Text"/></textarea> </div>

Toggle Switch

Toggle switches come in two flavors: radio and checkbox. Each one behaves in the same manner as their respective standard input type.

Dan McKenna, Myles O'Connor

gds-form-group__toggleswitch-indicator--dark

gds-form-group__toggleswitch-label--dark

gds-form-group__toggleswitch--xs

gds-form-group__toggleswitch--sm

<!-- Toggle switch - checkbox -->
<div class="gds-form-group__toggleswitch">
    <label class="gds-form-group__toggleswitch-label">
        <input class="gds-form-group__toggleswitch-input" type="checkbox" value="" />
        <span class="gds-form-group__toggleswitch-indicator"></span>Toggle Switch
    </label>
</div>
<!-- Toggle switch - radio button -->
<div class="gds-form-group__toggleswitch">
    <label class="gds-form-group__toggleswitch-label"  gg-label>
        <input class="gds-form-group__toggleswitch-input" type="radio" value="" gg-input/>
        <span class="gds-form-group__toggleswitch-indicator"></span>Toggle Switch
    </label>
</div>
<!-- Toggle switch - checkbox --> <div class="gds-form-group__toggleswitch"> <label class="gds-form-group__toggleswitch-label"> <input class="gds-form-group__toggleswitch-input" type="checkbox" value="" /> <span class="gds-form-group__toggleswitch-indicator"></span>Toggle Switch </label> </div> <!-- Toggle switch - radio button --> <div class="gds-form-group__toggleswitch"> <label class="gds-form-group__toggleswitch-label" gg-label> <input class="gds-form-group__toggleswitch-input" type="radio" value="" gg-input/> <span class="gds-form-group__toggleswitch-indicator"></span>Toggle Switch </label> </div>

Keyboard Shortcuts

The keyboard shortcuts component, prefixed by gds-keyboard-shortcuts, is used to display currently available keyboard shortcuts. This component is hidden by default. To show the component, add gds-keyboard-shortcuts--shown to gds-keyboard-shortcuts.

This component should always include a "Don't show again" button that can be used to permanently hide the component from view by the current user. This setting should be toggle-able from the user's profile or settings page.

Myles O'Connor

gds-keyboard-shortcuts--shown

<div class="gds-keyboard-shortcuts">
    <label class="gds-keyboard-shortcuts__label">Keyboard Shortcuts</label>
    <ul class="-block">
        <li class="-block"><span class="gds-keyboard-shortcuts__trigger">a</span>Main Menu</li>
        <li class="-block"><span class="gds-keyboard-shortcuts__trigger">s</span>Search</li>
    </ul>
    <button class="gds-button gds-button--xs gds-button--block gds-button--primary -m-t-1">Got it, don't show again</button>
</div>
<div class="gds-keyboard-shortcuts"> <label class="gds-keyboard-shortcuts__label">Keyboard Shortcuts</label> <ul class="-block"> <li class="-block"><span class="gds-keyboard-shortcuts__trigger">a</span>Main Menu</li> <li class="-block"><span class="gds-keyboard-shortcuts__trigger">s</span>Search</li> </ul> <button class="gds-button gds-button--xs gds-button--block gds-button--primary -m-t-1">Got it, don't show again</button> </div>

Landing Pad

The landing pad component, prefixed by gds-landing-pad, is a target zone for dragging and dropping items (such as files to be uploaded).

Dan McKenna, Myles O'Connor

Click or Drag Logo Here

gds-landing-pad

gds-landing-pad--active

gds-landing-pad__status

gds-landing-pad__status--success

gds-landing-pad__status--danger

<div class="gds-landing-pad">
    <input class="gds-landing-pad__input" type="file" />
    <div class="gds-landing-pad__icon">
        <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--1"></div>
        <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--2"></div>
        <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--3"></div>
        <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--4"></div>
        <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--5"></div>
        <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--6"></div>
    </div>
    <p class="gds-landing-pad__text">Click or Drag Logo Here</p>
</div>
<div class="gds-landing-pad"> <input class="gds-landing-pad__input" type="file" /> <div class="gds-landing-pad__icon"> <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--1"></div> <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--2"></div> <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--3"></div> <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--4"></div> <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--5"></div> <div class="gds-landing-pad__icon-piece gds-landing-pad__icon-piece--6"></div> </div> <p class="gds-landing-pad__text">Click or Drag Logo Here</p> </div>

Legend

The gds-legend component is used to display the name, color, and potentially the value of data sets. It is generally meant to be paired with a chart or graph although other use cases may arise. Color values for each data set should be assigned via data attributes that correspond to predefined DS colors - including 4 levels of tint and shade for each color Other modifiers change the positioning and orientation of items, sizing, and the shape of color swatches.

Dan McKenna

  • Label
  • Label
  • Label
  • Label

gds-legend

gds-legend--overlay

gds-legend--overlay-center

gds-legend__items--stacked

gds-legend__item--stacked

gds-legend__value--md

gds-legend__value--xs

gds-legend__value--sm

gds-legend__value--lg

gds-legend__value--xl

gds-legend__swatch--tip

gds-legend__swatch--square

data-gds-color=red

data-gds-color=red-dk-1

data-gds-color=red-dk-2

data-gds-color=red-dk-3

data-gds-color=red-dk-4

data-gds-color=red-lt-1

data-gds-color=red-lt-2

data-gds-color=red-lt-3

data-gds-color=red-lt-4

data-gds-color=green

data-gds-color=green-dk-1

data-gds-color=green-dk-2

data-gds-color=green-dk-3

data-gds-color=green-dk-4

data-gds-color=green-lt-1

data-gds-color=green-lt-2

data-gds-color=green-lt-3

data-gds-color=green-lt-4

data-gds-color=blue

data-gds-color=blue-dk-1

data-gds-color=blue-dk-2

data-gds-color=blue-dk-3

data-gds-color=blue-dk-4

data-gds-color=blue-lt-1

data-gds-color=blue-lt-2

data-gds-color=blue-lt-3

data-gds-color=blue-lt-4

data-gds-color=gold

data-gds-color=gold-dk-1

data-gds-color=gold-dk-2

data-gds-color=gold-dk-3

data-gds-color=gold-dk-4

data-gds-color=gold-lt-1

data-gds-color=gold-lt-2

data-gds-color=gold-lt-3

data-gds-color=gold-lt-4

data-gds-color=purple

data-gds-color=purple-dk-1

data-gds-color=purple-dk-2

data-gds-color=purple-dk-3

data-gds-color=purple-dk-4

data-gds-color=purple-lt-1

data-gds-color=purple-lt-2

data-gds-color=purple-lt-3

data-gds-color=purple-lt-4

data-gds-color=dkgreen

data-gds-color=dkgreen-dk-1

data-gds-color=dkgreen-dk-2

data-gds-color=dkgreen-dk-3

data-gds-color=dkgreen-dk-4

data-gds-color=dkgreen-lt-1

data-gds-color=dkgreen-lt-2

data-gds-color=dkgreen-lt-3

data-gds-color=dkgreen-lt-4

data-gds-color=orange

data-gds-color=orange-dk-1

data-gds-color=orange-dk-2

data-gds-color=orange-dk-3

data-gds-color=orange-dk-4

data-gds-color=orange-lt-1

data-gds-color=orange-lt-2

data-gds-color=orange-lt-3

data-gds-color=orange-lt-4

<div class="gds-legend">
    <ul class="gds-legend__items">
        <li class="gds-legend__item">
            <span class="gds-legend__swatch" data-gds-color="red"></span>
            <span class="gds-legend__label">Label</span>
        </li>
        <li class="gds-legend__item">
            <span class="gds-legend__swatch" data-gds-color="green"></span>
            <span class="gds-legend__label">Label</span>
        </li>
        <li class="gds-legend__item">
            <span class="gds-legend__swatch" data-gds-color="blue"></span>
            <span class="gds-legend__label">Label</span>
        </li>
        <li class="gds-legend__item">
            <span class="gds-legend__swatch" data-gds-color="gold"></span>
            <span class="gds-legend__label">Label</span>
        </li>
    </ul>
</div>
<div class="gds-legend"> <ul class="gds-legend__items"> <li class="gds-legend__item"> <span class="gds-legend__swatch" data-gds-color="red"></span> <span class="gds-legend__label">Label</span> </li> <li class="gds-legend__item"> <span class="gds-legend__swatch" data-gds-color="green"></span> <span class="gds-legend__label">Label</span> </li> <li class="gds-legend__item"> <span class="gds-legend__swatch" data-gds-color="blue"></span> <span class="gds-legend__label">Label</span> </li> <li class="gds-legend__item"> <span class="gds-legend__swatch" data-gds-color="gold"></span> <span class="gds-legend__label">Label</span> </li> </ul> </div>

Modal

The modal component, prefixed by gds-modal, is the standard pop-up element for accepting user input. For a transparent backdrop behind the modal window, gds-modal should be wrapped in a gds-modal__overlay element.

To show the modal, add gds-modal--shown to gds-modal__overlay.

Important: When the modal is shown, please add -has-modal to the <body> element to restrict vertical scrolling to the modal window only.

Myles O'Connor

gds-modal

gds-modal--shown

gds-modal--dark

gds-modal__form

gds-modal__header--dark

gds-modal__footer--dark

gds-modal__overlay

<div class="gds-modal__overlay gds-modal--shown" data-element="modal-example">
    <div class="gds-modal gds-layout__column--md-12">
        <form class="gds-modal__form">
            <div class="gds-modal__header">
                <h2 class="gds-modal__title gds-text--header-sm">Modal title goes here...</h2>
                <button class="gds-modal__close-button" data-toggle="modal"></button>
            </div>
            <div class="gds-modal__body">
                <p class="-m-b-3">Modal body content goes here.</p>
            </div>
            <div class="gds-modal__footer -text-right">
                <button class="gds-button gds-button--default gds-button--block-sm -m-b-3-sm -m-r-3">Cancel</button><button class="gds-button gds-button--primary gds-button--block-sm">Save Changes</button>
            </div>
        </form>
    </div>
</div>
<div class="gds-modal__overlay gds-modal--shown" data-element="modal-example"> <div class="gds-modal gds-layout__column--md-12"> <form class="gds-modal__form"> <div class="gds-modal__header"> <h2 class="gds-modal__title gds-text--header-sm">Modal title goes here...</h2> <button class="gds-modal__close-button" data-toggle="modal"></button> </div> <div class="gds-modal__body"> <p class="-m-b-3">Modal body content goes here.</p> </div> <div class="gds-modal__footer -text-right"> <button class="gds-button gds-button--default gds-button--block-sm -m-b-3-sm -m-r-3">Cancel</button><button class="gds-button gds-button--primary gds-button--block-sm">Save Changes</button> </div> </form> </div> </div>

Multi-Select

The multi-select component, prefixed by gds-multi-select, is a dropdown menu for selecting multiple options. To open the menu, add the gds-button-dropdown--active class to gds-multi-select.

Dan McKenna

Multi-select

gds-multi-select

gds-multi-select--sm

gds-multi-select--xs

gds-multi-select__button--sm

gds-multi-select__button--xs

<div class="gds-multi-select" data-gds-dropdown>
    <div class="gds-multi-select__button" data-gds-dropdown-button>Multi-select</div>
    <ul class="gds-multi-select__menu">
        <li class="gds-multi-select__menu-item">
            <div class="gds-multi-select__menu-link">
                <div class="gds-form-group gds-multi-select__option" data-gds-form-group>
                    <div class="gds-form-group__checkbox">
                        <label class="gds-form-group__checkbox-label" data-gds-label>
                            <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input>
                            <span class="gds-form-group__checkbox-indicator"></span>Check All
                        </label>
                    </div>
                </div>
            </div>
        </li>
        <li class="gds-button-dropdown__divider"></li>
        <li class="gds-multi-select__menu-item">
            <div class="gds-multi-select__menu-link gds-multi-select__menu-link--collapsable" data-gds-nested-dropdown>
                <div class="gds-form-group gds-multi-select__option" data-gds-form-group>
                    <div class="gds-form-group__checkbox">
                        <label class="gds-form-group__checkbox-label" data-gds-label>
                            <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input>
                            <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option
                        </label>
                    </div>
                </div>
                <div class="gds-multi-select__sub-menu" data-gds-nested-menu>
                    <div class="gds-multi-select__menu-link">
                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group>
                            <div class="gds-form-group__checkbox">
                                <label class="gds-form-group__checkbox-label" data-gds-label>
                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input>
                                    <span class="gds-form-group__checkbox-indicator"></span>Sub-Menu Checkbox Option
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="gds-multi-select__menu-link">
                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group>
                            <div class="gds-form-group__checkbox">
                                <label class="gds-form-group__checkbox-label" data-gds-label>
                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input>
                                    <span class="gds-form-group__checkbox-indicator"></span>Sub-Menu Checkbox Option
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="gds-button-dropdown__divider"></li>
        <li class="gds-multi-select__menu-item">
            <div class="gds-multi-select__menu-link">
                <div class="gds-form-group gds-multi-select__option" data-gds-form-group>
                    <div class="gds-form-group__checkbox">
                        <label class="gds-form-group__checkbox-label" data-gds-label>
                            <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input>
                            <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option
                        </label>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="gds-multi-select" data-gds-dropdown> <div class="gds-multi-select__button" data-gds-dropdown-button>Multi-select</div> <ul class="gds-multi-select__menu"> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input> <span class="gds-form-group__checkbox-indicator"></span>Check All </label> </div> </div> </div> </li> <li class="gds-button-dropdown__divider"></li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link gds-multi-select__menu-link--collapsable" data-gds-nested-dropdown> <div class="gds-form-group gds-multi-select__option" data-gds-form-group> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option </label> </div> </div> <div class="gds-multi-select__sub-menu" data-gds-nested-menu> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input> <span class="gds-form-group__checkbox-indicator"></span>Sub-Menu Checkbox Option </label> </div> </div> </div> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input> <span class="gds-form-group__checkbox-indicator"></span>Sub-Menu Checkbox Option </label> </div> </div> </div> </div> </div> </li> <li class="gds-button-dropdown__divider"></li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option </label> </div> </div> </div> </li> </ul> </div>

Nav

Navigation elements should be placed semantically within <nav> tags. For smaller tab navigation, add gds-nav-tabs--sm class to gds-nav-tabs. For larger tab navigation, add gds-nav-tabs--lg class to gds-nav-tabs.

Dan McKenna, Myles O'Connor

Tab one content goes here.
Tab two content goes here.
Tab three content goes here.
Tab four content goes here.

gds-nav

gds-nav-tabs--sm

gds-nav-tabs--lg

gds-nav-tabs--stacked

gds-nav-tabs--no-resp

gds-nav-tabs--dark

gds-nav-tabs__link--dark

<nav>
    <ul class="gds-nav-tabs" data-gds-nav="1">
        <li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--active" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="1" data-gds-nav-type="tab">One</a></li><!--
        --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="2" data-gds-nav-type="tab">Two</a></li><!--
        --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="3" data-gds-nav-type="tab">Three</a></li><!--
        --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--disabled" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="4" data-gds-nav-type="tab">Disabled</a></li>
    </ul>
</nav>
<section data-gds-nav-contents="1">
    <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div>
    <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div>
    <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div>
    <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div>
</section>
<nav> <ul class="gds-nav-tabs" data-gds-nav="1"> <li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--active" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="1" data-gds-nav-type="tab">One</a></li><!-- --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="2" data-gds-nav-type="tab">Two</a></li><!-- --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="3" data-gds-nav-type="tab">Three</a></li><!-- --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--disabled" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="4" data-gds-nav-type="tab">Disabled</a></li> </ul> </nav> <section data-gds-nav-contents="1"> <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div> <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div> <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div> <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div> </section>

Justified

For justified tabs, use gds-nav-tabs--justified.

Dan McKenna, Myles O'Connor

Tab one content goes here.
Tab two content goes here.
Tab three content goes here.
Tab four content goes here.
<nav>
    <ul class="gds-nav-tabs gds-nav-tabs--justified" data-gds-nav="3">
        <li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--active" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button data-gds-nav-button="1" data-gds-nav-type="tab">One</a></li><!--
        --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="2" data-gds-nav-type="tab">Two</a></li><!--
        --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="3" data-gds-nav-type="tab">Three</a></li><!--
        --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--disabled" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="4" data-gds-nav-type="tab">Disabled</a></li>
    </ul>
</nav>
<section data-gds-nav-contents="3">
    <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div>
    <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div>
    <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div>
    <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div>
</section>
<nav> <ul class="gds-nav-tabs gds-nav-tabs--justified" data-gds-nav="3"> <li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--active" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button data-gds-nav-button="1" data-gds-nav-type="tab">One</a></li><!-- --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="2" data-gds-nav-type="tab">Two</a></li><!-- --><li class="gds-nav-tabs__list-item" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="3" data-gds-nav-type="tab">Three</a></li><!-- --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--disabled" data-gds-nav-item><a class="gds-nav-tabs__link" data-gds-nav-button="4" data-gds-nav-type="tab">Disabled</a></li> </ul> </nav> <section data-gds-nav-contents="3"> <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div> <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div> <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div> <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div> </section>

Pill

For pill nav, use gds-nav-pills.

Dan McKenna, Myles O'Connor

Tab one content goes here.
Tab two content goes here.
Tab three content goes here.
Tab four content goes here.

gds-nav-pills--sm

gds-nav-pills--lg

gds-nav-pills--dark

gds-nav-pills__link--dark

<nav>
    <ul class="gds-nav-pills" data-gds-nav="4">
        <li class="gds-nav-pills__list-item gds-nav-pills__list-item--active" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="1" data-gds-nav-type="pill">One</a></li><!--
        --><li class="gds-nav-pills__list-item" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="2" data-gds-nav-type="pill">Two</a></li><!--
        --><li class="gds-nav-pills__list-item" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="3" data-gds-nav-type="pill">Three</a></li><!--
        --><li class="gds-nav-pills__list-item gds-nav-pills__list-item--disabled" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="4" data-gds-nav-type="pill">Disabled</a></li>
    </ul>
</nav>
<section data-gds-nav-contents="4">
    <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div>
    <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div>
    <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div>
    <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div>
</section>
<nav> <ul class="gds-nav-pills" data-gds-nav="4"> <li class="gds-nav-pills__list-item gds-nav-pills__list-item--active" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="1" data-gds-nav-type="pill">One</a></li><!-- --><li class="gds-nav-pills__list-item" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="2" data-gds-nav-type="pill">Two</a></li><!-- --><li class="gds-nav-pills__list-item" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="3" data-gds-nav-type="pill">Three</a></li><!-- --><li class="gds-nav-pills__list-item gds-nav-pills__list-item--disabled" data-gds-nav-item><a class="gds-nav-pills__link" data-gds-nav-button="4" data-gds-nav-type="pill">Disabled</a></li> </ul> </nav> <section data-gds-nav-contents="4"> <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div> <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div> <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div> <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div> </section>

Underline

For alternate, underlined tabs, use gds-nav-tabs--underline.

Dan McKenna, Myles O'Connor

Tab one content goes here.
Tab two content goes here.
Tab three content goes here.
Tab four content goes here.
<nav>
    <ul class="gds-nav-tabs gds-nav-tabs--underline" data-gds-nav="2">
        <li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline gds-nav-tabs__list-item--active" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs--underline__link" data-gds-nav-button="1" data-gds-nav-type="tab">One</a></li><!--
        --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs__link--underline" data-gds-nav-button="2" data-gds-nav-type="tab">Two</a></li><!--
        --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs__link--underline" data-gds-nav-button="3" data-gds-nav-type="tab">Three</a></li><!--
        --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline gds-nav-tabs__list-item--disabled" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs__link--underline" data-gds-nav-button="4" data-gds-nav-type="tab">Disabled</a></li>
    </ul>
</nav>
<section data-gds-nav-contents="2">
    <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div>
    <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div>
    <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div>
    <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div>
</section>
<nav> <ul class="gds-nav-tabs gds-nav-tabs--underline" data-gds-nav="2"> <li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline gds-nav-tabs__list-item--active" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs--underline__link" data-gds-nav-button="1" data-gds-nav-type="tab">One</a></li><!-- --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs__link--underline" data-gds-nav-button="2" data-gds-nav-type="tab">Two</a></li><!-- --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs__link--underline" data-gds-nav-button="3" data-gds-nav-type="tab">Three</a></li><!-- --><li class="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline gds-nav-tabs__list-item--disabled" data-gds-nav-item><a class="gds-nav-tabs__link gds-nav-tabs__link--underline" data-gds-nav-button="4" data-gds-nav-type="tab">Disabled</a></li> </ul> </nav> <section data-gds-nav-contents="2"> <div class="-block" data-gds-nav-content="1">Tab one content goes here.</div> <div class="-none" data-gds-nav-content="2">Tab two content goes here.</div> <div class="-none" data-gds-nav-content="3">Tab three content goes here.</div> <div class="-none" data-gds-nav-content="4">Tab four content goes here.</div> </section>

Pagination

The pagination component is prefixed by gds-pagination. It should be placed semantically within a <nav> element. Use gds-pagination__page-item--active on the currently selected page number.

Dan McKenna

gds-pagination

gds-pagination--xs

gds-pagination--sm

gds-pagination--lg

gds-pagination--xl

<nav>
    <ul class="gds-pagination gds-pagination--mobile-arrows gds-pagination--fixed">
        <li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed" data-page-change='prev'><span class="-vis-hidden">&laquo;</span><span class="-sr-only">Previous</span></a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed gds-pagination__page-item--active"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">1</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">2</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">3</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">4</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">5</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">6</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">7</a></li><!--
        --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed" data-page-change='next'><span class="-vis-hidden" aria-hidden="true">&raquo;</span><span class="-sr-only">Next</span></a></li>
        <span class='gds-pagination__page-indicator'></span>
    </ul>
</nav>
<nav> <ul class="gds-pagination gds-pagination--mobile-arrows gds-pagination--fixed"> <li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed" data-page-change='prev'><span class="-vis-hidden">&laquo;</span><span class="-sr-only">Previous</span></a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed gds-pagination__page-item--active"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">1</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">2</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">3</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">4</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">5</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">6</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed">7</a></li><!-- --><li class="gds-pagination__page-item gds-pagination__page-item--fixed"><a class="gds-pagination__page-link gds-pagination__page-link--fixed" data-page-change='next'><span class="-vis-hidden" aria-hidden="true">&raquo;</span><span class="-sr-only">Next</span></a></li> <span class='gds-pagination__page-indicator'></span> </ul> </nav>

Radio Block

The radio block component, prefixed by gds-radio-block, is a group of buttons. The user can only select one button at a time. The current theme's primary color is used for the active button state by default.

Dan McKenna, Myles O'Connor

gds-radio-block

gds-radio-block--dark

gds-radio-block__button--secondary

gds-radio-block__button--tertiary

gds-radio-block__button--quaternary

gds-radio-block__button--sm

gds-radio-block__button--lg

gds-radio-block__button--active

gds-radio-block__button--no-pad

<div class="gds-radio-block">
    <button class="gds-radio-block__button">
        <span class="gds-radio-block__button-text">Background</span>
    </button>
    <button class="gds-radio-block__button gds-radio-block__button--active">
        <span class="gds-radio-block__button-text">Foreground</span>
    </button>
</div>
<div class="gds-radio-block"> <button class="gds-radio-block__button"> <span class="gds-radio-block__button-text">Background</span> </button> <button class="gds-radio-block__button gds-radio-block__button--active"> <span class="gds-radio-block__button-text">Foreground</span> </button> </div>

Ranker

The ranker component is used to display a set of objects in a ranker order. The value of the rank, the type object, and the number of rankings, are all customizable. At smallers sizes, the module switches from a horizontal orientation to a vertical one.

Dan McKenna

  • 1
  • 2
  • 3
  • 4
  • 5

gds-ranker

gds-ranker--no-line

gds-ranker--vertical

gds-ranker--lg

gds-ranker--xl

gds-ranker__image--secondary

gds-ranker__image--tertiary

gds-ranker__image--lg

gds-ranker__image--xl

gds-ranker__item-number--secondary

gds-ranker__item-number--tertiary

gds-ranker__list--vertical

gds-ranker__list--vertical-inverted

gds-ranker__connector--inverted

gds-ranker__connector--lg

gds-ranker__connector--xl

gds-ranker__connector--vertical

gds-ranker__connector--vertical-lg

gds-ranker__connector--vertical-xl

gds-ranker__connector--vertical-inverted

gds-ranker__item-label--secondary

gds-ranker__item-label--tertiary

gds-ranker__item-label--lg

gds-ranker__item-label--xl

gds-ranker__item-label--inverted

gds-ranker__item-label--vertical

gds-ranker__item-label--vertical-inverted

gds-ranker__item--lg

gds-ranker__item--xl

gds-ranker__item--inverted

gds-ranker__item--vertical

gds-ranker__item--vertical-lg

gds-ranker__item--vertical-xl

gds-ranker__item--vertical-inverted

gds-ranker__item-icon--lg

gds-ranker__item-icon--xl

gds-ranker__item-icon--vertical-lg

gds-ranker__item-icon--vertical-xl

gds-ranker__item-number--lg

gds-ranker__item-number--xl

gds-ranker__item-number--vertical

gds-ranker__item-number--vertical-lg

gds-ranker__item-number--vertical-xl

<div class="gds-ranker">
    <ul class="gds-ranker__list">
        <li class="gds-ranker__item">
            <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
            </div>
            <div class="gds-ranker__item-number">1</div>
        </li><!--
        --><li class="gds-ranker__item">
            <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
            </div>
            <div class="gds-ranker__item-number">2</div>
        </li><!--
        --><li class="gds-ranker__item">
            <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
            </div>
            <div class="gds-ranker__item-number">3</div>
        </li><!--
        --><li class="gds-ranker__item">
            <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
            </div>
            <div class="gds-ranker__item-number">4</div>
        </li><!--
        --><li class="gds-ranker__item">
            <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
            </div>
            <div class="gds-ranker__item-number">5</div>
        </li>
    </ul>
    <div class="gds-ranker__connector"></div>
</div>
<div class="gds-ranker"> <ul class="gds-ranker__list"> <li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" /> </div> <div class="gds-ranker__item-number">1</div> </li><!-- --><li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" /> </div> <div class="gds-ranker__item-number">2</div> </li><!-- --><li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" /> </div> <div class="gds-ranker__item-number">3</div> </li><!-- --><li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" /> </div> <div class="gds-ranker__item-number">4</div> </li><!-- --><li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" /> </div> <div class="gds-ranker__item-number">5</div> </li> </ul> <div class="gds-ranker__connector"></div> </div>

Ranker Ensign

The ranker ensign component, prefixed by gds-ranker-ensign, is used to represent a brand, team, person, etc that holds a specific rank. It will generally be used in conjunction with a ranker grid and or a leaderboard component to show how a specific set of items ranks against one another

Jarrod Dowalter

Golden State Warriors
15 th

gds-ranker-ensign

gds-ranker-ensign--secondary

gds-ranker-ensign--tertiary

gds-ranker-ensign--xs

gds-ranker-ensign--sm

gds-ranker-ensign--lg

gds-ranker-ensign--xl

gds-ranker-ensign__thumbnail--secondary

gds-ranker-ensign__thumbnail--tertiary

gds-ranker-ensign__thumbnail--xs

gds-ranker-ensign__thumbnail--sm

gds-ranker-ensign__thumbnail--lg

gds-ranker-ensign__thumbnail--xl

gds-ranker-ensign__label--xs

gds-ranker-ensign__label--sm

gds-ranker-ensign__label--lg

gds-ranker-ensign__label--xl

gds-ranker-ensign__title--secondary

gds-ranker-ensign__title--tertiary

gds-ranker-ensign__title--xs

gds-ranker-ensign__title--sm

gds-ranker-ensign__title--lg

gds-ranker-ensign__title--xl

gds-ranker-ensign__number--sup

<div class="gds-ranker-ensign">
    <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
    <div class="gds-ranker-ensign__content">
        <span class="gds-ranker-ensign__label">Golden State</span>
        <span class="gds-ranker-ensign__title">Warriors</span>
    </div>
    <span class="gds-ranker-ensign__number">15 <sup class="gds-ranker-ensign__number--sup">th</sup></span>
</div>
<div class="gds-ranker-ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State</span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number">15 <sup class="gds-ranker-ensign__number--sup">th</sup></span> </div>

Search-Select

The Search Select component, prefixed by gds-search-select, is a combination of a text input, select input, and multi-select component. It has two modes: single and multi select. The text input is used to narrow down the set of dropdown choices associated with the input.

Dan McKenna

gds-search-select

gds-search-select--success

gds-search-select--warning

gds-search-select--danger

gds-search-select__input--sm

gds-search-select__input--has-tag

gds-search-select__input--has-help

gds-search-select__input--has-tag-sm

gds-search-select--open

gds-search-select__tag-indicator--sm

gds-search-select__tag-holder--bubble

gds-search-select__tag-holder--bubble-sm

gds-search-select__tag-holder--bubble-active

gds-search-select__clear--sm

<form class="gds-form">
    <div class="gds-form-group" data-gds-form-group>
        <label class="gds-form-group__label" for="searcchselect-input-0">Multi-Value Search Select</label>
        <div class="gds-search-select gds-search-select--open">
            <div class="gds-search-select__control" data-gds-search-select-control>
                <div class="gds-search-select__tag-indicator gds-search-select__tag-indicator--sm gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-tag-indicator=""><span>5 Selected</span><button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div>
                <input id="searcchselect-input-0" type="text" placeholder="Choose a State..." class="gds-search-select__input gds-search-select__input--sm gds-search-select__input--has-tag-sm" data-gds-search-select-input autocomplete="off"/>
                <button class="gds-search-select__toggle-button" data-gds-search-select-toggle></button>
                <small class="gds-search-select__text-help">This is some hint text</small>
            </div>
            <div class="gds-search-select__tag-holder gds-search-select__tag-holder--bubble gds-search-select__tag-holder--bubble-sm gds-search-select__tag-holder--bubble-active" data-gds-search-select-tag-holder>
                <div class="gds-search-select__tag-overflow">
                    <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Arkansas<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div>
                    <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">California<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div>
                    <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Mississippi<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div>
                    <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Montana<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div>
                    <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Wyoming<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div>
                </div>
            </div>
            <div class="gds-search-select__menu" data-gds-search-select-menu>
                <ul class="gds-search-select__menu-items" data-gds-search-select-list>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="0">Alaska</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="1">Arizona</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="2">Arkansas</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="3">California</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="4">Colorado</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="5">Connecticut</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="6">Deleware</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="7">DC</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="8">Florida</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="9">Georgia</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="10">Hawaii</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="11">Idaho</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="12">Illinois</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="13">Indiana</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="14">Iowa</li>
                    <li class="gds-search-select__menu-item" data-gds-search-select-item="15">Kansas</li>
                </ul>
            </div>
        </div>
    </div>
</form>
<form class="gds-form"> <div class="gds-form-group" data-gds-form-group> <label class="gds-form-group__label" for="searcchselect-input-0">Multi-Value Search Select</label> <div class="gds-search-select gds-search-select--open"> <div class="gds-search-select__control" data-gds-search-select-control> <div class="gds-search-select__tag-indicator gds-search-select__tag-indicator--sm gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-tag-indicator=""><span>5 Selected</span><button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div> <input id="searcchselect-input-0" type="text" placeholder="Choose a State..." class="gds-search-select__input gds-search-select__input--sm gds-search-select__input--has-tag-sm" data-gds-search-select-input autocomplete="off"/> <button class="gds-search-select__toggle-button" data-gds-search-select-toggle></button> <small class="gds-search-select__text-help">This is some hint text</small> </div> <div class="gds-search-select__tag-holder gds-search-select__tag-holder--bubble gds-search-select__tag-holder--bubble-sm gds-search-select__tag-holder--bubble-active" data-gds-search-select-tag-holder> <div class="gds-search-select__tag-overflow"> <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Arkansas<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div> <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">California<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div> <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Mississippi<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div> <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Montana<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div> <div class="-m-a-1 gds-tag gds-tag--xs gds-tag--primary gds-tag--with-button gds-tag--with-button-xs" data-gds-search-select-tag="null">Wyoming<button class="gds-tag__option gds-tag__option--xs gds-tag__option--primary"><i class="btl bt-fw bt-times"></i></button></div> </div> </div> <div class="gds-search-select__menu" data-gds-search-select-menu> <ul class="gds-search-select__menu-items" data-gds-search-select-list> <li class="gds-search-select__menu-item" data-gds-search-select-item="0">Alaska</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="1">Arizona</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="2">Arkansas</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="3">California</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="4">Colorado</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="5">Connecticut</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="6">Deleware</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="7">DC</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="8">Florida</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="9">Georgia</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="10">Hawaii</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="11">Idaho</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="12">Illinois</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="13">Indiana</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="14">Iowa</li> <li class="gds-search-select__menu-item" data-gds-search-select-item="15">Kansas</li> </ul> </div> </div> </div> </form>

Slab-Nav

The slab nav component, prefixed by gds-slab-nav is used when you need an especially bold signposting on your sub-page navigation. It can be displayed both horizontally and vertically, in light and dark modes, and both in standard and justified layouts. The navigation also supports the full set of sizes.

Dan McKenna

  • Nav Label

  • Nav Label

    23
  • Nav Label

  • Nav Label

Content goes here

gds-slab-nav--vertical

gds-slab-nav--dark

gds-slab-nav__items--vertical

gds-slab-nav__items--justify

gds-slab-nav__item--justify

gds-slab-nav__item--xs

gds-slab-nav__item--sm

gds-slab-nav__item--lg

gds-slab-nav__item--xl

gds-slab-nav__item--vertical

gds-slab-nav__item--active

gds-slab-nav__item--secondary

gds-slab-nav__item--tertiary

gds-slab-nav__item--quaternary

gds-slab-nav__item-icon--xs

gds-slab-nav__item-icon--sm

gds-slab-nav__item-icon--lg

gds-slab-nav__item-icon--xl

gds-slab-nav__item-label--xs

gds-slab-nav__item-label--sm

gds-slab-nav__item-label--lg

gds-slab-nav__item-label--xl

<div class="gds-card">
    <div class="gds-slab-nav">
        <ul class="gds-slab-nav__items">
            <li class="gds-slab-nav__item gds-slab-nav__item--active">
                <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i>
                <h4 class="gds-slab-nav__item-label">Nav Label</h4>
            </li>
            <li class="gds-slab-nav__item gds-slab-nav__item--secondary">
                <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i>
                <h4 class="gds-slab-nav__item-label">Nav Label</h4>
                <div class="gds-slab-nav__item-indicator">
                    <span class="gds-slab-nav__item-badge">23</span>
                </div>
            </li>
            <li class="gds-slab-nav__item gds-slab-nav__item--tertiary">
                <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i>
                <h4 class="gds-slab-nav__item-label">Nav Label</h4>
            </li>
            <li class="gds-slab-nav__item gds-slab-nav__item--quaternary">
                <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i>
                <h4 class="gds-slab-nav__item-label">Nav Label</h4>
                <div class="gds-slab-nav__item-indicator">
                    <i class="gds-slab-nav__item-warning fa fa-fw fa-exclamation-circle"></i>
                </div>
            </li>
        </ul>
    </div>
    <div class="gds-card__block -p-v-6 gds-flex gds-flex--justify-center gds-flex--align-center">
        <span class="gds-text--header-md">Content goes here</span>
    </div>
</div>
<div class="gds-card"> <div class="gds-slab-nav"> <ul class="gds-slab-nav__items"> <li class="gds-slab-nav__item gds-slab-nav__item--active"> <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i> <h4 class="gds-slab-nav__item-label">Nav Label</h4> </li> <li class="gds-slab-nav__item gds-slab-nav__item--secondary"> <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i> <h4 class="gds-slab-nav__item-label">Nav Label</h4> <div class="gds-slab-nav__item-indicator"> <span class="gds-slab-nav__item-badge">23</span> </div> </li> <li class="gds-slab-nav__item gds-slab-nav__item--tertiary"> <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i> <h4 class="gds-slab-nav__item-label">Nav Label</h4> </li> <li class="gds-slab-nav__item gds-slab-nav__item--quaternary"> <i class="gds-slab-nav__item-icon fa fa-fw fa-bullhorn" aria-hidden="true"></i> <h4 class="gds-slab-nav__item-label">Nav Label</h4> <div class="gds-slab-nav__item-indicator"> <i class="gds-slab-nav__item-warning fa fa-fw fa-exclamation-circle"></i> </div> </li> </ul> </div> <div class="gds-card__block -p-v-6 gds-flex gds-flex--justify-center gds-flex--align-center"> <span class="gds-text--header-md">Content goes here</span> </div> </div>

Table

The table component is prefixed by gds-table. It is used to style standard <table> elements.

For a better experience on mobile, wrap the gds-table with a gds-table--responsive element. This allows the user to scroll through the table horizontally on their mobile device.

Dan McKenna, Myles O'Connor

# First Name Last Name Username (selected)
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Selected Row the Bird @twitter
4 Disabled Row Otto @mdo

gds-table

gds-table--sm

gds-table--xs

gds-table--lg

gds-table--xl

gds-table--striped

gds-table--inverse

gds-table--inverse-striped

gds-table--responsive

gds-table__header--sort-desc

gds-table__header--sort-asc

gds-table__header--selected

gds-table__header--secondary

gds-table__row--selected

gds-table__row--secondary-selected

gds-table__row--disabled

gds-table__row--inverse

gds-table__row--inverse-selected

gds-table__row--inverse-disabled

<div class="gds-table--responsive">
    <table class="gds-table">
        <thead>
            <tr class="gds-table__row">
                <th class="gds-table__header">#</th>
                <th class="gds-table__header -text-left">First Name</th>
                <th class="gds-table__header -text-left">Last Name</th>
                <th class="gds-table__header gds-table__header--selected -text-left">Username (selected)</th>
            </tr>
        </thead>
        <tbody>
            <tr class="gds-table__row">
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr class="gds-table__row">
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr class="gds-table__row gds-table__row--selected">
                <th scope="row">3</th>
                <td>Selected Row</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr class="gds-table__row gds-table__row--disabled">
                <th scope="row">4</th>
                <td>Disabled Row</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="gds-table--responsive"> <table class="gds-table"> <thead> <tr class="gds-table__row"> <th class="gds-table__header">#</th> <th class="gds-table__header -text-left">First Name</th> <th class="gds-table__header -text-left">Last Name</th> <th class="gds-table__header gds-table__header--selected -text-left">Username (selected)</th> </tr> </thead> <tbody> <tr class="gds-table__row"> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr class="gds-table__row"> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr class="gds-table__row gds-table__row--selected"> <th scope="row">3</th> <td>Selected Row</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr class="gds-table__row gds-table__row--disabled"> <th scope="row">4</th> <td>Disabled Row</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> </table> </div>

Colored Cells

To indicate positive (green), neutral (yellow), or negative (red) states on a table cell, use the gds-table__cell--positive, gds-table__cell--neutral & gds-table__cell--negative classes.

Dan McKenna, Myles O'Connor

# First Name Last Name Username (selected)
1 Mark Otto @mdo
<div class="gds-table--responsive">
    <table class="gds-table">
        <thead>
            <tr class="gds-table__row">
                <th class="gds-table__header">#</th>
                <th class="gds-table__header -text-left">First Name</th>
                <th class="gds-table__header -text-left">Last Name</th>
                <th class="gds-table__header gds-table__header--selected -text-left">Username (selected)</th>
            </tr>
        </thead>
        <tbody>
            <tr class="gds-table__row">
                <th scope="row">1</th>
                <td class="gds-table__cell--positive">Mark</td>
                <td class="gds-table__cell--neutral">Otto</td>
                <td class="gds-table__cell--negative">@mdo</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="gds-table--responsive"> <table class="gds-table"> <thead> <tr class="gds-table__row"> <th class="gds-table__header">#</th> <th class="gds-table__header -text-left">First Name</th> <th class="gds-table__header -text-left">Last Name</th> <th class="gds-table__header gds-table__header--selected -text-left">Username (selected)</th> </tr> </thead> <tbody> <tr class="gds-table__row"> <th scope="row">1</th> <td class="gds-table__cell--positive">Mark</td> <td class="gds-table__cell--neutral">Otto</td> <td class="gds-table__cell--negative">@mdo</td> </tr> </tbody> </table> </div>

Tree

The tree component, prefixed by gds-tree, is used to display hierarchical information.

Dan McKenna, Myles O'Connor, Mike Watt

  • Golden State Warriors
    • Nike
      • Scoreboard LED
      • Basket Stanchion
      • Arena LED
    • Kia
      • Scoreboard LED
      • Basket Stanchion
      • Arena LED

gds-tree

gds-tree--dark

gds-tree__link--active

gds-tree__link--primary

gds-tree__link--secondary

gds-tree__link--tertiary

gds-tree__link--quaternary

<ul>
    <li>
        <span class="gds-tree__link gds-tree__link--active gds-tree__link--secondary">
            Golden State Warriors<i class="gds-tree__status-icon fa fa-fw fa-caret-left"></i>
        </span>
        <ul class="gds-tree__sub-nav">
            <li class="gds-tree__sub-item">
                <span class="gds-tree__link gds-tree__link--active gds-tree__link--tertiary gds-tree__link--btn-options">
                    Nike<i class="gds-tree__status-icon fa fa-fw fa-caret-left"></i>
                    <button class="gds-tree__link-option">
                        <i class="fa fa-fw fa-trash"></i>
                    </button>
                </span>
                <ul class="gds-tree__sub-nav">
                    <li class="gds-tree__sub-item">
                        <span class="gds-tree__link gds-tree__link--active gds-tree__link--primary">
                            Scoreboard LED<i class="gds-tree__status-icon fa fa-fw fa-caret-left"></i>
                            <button class="gds-tree__link-option">
                                <i class="fa fa-fw fa-trash"></i>
                            </button>
                        </span>
                    </li>
                    <li class="gds-tree__sub-item">
                        <span class="gds-tree__link gds-tree__link--primary">
                            Basket Stanchion<i class="gds-tree__status-icon fa fa-fw fa-check -m-l-1"></i>
                            <button class="gds-tree__link-option">
                                <i class="fa fa-fw fa-trash"></i>
                            </button>
                        </span>
                    </li>
                    <li class="gds-tree__sub-item">
                        <span class="gds-tree__link gds-tree__link--primary">
                            Arena LED<i class="gds-tree__status-icon fa fa-fw fa-check -m-l-1"></i>
                            <button class="gds-tree__link-option">
                                <i class="fa fa-fw fa-trash"></i>
                            </button>
                        </span>
                    </li>
                </ul>
            </li>
            <li class="gds-tree__sub-item">
                <span class="gds-tree__link gds-tree__link--tertiary">
                    Kia<i class="gds-tree__status-icon fa fa-check -m-l-1"></i>
                </span>
                <ul class="gds-tree__sub-nav">
                    <li class="gds-tree__sub-item">
                        <span class="gds-tree__link gds-tree__link--primary">
                            Scoreboard LED<i class="gds-tree__status-icon fa fa-check -m-l-1"></i>
                        </span>
                    </li>
                    <li class="gds-tree__sub-item">
                        <span class="gds-tree__link gds-tree__link--primary">
                            Basket Stanchion<i class="gds-tree__status-icon fa fa-check -m-l-1"></i>
                        </span>
                    </li>
                    <li class="gds-tree__sub-item">
                        <span class="gds-tree__link gds-tree__link--primary">
                            Arena LED<i class="gds-tree__status-icon fa fa-check -m-l-1"></i>
                        </span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<ul> <li> <span class="gds-tree__link gds-tree__link--active gds-tree__link--secondary"> Golden State Warriors<i class="gds-tree__status-icon fa fa-fw fa-caret-left"></i> </span> <ul class="gds-tree__sub-nav"> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--active gds-tree__link--tertiary gds-tree__link--btn-options"> Nike<i class="gds-tree__status-icon fa fa-fw fa-caret-left"></i> <button class="gds-tree__link-option"> <i class="fa fa-fw fa-trash"></i> </button> </span> <ul class="gds-tree__sub-nav"> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--active gds-tree__link--primary"> Scoreboard LED<i class="gds-tree__status-icon fa fa-fw fa-caret-left"></i> <button class="gds-tree__link-option"> <i class="fa fa-fw fa-trash"></i> </button> </span> </li> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--primary"> Basket Stanchion<i class="gds-tree__status-icon fa fa-fw fa-check -m-l-1"></i> <button class="gds-tree__link-option"> <i class="fa fa-fw fa-trash"></i> </button> </span> </li> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--primary"> Arena LED<i class="gds-tree__status-icon fa fa-fw fa-check -m-l-1"></i> <button class="gds-tree__link-option"> <i class="fa fa-fw fa-trash"></i> </button> </span> </li> </ul> </li> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--tertiary"> Kia<i class="gds-tree__status-icon fa fa-check -m-l-1"></i> </span> <ul class="gds-tree__sub-nav"> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--primary"> Scoreboard LED<i class="gds-tree__status-icon fa fa-check -m-l-1"></i> </span> </li> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--primary"> Basket Stanchion<i class="gds-tree__status-icon fa fa-check -m-l-1"></i> </span> </li> <li class="gds-tree__sub-item"> <span class="gds-tree__link gds-tree__link--primary"> Arena LED<i class="gds-tree__status-icon fa fa-check -m-l-1"></i> </span> </li> </ul> </li> </ul> </li> </ul>

Well

The well component, prefixed by gds-well, can be used for alert messages or other user notifications.

Myles O'Connor

Default well

Success well

gds-well

gds-well--success

gds-well__button--success

gds-well--info

gds-well__button--info

gds-well--warning

gds-well__button--warning

gds-well--danger

gds-well__button--danger

gds-well--dark

<div class="gds-well -m-b-2">
    <p class="gds-well__text">Default well</p>
    <button class="gds-well__button"></button>
</div>
<div class="gds-well gds-well--success">
    <p class="gds-well__text">Success well</p>
    <button class="gds-well__button gds-well__button--success"></button>
</div>
<div class="gds-well -m-b-2"> <p class="gds-well__text">Default well</p> <button class="gds-well__button"></button> </div> <div class="gds-well gds-well--success"> <p class="gds-well__text">Success well</p> <button class="gds-well__button gds-well__button--success"></button> </div>

Organisms

Account-Modal

The account-modal component, prefixed by gds-account-modal, is a standard login window. This component is meant to be used on a page by itself.

Myles O'Connor

gds-account-modal

<div class="gds-account-modal gds-account-modal--logo">
    <div class="gds-account-modal__logo-product">Advertising</div>
    <div class="gds-account-modal__form-cap -m-t-3-sm -m-t-0">Dashboard</div>
    <form class="gds-form gds-account-modal__form gds-card -p-a-3">
        <div class="gds-form-group -m-b-1">
            <label class="gds-form-group__label">Email</label>
            <input class="gds-form-group__text-input" type="text" placeholder="user@gumgum.com">
        </div>
        <div class="gds-form-group -m-b-2">
            <label class="gds-form-group__label">Password</label>
            <input class="gds-form-group__text-input" type="password" placeholder="password123">
        </div>
        <div class="gds-form-group -m-b-2">
            <div class="gds-form-group__checkbox">
                <label class="gds-form-group__checkbox-label">
                    <input class="gds-form-group__checkbox-input" type="checkbox" value="">
                    <span class="gds-form-group__checkbox-indicator"></span> Stay signed in
                </label>
            </div>
        </div>
        <button type="submit" class="gds-button gds-button--block gds-button--primary">Login</button>
    </form>
    <p class="gds-account-modal__extra-links"><a href="#" class="gds-text--link">Forgot your password?</a></p>
</div>
<div class="gds-account-modal gds-account-modal--logo"> <div class="gds-account-modal__logo-product">Advertising</div> <div class="gds-account-modal__form-cap -m-t-3-sm -m-t-0">Dashboard</div> <form class="gds-form gds-account-modal__form gds-card -p-a-3"> <div class="gds-form-group -m-b-1"> <label class="gds-form-group__label">Email</label> <input class="gds-form-group__text-input" type="text" placeholder="user@gumgum.com"> </div> <div class="gds-form-group -m-b-2"> <label class="gds-form-group__label">Password</label> <input class="gds-form-group__text-input" type="password" placeholder="password123"> </div> <div class="gds-form-group -m-b-2"> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label"> <input class="gds-form-group__checkbox-input" type="checkbox" value=""> <span class="gds-form-group__checkbox-indicator"></span> Stay signed in </label> </div> </div> <button type="submit" class="gds-button gds-button--block gds-button--primary">Login</button> </form> <p class="gds-account-modal__extra-links"><a href="#" class="gds-text--link">Forgot your password?</a></p> </div>

Alert

The alert component, prefixed by gds-alert, is a standard pop-up element for displaying user feedback. For best results, this component should be constructed by calling the Design System JavaScript library's gds.alert method.

Important: When an alert is shown, please add -has-alert to the <body> element to temporarily disable vertical scrolling of the page.

Dan McKenna

gds-alert

gds-alert--shown

gds-alert__header--primary

gds-alert__header--secondary

gds-alert__header--success

gds-alert__header--info

gds-alert__header--warning

gds-alert__header--danger

<div class="gds-alert__overlay gds-alert--shown" data-gds-alert-overlay>
    <div class="gds-alert">
        <div class="gds-alert__header gds-alert__header--danger">
            <i class="gds-alert__icon fa fa-times-circle"></i>
            <h2 class="gds-alert__title">This is an alert</h2>
        </div>
        <div class="gds-alert__body">
            <p>Something has gone horribly wrong</p>
        </div>
        <div class="gds-alert__footer">
            <button class="gds-button gds-button--danger -p-h-4 -m-b-0">OK</button>
        </div>
    </div>
</div>
<div class="gds-alert__overlay gds-alert--shown" data-gds-alert-overlay> <div class="gds-alert"> <div class="gds-alert__header gds-alert__header--danger"> <i class="gds-alert__icon fa fa-times-circle"></i> <h2 class="gds-alert__title">This is an alert</h2> </div> <div class="gds-alert__body"> <p>Something has gone horribly wrong</p> </div> <div class="gds-alert__footer"> <button class="gds-button gds-button--danger -p-h-4 -m-b-0">OK</button> </div> </div> </div>

Animation Timeline

The animation timeline component, prefixed by gds-anim-timeline, provides a clear visualization of interactive animation keyframes on a stage.

Dan McKenna, Myles O'Connor

0s
1s
2s
3s
4s
5s

gds-anim-timeline

<div class="gds-anim-timeline">
    <div class="gds-anim-timeline__row gds-anim-timeline__row--darkblue">
        <div class="gds-anim-timeline__cell--asset">
            <div class="gds-anim-timeline__color-cap"></div>
            <div class="gds-anim-timeline__asset-preview">
                <label class="gds-anim-timeline__label">A very long name goes here</label>
                <div class="gds-anim-timeline__asset-avatar"></div>
            </div>
            <div class="gds-anim-timeline__asset-animations">
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Slide In Left</option>
                            <option>Slide In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                    <button class="gds-anim-timeline__button gds-anim-timeline__button--add" title="Add an animation"><i class="fa fa-plus"></i></button>
                </div>
            </div>
        </div>
        <div class="gds-anim-timeline__cell--stage">
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 5%; width: 20%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
            <div class="gds-anim-timeline__scale gds-anim-timeline__scale--top">
                <div class="gds-anim-timeline__value-marker">
                    <div class="gds-anim-timeline__value-label">0s</div>
                </div>
                <div class="gds-anim-timeline__value-marker">
                    <div class="gds-anim-timeline__value-label">1s</div>
                </div>
                <div class="gds-anim-timeline__value-marker">
                    <div class="gds-anim-timeline__value-label">2s</div>
                </div>
                <div class="gds-anim-timeline__value-marker">
                    <div class="gds-anim-timeline__value-label">3s</div>
                </div>
                <div class="gds-anim-timeline__value-marker">
                    <div class="gds-anim-timeline__value-label">4s</div>
                </div>
                <div class="gds-anim-timeline__value-marker">
                    <div class="gds-anim-timeline__value-label">5s</div>
                </div>
            </div>
        </div>
    </div>
    <div class="gds-anim-timeline__row gds-anim-timeline__row--gold">
        <div class="gds-anim-timeline__cell--asset">
            <div class="gds-anim-timeline__color-cap"></div>
            <div class="gds-anim-timeline__asset-preview">
                <label class="gds-anim-timeline__label">A very long name goes here</label>
                <div class="gds-anim-timeline__asset-avatar"></div>
            </div>
            <div class="gds-anim-timeline__asset-animations">
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Slide In Left</option>
                            <option>Slide In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Slide In Left</option>
                            <option>Slide In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Slide In Left</option>
                            <option>Slide In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Slide In Left</option>
                            <option>Slide In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Slide In Left</option>
                            <option>Slide In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
                <div class="gds-anim-timeline__form-group">
                    <div class="gds-anim-timeline__input-group">
                        <select class="gds-anim-timeline__select-input">
                            <option>Rotate In Left</option>
                            <option>Rotate In Right</option>
                        </select>
                        <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
                    </div>
                    <button class="gds-anim-timeline__button gds-anim-timeline__button--add" title="Add an animation"><i class="fa fa-plus"></i></button>
                </div>
            </div>
        </div>
        <div class="gds-anim-timeline__cell--stage">
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <div class="gds-anim-timeline__bar-line"></div>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 5%; width: 20%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 10%; width: 25%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
            <section class="gds-anim-timeline__section">
                <div class="gds-anim-timeline__bar" style="left: 55%; width: 15%;">
                    <div class="gds-anim-timeline__bar-handle"></div>
                    <div class="gds-anim-timeline__bar-handle"></div>
                </div>
            </section>
        </div>
    </div>
</div>
<div class="gds-anim-timeline"> <div class="gds-anim-timeline__row gds-anim-timeline__row--darkblue"> <div class="gds-anim-timeline__cell--asset"> <div class="gds-anim-timeline__color-cap"></div> <div class="gds-anim-timeline__asset-preview"> <label class="gds-anim-timeline__label">A very long name goes here</label> <div class="gds-anim-timeline__asset-avatar"></div> </div> <div class="gds-anim-timeline__asset-animations"> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Slide In Left</option> <option>Slide In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> <button class="gds-anim-timeline__button gds-anim-timeline__button--add" title="Add an animation"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="gds-anim-timeline__cell--stage"> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 5%; width: 20%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> <div class="gds-anim-timeline__scale gds-anim-timeline__scale--top"> <div class="gds-anim-timeline__value-marker"> <div class="gds-anim-timeline__value-label">0s</div> </div> <div class="gds-anim-timeline__value-marker"> <div class="gds-anim-timeline__value-label">1s</div> </div> <div class="gds-anim-timeline__value-marker"> <div class="gds-anim-timeline__value-label">2s</div> </div> <div class="gds-anim-timeline__value-marker"> <div class="gds-anim-timeline__value-label">3s</div> </div> <div class="gds-anim-timeline__value-marker"> <div class="gds-anim-timeline__value-label">4s</div> </div> <div class="gds-anim-timeline__value-marker"> <div class="gds-anim-timeline__value-label">5s</div> </div> </div> </div> </div> <div class="gds-anim-timeline__row gds-anim-timeline__row--gold"> <div class="gds-anim-timeline__cell--asset"> <div class="gds-anim-timeline__color-cap"></div> <div class="gds-anim-timeline__asset-preview"> <label class="gds-anim-timeline__label">A very long name goes here</label> <div class="gds-anim-timeline__asset-avatar"></div> </div> <div class="gds-anim-timeline__asset-animations"> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Slide In Left</option> <option>Slide In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> </div> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Slide In Left</option> <option>Slide In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> </div> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Slide In Left</option> <option>Slide In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> </div> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Slide In Left</option> <option>Slide In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> </div> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Slide In Left</option> <option>Slide In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> </div> <div class="gds-anim-timeline__form-group"> <div class="gds-anim-timeline__input-group"> <select class="gds-anim-timeline__select-input"> <option>Rotate In Left</option> <option>Rotate In Right</option> </select> <button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button> </div> <button class="gds-anim-timeline__button gds-anim-timeline__button--add" title="Add an animation"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="gds-anim-timeline__cell--stage"> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <div class="gds-anim-timeline__bar-line"></div> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 5%; width: 20%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 10%; width: 25%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> <section class="gds-anim-timeline__section"> <div class="gds-anim-timeline__bar" style="left: 55%; width: 15%;"> <div class="gds-anim-timeline__bar-handle"></div> <div class="gds-anim-timeline__bar-handle"></div> </div> </section> </div> </div> </div>

Conversation

The conversation component, prefixed by gds-conversation, is used to display chat interactions.

Dan McKenna

Conversation Title
You
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Ken Weiner
Mon, 09/12/2016
Ken Weiner
Bob Smith
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ken Weiner
Bob Smith
deserunt mollit anim id est laborum.
Tues, 09/13/2016
You
You suck!
Ken Weiner
Ken Weiner
User Blocked!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
You
Ken Weiner

gds-conversation

<div class="gds-conversation">
    <div class="gds-conversation__header">
        <img class="gds-conversation__thumbnail" src="https://assets.ggops.com/images/sample-1.jpg">
        <div class="gds-conversation__title">Conversation Title</div>
        <div class="gds-conversation__options">
            <div class="gds-button gds-button--outline gds-button--xs"><i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i></div>
            <div class="gds-button gds-button--outline gds-button--xs"><i class="fa fa-fw fa-expand" aria-hidden="true"></i></div>
            <div class="gds-button gds-button--outline gds-button--xs"><i class="fa fa-fw fa-times" aria-hidden="true"></i></div>
        </div>
    </div>
    <div class="gds-conversation__body">
        <div class="gds-conversation__message gds-conversation__message--received">
            <div class="gds-conversation__bubble gds-conversation__bubble--received">
                <div class="gds-conversation__name gds-conversation__name--received"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>You</div>
                <div class="gds-conversation__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
                <div class="gds-conversation__message-footer">
                    <div class="gds-conversation__date">Sent: 9/13/2016</div>
                </div>
            </div>
            <div class="gds-conversation__avatar gds-conversation__avatar--received -text-center">
                <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
                <div class="gds-conversation__source"></div>
            </div>
        </div>
        <div class="gds-conversation__date-divider"><div class="gds-conversation__datestamp">Mon, 09/12/2016</div></div>
        <div class="gds-conversation__message gds-conversation__message--sent">
            <div class="gds-conversation__avatar gds-conversation__avatar--sent gds-conversation__avatar">
                <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
            </div>
            <div class="gds-conversation__bubble gds-conversation__bubble--sent">
                <div class="gds-conversation__name gds-conversation__name--sent"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>Bob Smith</div>
                <div class="gds-conversation__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                <div class="gds-conversation__message-footer">
                    <div class="gds-conversation__date">Sent: 9/13/2016</div>
                    <div class="gds-conversation__message-options">
                        <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-flag" aria-hidden="true"></i></a>
                        <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="gds-conversation__message gds-conversation__message--sent">
            <div class="gds-conversation__avatar gds-conversation__avatar--sent gds-conversation__avatar">
                <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
            </div>
            <div class="gds-conversation__bubble gds-conversation__bubble--sent">
                <div class="gds-conversation__name gds-conversation__name--sent"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>Bob Smith</div>
                <div class="gds-conversation__content">deserunt mollit anim id est laborum.
                    <img class="gds-conversation__img" src="https://assets.ggops.com/images/sample-1.jpg">
                </div>
                <div class="gds-conversation__message-footer">
                    <div class="gds-conversation__date">Sent: 9/13/2016</div>
                    <div class="gds-conversation__message-options">
                        <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-flag" aria-hidden="true"></i></a>
                        <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="gds-conversation__date-divider"><div class="gds-conversation__datestamp">Tues, 09/13/2016</div></div>
        <div class="gds-conversation__message gds-conversation__message--received">
            <div class="gds-conversation__bubble gds-conversation__bubble--received">
                <div class="gds-conversation__name gds-conversation__name--received"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>You</div>
                <div class="gds-conversation__content">You suck!</div>
                <div class="gds-conversation__message-footer">
                    <div class="gds-conversation__date">Sent: 9/13/2016</div>
                </div>
            </div>
            <div class="gds-conversation__avatar gds-conversation__avatar--received -text-center">
                <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
                <div class="gds-conversation__source"></div>
            </div>
        </div>
        <div class="gds-conversation__message gds-conversation__message--sent">
            <div class="gds-conversation__avatar gds-conversation__avatar--sent gds-conversation__avatar--blocked">
                <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
            </div>
            <div class="gds-conversation__bubble gds-conversation__bubble--sent gds-conversation__bubble--blocked">
                <div class="gds-conversation__name gds-conversation__name--sent"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>User Blocked!</div>
                <div class="gds-conversation__content gds-conversation__content--blocked">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                <div class="gds-conversation__message-footer">
                    <div class="gds-conversation__date">Sent: 9/13/2016</div>
                    <div class="gds-conversation__message-options">
                        <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-flag" aria-hidden="true"></i></a>
                        <a class="gds-conversation__message-option gds-conversation__message-option--active" href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="gds-conversation__message gds-conversation__message--received">
            <div class="gds-conversation__bubble gds-conversation__bubble--received gds-conversation__bubble gds-conversation__bubble--typing">
                <div class="gds-conversation__name gds-conversation__name--received"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>You</div>
                <div class="gds-conversation__content gds-conversation__content--typing">
                    <div class="gds-conversation__dots"></div>
                </div>
            </div>
            <div class="gds-conversation__avatar gds-conversation__avatar--received -text-center">
                <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
                <div class="gds-conversation__source"></div>
            </div>
        </div>
    </div>
    <div class="gds-conversation__footer">
        <div class="gds-form-group">
            <div class="gds-form-group__text-input--button-cap">
            <span class="gds-conversation__char-count">0/114</span>
                <input class="gds-form-group__text-input gds-form-group__text-input--right-edge gds-form-group__text-input--left-edge" type="text" placeholder="Enter your message" />
                <button class="gds-button gds-button--primary gds-button--button-cap -p-h-4">Send</button>
                
            </div>
        </div>
    </div>
</div>
<div class="gds-conversation"> <div class="gds-conversation__header"> <img class="gds-conversation__thumbnail" src="https://assets.ggops.com/images/sample-1.jpg"> <div class="gds-conversation__title">Conversation Title</div> <div class="gds-conversation__options"> <div class="gds-button gds-button--outline gds-button--xs"><i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i></div> <div class="gds-button gds-button--outline gds-button--xs"><i class="fa fa-fw fa-expand" aria-hidden="true"></i></div> <div class="gds-button gds-button--outline gds-button--xs"><i class="fa fa-fw fa-times" aria-hidden="true"></i></div> </div> </div> <div class="gds-conversation__body"> <div class="gds-conversation__message gds-conversation__message--received"> <div class="gds-conversation__bubble gds-conversation__bubble--received"> <div class="gds-conversation__name gds-conversation__name--received"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>You</div> <div class="gds-conversation__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div> <div class="gds-conversation__message-footer"> <div class="gds-conversation__date">Sent: 9/13/2016</div> </div> </div> <div class="gds-conversation__avatar gds-conversation__avatar--received -text-center"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> <div class="gds-conversation__source"></div> </div> </div> <div class="gds-conversation__date-divider"><div class="gds-conversation__datestamp">Mon, 09/12/2016</div></div> <div class="gds-conversation__message gds-conversation__message--sent"> <div class="gds-conversation__avatar gds-conversation__avatar--sent gds-conversation__avatar"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> </div> <div class="gds-conversation__bubble gds-conversation__bubble--sent"> <div class="gds-conversation__name gds-conversation__name--sent"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>Bob Smith</div> <div class="gds-conversation__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="gds-conversation__message-footer"> <div class="gds-conversation__date">Sent: 9/13/2016</div> <div class="gds-conversation__message-options"> <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-flag" aria-hidden="true"></i></a> <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="gds-conversation__message gds-conversation__message--sent"> <div class="gds-conversation__avatar gds-conversation__avatar--sent gds-conversation__avatar"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> </div> <div class="gds-conversation__bubble gds-conversation__bubble--sent"> <div class="gds-conversation__name gds-conversation__name--sent"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>Bob Smith</div> <div class="gds-conversation__content">deserunt mollit anim id est laborum. <img class="gds-conversation__img" src="https://assets.ggops.com/images/sample-1.jpg"> </div> <div class="gds-conversation__message-footer"> <div class="gds-conversation__date">Sent: 9/13/2016</div> <div class="gds-conversation__message-options"> <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-flag" aria-hidden="true"></i></a> <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="gds-conversation__date-divider"><div class="gds-conversation__datestamp">Tues, 09/13/2016</div></div> <div class="gds-conversation__message gds-conversation__message--received"> <div class="gds-conversation__bubble gds-conversation__bubble--received"> <div class="gds-conversation__name gds-conversation__name--received"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>You</div> <div class="gds-conversation__content">You suck!</div> <div class="gds-conversation__message-footer"> <div class="gds-conversation__date">Sent: 9/13/2016</div> </div> </div> <div class="gds-conversation__avatar gds-conversation__avatar--received -text-center"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> <div class="gds-conversation__source"></div> </div> </div> <div class="gds-conversation__message gds-conversation__message--sent"> <div class="gds-conversation__avatar gds-conversation__avatar--sent gds-conversation__avatar--blocked"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> </div> <div class="gds-conversation__bubble gds-conversation__bubble--sent gds-conversation__bubble--blocked"> <div class="gds-conversation__name gds-conversation__name--sent"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>User Blocked!</div> <div class="gds-conversation__content gds-conversation__content--blocked">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div class="gds-conversation__message-footer"> <div class="gds-conversation__date">Sent: 9/13/2016</div> <div class="gds-conversation__message-options"> <a class="gds-conversation__message-option" href="#"><i class="fa fa-fw fa-flag" aria-hidden="true"></i></a> <a class="gds-conversation__message-option gds-conversation__message-option--active" href="#"><i class="fa fa-fw fa-ban" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="gds-conversation__message gds-conversation__message--received"> <div class="gds-conversation__bubble gds-conversation__bubble--received gds-conversation__bubble gds-conversation__bubble--typing"> <div class="gds-conversation__name gds-conversation__name--received"><i class="fa fa-fw fa-twitter -m-r-1" aria-hidden="true"></i>You</div> <div class="gds-conversation__content gds-conversation__content--typing"> <div class="gds-conversation__dots"></div> </div> </div> <div class="gds-conversation__avatar gds-conversation__avatar--received -text-center"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> <div class="gds-conversation__source"></div> </div> </div> </div> <div class="gds-conversation__footer"> <div class="gds-form-group"> <div class="gds-form-group__text-input--button-cap"> <span class="gds-conversation__char-count">0/114</span> <input class="gds-form-group__text-input gds-form-group__text-input--right-edge gds-form-group__text-input--left-edge" type="text" placeholder="Enter your message" /> <button class="gds-button gds-button--primary gds-button--button-cap -p-h-4">Send</button> </div> </div> </div> </div>

Feedback

The gds-feedback component is used for displaying and choosing from a set of user-feedback options.

Mike Watt

gds-feedback

gds-feedback--align-right

gds-feedback--fixed-right

gds-feedback--align-left

gds-feedback--fixed-left

<div class="gds-feedback gds-feedback--align-right -m-t-6" data-gds-feedback>
    <div class="gds-feedback__drawer gds-feedback__drawer--right" data-gds-feedback-bubble-drawer="1">
        <button type="button" class="gds-feedback__expander gds-circular-button gds-circular-button--sm gds-circular-button--gray"
                data-gds-feedback-expander-button="1"
                data-feedback="Gray clicked">
            <i class="gds-feedback__icon-closed fa fa-fw fa-comments"></i>
            <i class="gds-feedback__icon-open fa fa-fw fa-arrow-right"></i>
        </button>
        <ul class="gds-feedback__drawer-items">
            <li class="gds-feedback__drawer-item">
                <button type="button" class="gds-circular-button gds-circular-button--xs gds-circular-button--secondary gds-circular-button--tooltip"
                        data-gds-feedback-button="toggle"
                        data-feedback="Report Bug clicked"
                        data-tooltip="Report Bug">
                    <i class="fa fa-fw fa-bug"></i>
                </button>
            </li>
            <li class="gds-feedback__drawer-item">
                <button type="button" class="gds-circular-button gds-circular-button--xs gds-circular-button--warning gds-circular-button--tooltip"
                        data-gds-feedback-button="toggle"
                        data-feedback="Comment clicked"
                        data-tooltip="Comment">
                    <i class="fa fa-fw fa-commenting"></i>
                </button>
            </li>
            <li class="gds-feedback__drawer-item">
                <button type="button" class="gds-circular-button gds-circular-button--xs gds-circular-button--primary gds-circular-button--tooltip"
                        data-gds-feedback-button="toggle"
                        data-feedback="Rate clicked"
                        data-tooltip="Rate">
                    <i class="fa fa-fw fa-star-half-o"></i>
                </button>
            </li>
        </ul>
    </div>
</div>
<div class="gds-feedback gds-feedback--align-right -m-t-6" data-gds-feedback> <div class="gds-feedback__drawer gds-feedback__drawer--right" data-gds-feedback-bubble-drawer="1"> <button type="button" class="gds-feedback__expander gds-circular-button gds-circular-button--sm gds-circular-button--gray" data-gds-feedback-expander-button="1" data-feedback="Gray clicked"> <i class="gds-feedback__icon-closed fa fa-fw fa-comments"></i> <i class="gds-feedback__icon-open fa fa-fw fa-arrow-right"></i> </button> <ul class="gds-feedback__drawer-items"> <li class="gds-feedback__drawer-item"> <button type="button" class="gds-circular-button gds-circular-button--xs gds-circular-button--secondary gds-circular-button--tooltip" data-gds-feedback-button="toggle" data-feedback="Report Bug clicked" data-tooltip="Report Bug"> <i class="fa fa-fw fa-bug"></i> </button> </li> <li class="gds-feedback__drawer-item"> <button type="button" class="gds-circular-button gds-circular-button--xs gds-circular-button--warning gds-circular-button--tooltip" data-gds-feedback-button="toggle" data-feedback="Comment clicked" data-tooltip="Comment"> <i class="fa fa-fw fa-commenting"></i> </button> </li> <li class="gds-feedback__drawer-item"> <button type="button" class="gds-circular-button gds-circular-button--xs gds-circular-button--primary gds-circular-button--tooltip" data-gds-feedback-button="toggle" data-feedback="Rate clicked" data-tooltip="Rate"> <i class="fa fa-fw fa-star-half-o"></i> </button> </li> </ul> </div> </div>

Filters

The filter component is an extension of the bubble menu component intended to house controls to filter content. The contents of this component can be customized based on the developer's requirements. Breakpoints for the housing are predefined, but internal inputs should be wrapped by columns to ensure they fill the space properly across all sizes. It can persist between sections of a single page app or be exclusive to a single page of a multi-page app. It uses the same data attributes as a standard bubble menu.

As with avatar menu and bubble-menu components, the button that invokes the filter menu should contain a gds-bubble-button attribute with a value that points at some form of selector for the menu it corresponds to.

Dan McKenna, Mike Watt

gds-filters

gds-bubble__menu--menu-open

<div class="gds-filters" gds-bubble>
    <span class="gds-tooltip--bottom" data-tooltip="Filters">
        <div class="gds-filters__button" data-gds-bubble-button="#filters_menu" data-gds-active-class="gds-filters__button--active">
            <a class="gds-filters__button-link" href="#"><i class="btl bt-wrench -m-r-2"></i>Filters<span class="-m-l-2 gds-text--danger">5</span></a>
        </div>
    </span>
    <div class="gds-filters__menu" id="filters_menu" data-gds-bubble-menu="filters">
        <div class='gds-layout__row'>
            <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1">
                <div class="gds-form-group">
                    <label class="gds-form-group__label -color-tx-lt-4">Sentiment</label>
                    <select class="gds-form-group__select-input gds-form-group__select-input--sm">
                        <option>Positive</option>
                        <option>Neutral</option>
                        <option>Negative</option>
                    </select>
                </div>
            </div>
            <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1">
                <div class="gds-form-group">
                    <label class="gds-form-group__label -color-tx-lt-4">Keywords</label>
                    <div class="gds-form-group__input-group">
                        <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="Enter a keyword" />
                        <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-12 -m-b-1">
                <div class="gds-form-group">
                    <label class="gds-form-group__label -color-tx-lt-4">Location</label>
                    <div class="gds-form-group__input-group">
                        <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="Enter a location" />
                        <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-2">
                <div class="gds-form-group">
                    <label class="gds-form-group__label -color-tx-lt-4">Start Date</label>
                    <div class="gds-form-group__input-group">
                        <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/15" />
                        <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar" ></i></button>
                    </div>
                </div>
            </div>
            <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-2">
                <div class="gds-form-group">
                    <label class="gds-form-group__label -color-tx-lt-4">End Date</label>
                    <div class="gds-form-group__input-group">
                        <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/16" />
                        <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar" ></i></button>
                    </div>
                </div>
            </div>
            <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-12 -m-b-2">
                <div class="gds-form-group">
                    <label class="gds-form-group__label -color-tx-lt-4 -none--md"></label>
                    <button class="gds-button gds-button--sm gds-button--secondary gds-button--block">Clear Filters</button>
                </div>
            </div>
            <div class="gds-divider gds-divider--collapsible -p-h-2 -m-b-2" data-gds-divider="0">
                <span class="gds-divider__label gds-form-group__label -color-tx-lt-4">Active Filters</span>
                <span class="gds-divider__line"></span>
                <span class="gds-divider__arrow" data-gds-arrow></span>
            </div>
            <div class="gds-segment -p-h-2" data-gds-segment="0">
                <div class="gds-tag gds-tag--green gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag">
                    <span class="gds-form-group__label -color-tx-white -m-b-0">Location:</span> Los Angeles<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button>
                </div>
                <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag">
                    <span class="gds-form-group__label -color-tx-white -m-b-0">Start Date:</span> 12/01/15<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary" ></button>
                </div>
                <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag">
                    <span class="gds-form-group__label -color-tx-white -m-b-0">End Date:</span> 12/01/16<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary" ></button>
                </div>
                <div class="gds-tag gds-tag--blue gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag">
                    <span class="gds-form-group__label -color-tx-white -m-b-0">Keyword:</span> #cocacola<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary" ></button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="gds-filters" gds-bubble> <span class="gds-tooltip--bottom" data-tooltip="Filters"> <div class="gds-filters__button" data-gds-bubble-button="#filters_menu" data-gds-active-class="gds-filters__button--active"> <a class="gds-filters__button-link" href="#"><i class="btl bt-wrench -m-r-2"></i>Filters<span class="-m-l-2 gds-text--danger">5</span></a> </div> </span> <div class="gds-filters__menu" id="filters_menu" data-gds-bubble-menu="filters"> <div class='gds-layout__row'> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label -color-tx-lt-4">Sentiment</label> <select class="gds-form-group__select-input gds-form-group__select-input--sm"> <option>Positive</option> <option>Neutral</option> <option>Negative</option> </select> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label -color-tx-lt-4">Keywords</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="Enter a keyword" /> <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-12 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label -color-tx-lt-4">Location</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="Enter a location" /> <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-2"> <div class="gds-form-group"> <label class="gds-form-group__label -color-tx-lt-4">Start Date</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/15" /> <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar" ></i></button> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-2"> <div class="gds-form-group"> <label class="gds-form-group__label -color-tx-lt-4">End Date</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/16" /> <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar" ></i></button> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-12 -m-b-2"> <div class="gds-form-group"> <label class="gds-form-group__label -color-tx-lt-4 -none--md"></label> <button class="gds-button gds-button--sm gds-button--secondary gds-button--block">Clear Filters</button> </div> </div> <div class="gds-divider gds-divider--collapsible -p-h-2 -m-b-2" data-gds-divider="0"> <span class="gds-divider__label gds-form-group__label -color-tx-lt-4">Active Filters</span> <span class="gds-divider__line"></span> <span class="gds-divider__arrow" data-gds-arrow></span> </div> <div class="gds-segment -p-h-2" data-gds-segment="0"> <div class="gds-tag gds-tag--green gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag"> <span class="gds-form-group__label -color-tx-white -m-b-0">Location:</span> Los Angeles<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button> </div> <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag"> <span class="gds-form-group__label -color-tx-white -m-b-0">Start Date:</span> 12/01/15<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary" ></button> </div> <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag"> <span class="gds-form-group__label -color-tx-white -m-b-0">End Date:</span> 12/01/16<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary" ></button> </div> <div class="gds-tag gds-tag--blue gds-tag--with-button-sm gds-tag--sm gds-button--block-sm -color-tx-white gds-bubble__menu--vi__tag"> <span class="gds-form-group__label -color-tx-white -m-b-0">Keyword:</span> #cocacola<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary" ></button> </div> </div> </div> </div> </div>

Leaderboard

The gds-leaderboard component is a combination of a large ranker component and a ranker grid component. It's used for displaying rankings of items with a hierarchical focus on the top 5 followed by any remaining items in a grid below. All variations of ranker, ranker-ensign, and ranker-grid are applicable to this component - simply use the existing respective modifiers as needed.

Jarrod Dowalter

  • 1th
  • 2th
  • 3th
  • 4th
  • 5th
Golden State
Warriors
6 th
Golden State
Warriors
7 th
Golden State
Warriors
8 th
Golden State
Warriors
9 th
Golden State
Warriors
10 th
Golden State
Warriors
11 th
Golden State
Warriors
12 th
Golden State
Warriors
13 th
Golden State
Warriors
14 th
Golden State
Warriors
15 th
Golden State
Warriors
16 th
Golden State
Warriors
17 th
Golden State
Warriors
18 th
Golden State
Warriors
19 th
Golden State
Warriors
20 th
Golden State
Warriors
21 st
Golden State
Warriors
22 nd
Golden State
Warriors
23 rd
Golden State
Warriors
24 th
Golden State
Warriors
25 th
Golden State
Warriors
26 th
Golden State
Warriors
27 th
Golden State
Warriors
28 th
Golden State
Warriors
29 th
Golden State
Warriors
30 th

gds-leaderboard

<div class="gds-leaderboard">
    <div class="gds-leaderboard__topfive">
        <div class="gds-ranker gds-ranker--lg">
            <ul class="gds-ranker__list">
                <li class="gds-ranker__item">
                    <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                        <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" />
                    </div>
                    <div class="gds-ranker__item-number gds-ranker__item-number--secondary">1<span class="gds-ranker__item-number-ordinal">th</span></div>
                </li>
                <li class="gds-ranker__item">
                    <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                        <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" />
                    </div>
                    <div class="gds-ranker__item-number gds-ranker__item-number--secondary">2<span class="gds-ranker__item-number-ordinal">th</span></div>
                </li>
                <li class="gds-ranker__item">
                    <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                        <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" />
                    </div>
                    <div class="gds-ranker__item-number gds-ranker__item-number--secondary">3<span class="gds-ranker__item-number-ordinal">th</span></div>
                </li>
                <li class="gds-ranker__item">
                    <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                        <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" />
                    </div>
                    <div class="gds-ranker__item-number gds-ranker__item-number--secondary">4<span class="gds-ranker__item-number-ordinal">th</span></div>
                </li>
                <li class="gds-ranker__item">
                    <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
                        <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" />
                    </div>
                    <div class="gds-ranker__item-number gds-ranker__item-number--secondary">5<span class="gds-ranker__item-number-ordinal">th</span></div>
                </li>
            </ul>
            <div class="gds-ranker__connector"></div>
        </div>
    </div>
    <div class="gds-leaderboard__grid">
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                6
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                7
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                8
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                9
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                10
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                11
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                12
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                13
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                14
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                15
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                16
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                17
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                18
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                19
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                20
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                21
                <sup class="gds-ranker-ensign__number--sup">
                st
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                22
                <sup class="gds-ranker-ensign__number--sup">
                nd
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                23
                <sup class="gds-ranker-ensign__number--sup">
                rd
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                24
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                25
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                26
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                27
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                28
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                29
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
        <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary">
            <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/>
            <div class="gds-ranker-ensign__content">
                <span class="gds-ranker-ensign__label">Golden State<br/></span>
                <span class="gds-ranker-ensign__title">Warriors</span>
            </div>
            <span class="gds-ranker-ensign__number">
                30
                <sup class="gds-ranker-ensign__number--sup">
                th
                </sup>
            </span>
        </div>
    </div>
</div>
<div class="gds-leaderboard"> <div class="gds-leaderboard__topfive"> <div class="gds-ranker gds-ranker--lg"> <ul class="gds-ranker__list"> <li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" /> </div> <div class="gds-ranker__item-number gds-ranker__item-number--secondary">1<span class="gds-ranker__item-number-ordinal">th</span></div> </li> <li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" /> </div> <div class="gds-ranker__item-number gds-ranker__item-number--secondary">2<span class="gds-ranker__item-number-ordinal">th</span></div> </li> <li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" /> </div> <div class="gds-ranker__item-number gds-ranker__item-number--secondary">3<span class="gds-ranker__item-number-ordinal">th</span></div> </li> <li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" /> </div> <div class="gds-ranker__item-number gds-ranker__item-number--secondary">4<span class="gds-ranker__item-number-ordinal">th</span></div> </li> <li class="gds-ranker__item"> <div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here"> <img class="gds-ranker__image" src="https://assets.ggops.com/images/ken.png" /> </div> <div class="gds-ranker__item-number gds-ranker__item-number--secondary">5<span class="gds-ranker__item-number-ordinal">th</span></div> </li> </ul> <div class="gds-ranker__connector"></div> </div> </div> <div class="gds-leaderboard__grid"> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 6 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 7 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 8 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 9 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 10 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 11 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 12 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 13 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 14 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 15 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 16 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 17 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 18 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 19 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 20 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 21 <sup class="gds-ranker-ensign__number--sup"> st </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 22 <sup class="gds-ranker-ensign__number--sup"> nd </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 23 <sup class="gds-ranker-ensign__number--sup"> rd </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 24 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 25 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 26 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 27 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 28 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 29 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign gds-ranker-ensign--secondary"> <img class="gds-ranker-ensign__thumbnail gds-ranker-ensign__thumbnail--sm" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 30 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> </div> </div>

Lens

The lens component, prefixed by gds-lens, is used for the creation and displaying of areas of interest with an image or other space.

It should be wrapped by a gds-lens-wrapper element and it should be adjacent to a gds-lens-base object (usually an <img> or block-level element) on which to project these areas of interest.

The src of the gds-lens__image should always match the src of the base image and the dimensions should be manually defined for both. Additionally, any left/top styles applied to the lens itself should be inverted on the image to ensure the highlighted area within the lens aligns correctly with the underlying base image.

Dan McKenna

gds-lens

gds-lens--active

gds-lens__viewport--no-icon

<div class="gds-lens-wrapper">
    <div class="gds-lens gds-lens--display" style="left: 100px; top: 150px; width: 250px; height: 250px">
        <div class="gds-lens__bracket gds-lens__bracket--t-l"></div>
        <div class="gds-lens__bracket gds-lens__bracket--t-r"></div>
        <div class="gds-lens__bracket gds-lens__bracket--b-l"></div>
        <div class="gds-lens__bracket gds-lens__bracket--b-r"></div>
        <div class="gds-lens__viewport">
            <img class="gds-lens__image" style="left: -100px; top: -150px; height: 640px; width: 640px;" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/>
        </div>
    </div>
    <img class="gds-lens-base" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/>
</div>
<div class="gds-lens-wrapper"> <div class="gds-lens gds-lens--display" style="left: 100px; top: 150px; width: 250px; height: 250px"> <div class="gds-lens__bracket gds-lens__bracket--t-l"></div> <div class="gds-lens__bracket gds-lens__bracket--t-r"></div> <div class="gds-lens__bracket gds-lens__bracket--b-l"></div> <div class="gds-lens__bracket gds-lens__bracket--b-r"></div> <div class="gds-lens__viewport"> <img class="gds-lens__image" style="left: -100px; top: -150px; height: 640px; width: 640px;" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/> </div> </div> <img class="gds-lens-base" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/> </div>

Lens - Edit Mode

When editing lenses, gds-lens--active should be applied to the currently selected lens. Each lens will likely have a number of properties that must be assigned by the user before it can be considered 'valid.' Once validated, you should assign the gds-lens--valid to the lens. If those properties are not assigned, and the lens is deselected or another lens is selected, you should add the gds-lens--invalid modifier to indicate to the user that it is not finished being configured.

Dan McKenna

gds-lens--valid

gds-lens--invalid

<div class="gds-lens-wrapper">
    <div class="gds-lens gds-lens--active" style="left: 100px; top: 150px; width: 250px; height: 250px">
        <div class="gds-lens__handle gds-lens__handle--t-l"></div>
        <div class="gds-lens__handle gds-lens__handle--t-c"></div>
        <div class="gds-lens__handle gds-lens__handle--t-r"></div>
        <div class="gds-lens__handle gds-lens__handle--c-l"></div>
        <div class="gds-lens__handle gds-lens__handle--c-r"></div>
        <div class="gds-lens__handle gds-lens__handle--b-l"></div>
        <div class="gds-lens__handle gds-lens__handle--b-c"></div>
        <div class="gds-lens__handle gds-lens__handle--b-r"></div>
        <div class="gds-lens__guide-grid gds-lens__guide-grid--h"></div>
        <div class="gds-lens__guide-grid gds-lens__guide-grid--v"></div>
        <div class="gds-lens__viewport">
            <img class="gds-lens__image" style="left: -100px; top: -150px; height: 640px; width: 640px;" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/>
        </div>
    </div>
    <img class="gds-lens-base gds-lens-base--desaturate" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/>
</div>
<div class="gds-lens-wrapper"> <div class="gds-lens gds-lens--active" style="left: 100px; top: 150px; width: 250px; height: 250px"> <div class="gds-lens__handle gds-lens__handle--t-l"></div> <div class="gds-lens__handle gds-lens__handle--t-c"></div> <div class="gds-lens__handle gds-lens__handle--t-r"></div> <div class="gds-lens__handle gds-lens__handle--c-l"></div> <div class="gds-lens__handle gds-lens__handle--c-r"></div> <div class="gds-lens__handle gds-lens__handle--b-l"></div> <div class="gds-lens__handle gds-lens__handle--b-c"></div> <div class="gds-lens__handle gds-lens__handle--b-r"></div> <div class="gds-lens__guide-grid gds-lens__guide-grid--h"></div> <div class="gds-lens__guide-grid gds-lens__guide-grid--v"></div> <div class="gds-lens__viewport"> <img class="gds-lens__image" style="left: -100px; top: -150px; height: 640px; width: 640px;" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/> </div> </div> <img class="gds-lens-base gds-lens-base--desaturate" src="https://cdn.mantii.com/photos/15259020_144916305990811_1121445729403928576_n.jpg" height="640" width="640"/> </div>

Onboarder

The onboarder component is used to give new users of a product a quick breakdown of all functionality on a given page. It should ideally be invoked via the gds.onboarder.construct(data) method where data is a JS object containing a property "steps" which is an array of objects containers a title, description, and a target. The target property should be a selector for an element on the page that the onboarder component will highlight and position itself around. Based on the position of the target element, the component will attempt to choose the appropriate arrow position modifier class. Ideally, this component will only be used one time per new user so a cookie or localstorage property should be set to prevent it from loading on subsequent visits.

Dan McKenna

gds-onboarder

gds-onboarder--t-l

gds-onboarder--t-r

gds-onboarder--b-l

gds-onboarder--b-r

<div class="gds-onboarder__overlay gds-onboarder--shown" data-gds-onboarder-container="">
    <div class="gds-onboarder gds-onboarder--t-l" data-gds-onboarder="">
        <div class="gds-onboarder__header">
            <span class="gds-onboarder__step-num" data-gds-onboarder-step-num="">1</span>
            <h4 class="gds-text--header-sm -m-b-3" data-gds-onboarder-step-name="">Main navigation</h4>
        </div>
        <div class="gds-onboarder__body">
            <p class="gds-text--body-sm" data-gds-onboarder-body="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="gds-onboarder__footer">
            <button data-gds-onboarder-arrow="prev" class="gds-onboarder__button gds-onboarder__button--left -disabled -pointer-events--none"><i class="fa fa-fw fa-caret-left"></i></button>
            <div class="gds-onboarder__timeline-wrapper">
                <div class="gds-timeline" data-gds-timeline="">
                    <ul class="gds-timeline__items">
                        <li class="gds-timeline__item gds-timeline__item--active" data-gds-timeline-item="active">
                            <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div>
                        </li>
                        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
                            <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div>
                        </li>
                        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
                            <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div>
                        </li>
                        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
                            <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div>
                        </li>
                        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
                            <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div>
                        </li>
                        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
                            <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div>
                        </li>
                        <div class="gds-timeline__progress-wrapper gds-timeline__progress-wrapper--no-label gds-timeline__progress-wrapper--white gds-timeline__progress-wrapper--sm">
                            <div class="gds-timeline__progress-indicator"></div>
                        </div>
                    </ul>
                </div>
            </div>
            <button data-gds-onboarder-arrow="next" class="gds-onboarder__button gds-onboarder__button--right"><i class="fa fa-fw fa-caret-right"></i></button>
        </div>
        <button class="gds-onboarder__close" data-gds-onboarder-close-button=""></button>
    </div>
    <div class="gds-onboarder__highlight" data-gds-onboarder-highlight=""></div>
</div>
<div class="gds-onboarder__overlay gds-onboarder--shown" data-gds-onboarder-container=""> <div class="gds-onboarder gds-onboarder--t-l" data-gds-onboarder=""> <div class="gds-onboarder__header"> <span class="gds-onboarder__step-num" data-gds-onboarder-step-num="">1</span> <h4 class="gds-text--header-sm -m-b-3" data-gds-onboarder-step-name="">Main navigation</h4> </div> <div class="gds-onboarder__body"> <p class="gds-text--body-sm" data-gds-onboarder-body="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="gds-onboarder__footer"> <button data-gds-onboarder-arrow="prev" class="gds-onboarder__button gds-onboarder__button--left -disabled -pointer-events--none"><i class="fa fa-fw fa-caret-left"></i></button> <div class="gds-onboarder__timeline-wrapper"> <div class="gds-timeline" data-gds-timeline=""> <ul class="gds-timeline__items"> <li class="gds-timeline__item gds-timeline__item--active" data-gds-timeline-item="active"> <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-icon gds-timeline__item-icon--white gds-timeline__item-icon--sm"></div> </li> <div class="gds-timeline__progress-wrapper gds-timeline__progress-wrapper--no-label gds-timeline__progress-wrapper--white gds-timeline__progress-wrapper--sm"> <div class="gds-timeline__progress-indicator"></div> </div> </ul> </div> </div> <button data-gds-onboarder-arrow="next" class="gds-onboarder__button gds-onboarder__button--right"><i class="fa fa-fw fa-caret-right"></i></button> </div> <button class="gds-onboarder__close" data-gds-onboarder-close-button=""></button> </div> <div class="gds-onboarder__highlight" data-gds-onboarder-highlight=""></div> </div>

Page-Header

The page-header component, prefixed by gds-page-header, is the standard fixed-position header component.

When using the page-header component, please add -has-page-header to the <body> tag for proper spacing.

Dan McKenna, Myles O'Connor

gds-spa-header

gds-page-header--dark

gds-page-header__nav-bar--dark

gds-page-header__secondary-nav--dark

gds-page-header__secondary-nav__icon-link--dark

<header class="gds-page-header">
    <div class="gds-page-header__product-bar">
        <h6 class="gds-page-header__product-name">Product Name</h6>
        <img class="gds-page-header__logo gds-page-header__logo--expanded" src="https://c.gumgum.com/ads/com/gumgum/logo/logo-white.svg" />
    </div>
    <div class="gds-page-header__nav-bar">
        <div class="gds-page-header__primary-nav" data-gds-slide-nav-button>
            <button class="gds-page-header__menu">
                <span class="gds-page-header__menu-line"></span>
                <span class="gds-page-header__menu-line"></span>
                <span class="gds-page-header__menu-line"></span>
                <span class="gds-page-header__menu-line"></span>
            </button>
            <h4 class="gds-page-header__page-name" data-gds-page-name>Page Name</h4>
        </div>
        <div class="gds-page-header__breadcrumb-nav">
                <ul class="gds-page-header__breadcrumbs">
                    <li class="gds-page-header__breadcrumbs-list-item">
                        <a class="gds-page-header__breadcrumbs-link" href="#">These</a>
                    </li>
                    <li class="gds-page-header__breadcrumbs-list-item gds-page-header__breadcrumbs-list-item--has-menu">
                        <div class="gds-page-header__breadcrumbs-menu" data-gds-bubble-button="[data-gds-bubble-menu='breadcrumb-menu']" data-gds-active-class="gds-page-header__breadcrumbs-menu--active">
                            <div class="gds-page-header__breadcrumbs-menu-dots"></div>
                            <div class="gds-bubble__menu gds-bubble__menu--left gds-bubble__menu--sm" data-gds-bubble-menu="breadcrumb-menu">
                                <ul class="gds-bubble__menu-list">
                                    <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 1</a></li>
                                    <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 2</a></li>
                                    <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 3</a></li>
                                    <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 4</a></li>
                                </ul>
                            </div>
                        </div>
                        <a class="gds-page-header__breadcrumbs-link" href="#">Are</a>
                    </li>
                    <li class="gds-page-header__breadcrumbs-list-item">Breadcrumbs</li>
                </ul>
            </div>
        <div class="gds-page-header__secondary-nav">
            <div class="gds-avatar" data-gds-avatar>
                <div class="gds-avatar__image">
                    <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner">
                </div>
                <div class="gds-avatar__menu">
                    <ul class="gds-avatar__menu-list">
                        <li class="gds-avatar__menu-list-item -color-tx-lt-5 -ellipsis -p-h-3 -p-v-2">Ken Weiner</li>
                        <li class="gds-avatar__menu-list-divider"></li>
                        <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#">Profile</a></li>
                        <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#">Settings</a></li>
                        <li class="gds-avatar__menu-list-divider"></li>
                        <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="-clear-both"></div>
    </div>
</header>
<header class="gds-page-header"> <div class="gds-page-header__product-bar"> <h6 class="gds-page-header__product-name">Product Name</h6> <img class="gds-page-header__logo gds-page-header__logo--expanded" src="https://c.gumgum.com/ads/com/gumgum/logo/logo-white.svg" /> </div> <div class="gds-page-header__nav-bar"> <div class="gds-page-header__primary-nav" data-gds-slide-nav-button> <button class="gds-page-header__menu"> <span class="gds-page-header__menu-line"></span> <span class="gds-page-header__menu-line"></span> <span class="gds-page-header__menu-line"></span> <span class="gds-page-header__menu-line"></span> </button> <h4 class="gds-page-header__page-name" data-gds-page-name>Page Name</h4> </div> <div class="gds-page-header__breadcrumb-nav"> <ul class="gds-page-header__breadcrumbs"> <li class="gds-page-header__breadcrumbs-list-item"> <a class="gds-page-header__breadcrumbs-link" href="#">These</a> </li> <li class="gds-page-header__breadcrumbs-list-item gds-page-header__breadcrumbs-list-item--has-menu"> <div class="gds-page-header__breadcrumbs-menu" data-gds-bubble-button="[data-gds-bubble-menu='breadcrumb-menu']" data-gds-active-class="gds-page-header__breadcrumbs-menu--active"> <div class="gds-page-header__breadcrumbs-menu-dots"></div> <div class="gds-bubble__menu gds-bubble__menu--left gds-bubble__menu--sm" data-gds-bubble-menu="breadcrumb-menu"> <ul class="gds-bubble__menu-list"> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 1</a></li> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 2</a></li> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 3</a></li> <li class="gds-bubble__menu-list-item -ellipsis"><a class="gds-bubble__menu-list-link" href="#">Item Name 4</a></li> </ul> </div> </div> <a class="gds-page-header__breadcrumbs-link" href="#">Are</a> </li> <li class="gds-page-header__breadcrumbs-list-item">Breadcrumbs</li> </ul> </div> <div class="gds-page-header__secondary-nav"> <div class="gds-avatar" data-gds-avatar> <div class="gds-avatar__image"> <img src="https://assets.ggops.com/images/ken.png" height="100%" alt="Ken Weiner"> </div> <div class="gds-avatar__menu"> <ul class="gds-avatar__menu-list"> <li class="gds-avatar__menu-list-item -color-tx-lt-5 -ellipsis -p-h-3 -p-v-2">Ken Weiner</li> <li class="gds-avatar__menu-list-divider"></li> <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#">Profile</a></li> <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#">Settings</a></li> <li class="gds-avatar__menu-list-divider"></li> <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#">Logout</a></li> </ul> </div> </div> </div> <div class="-clear-both"></div> </div> </header>

Ranker Card

The ranker-card component is used to display a set of image cards in a ranker order. The value of the rank, the type object, and the number of rankings, are all customizable.

Dan McKenna, Myles O'Connor, Mike Watt

  • 1
  • 2
  • 3
  • 4

gds-ranker-card

gds-ranker-card--primary

gds-ranker-card--secondary

gds-ranker-card--tertiary

gds-ranker-card--sm

gds-ranker-card__number--sm

gds-ranker-card__number--primary

gds-ranker-card__number--secondary

gds-ranker-card__number--tertiary

<ul class="gds-ranker-card -m-b-3 -m-b-2-md">
    <li class="gds-ranker-card__item">
        <div class="gds-ranker-card__data-wrapper">
            <span class="gds-ranker-card__number">1</span>
            <div class="gds-ranker-card__footer">
                <p class="gds-ranker-card__stats">1,321,121,392,129</p>
                <label class="gds-ranker-card__label">Impressions</label>
            </div>
        </div>
        <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1469521669194-babb45599def?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" />
    </li>
    <li class="gds-ranker-card__item">
        <div class="gds-ranker-card__data-wrapper">
            <span class="gds-ranker-card__number">2</span>
            <div class="gds-ranker-card__footer">
                <p class="gds-ranker-card__stats">1,321,121,392,129</p>
                <label class="gds-ranker-card__label">Impressions</label>
            </div>
        </div>
        <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1467189386127-c4e5e31ee213?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" />
    </li>
    <li class="gds-ranker-card__item">
        <div class="gds-ranker-card__data-wrapper">
            <span class="gds-ranker-card__number">3</span>
            <div class="gds-ranker-card__footer">
                <p class="gds-ranker-card__stats">1,321,121,392,129</p>
                <label class="gds-ranker-card__label">Impressions</label>
            </div>
        </div>
        <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1423012373122-fff0a5d28cc9?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" />
    </li>
    <li class="gds-ranker-card__item">
        <div class="gds-ranker-card__data-wrapper">
            <span class="gds-ranker-card__number">4</span>
            <div class="gds-ranker-card__footer">
                <p class="gds-ranker-card__stats">1,321,121,392,129</p>
                <label class="gds-ranker-card__label">Impressions</label>
            </div>
        </div>
        <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1433588641602-7c1083c4f0e2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" />
    </li>
</ul>
<ul class="gds-ranker-card -m-b-3 -m-b-2-md"> <li class="gds-ranker-card__item"> <div class="gds-ranker-card__data-wrapper"> <span class="gds-ranker-card__number">1</span> <div class="gds-ranker-card__footer"> <p class="gds-ranker-card__stats">1,321,121,392,129</p> <label class="gds-ranker-card__label">Impressions</label> </div> </div> <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1469521669194-babb45599def?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" /> </li> <li class="gds-ranker-card__item"> <div class="gds-ranker-card__data-wrapper"> <span class="gds-ranker-card__number">2</span> <div class="gds-ranker-card__footer"> <p class="gds-ranker-card__stats">1,321,121,392,129</p> <label class="gds-ranker-card__label">Impressions</label> </div> </div> <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1467189386127-c4e5e31ee213?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" /> </li> <li class="gds-ranker-card__item"> <div class="gds-ranker-card__data-wrapper"> <span class="gds-ranker-card__number">3</span> <div class="gds-ranker-card__footer"> <p class="gds-ranker-card__stats">1,321,121,392,129</p> <label class="gds-ranker-card__label">Impressions</label> </div> </div> <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1423012373122-fff0a5d28cc9?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" /> </li> <li class="gds-ranker-card__item"> <div class="gds-ranker-card__data-wrapper"> <span class="gds-ranker-card__number">4</span> <div class="gds-ranker-card__footer"> <p class="gds-ranker-card__stats">1,321,121,392,129</p> <label class="gds-ranker-card__label">Impressions</label> </div> </div> <img class="gds-image" style="object-fit: cover" src="https://images.unsplash.com/photo-1433588641602-7c1083c4f0e2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" /> </li> </ul>

Ranker Grid

The gds-ranker-grid component is a set of ranker-ensign components, arranged in a responsive grid. It's used to show the rankings of a set of elements. It has no modifiers of its own, but all ranker-ensign modifiers apply to the items within this component as well.

Jarrod Dowalter

Golden State
Warriors
6 th
Golden State
Warriors
7 th
Golden State
Warriors
8 th
Golden State
Warriors
9 th
Golden State
Warriors
10 th
Golden State
Warriors
11 th
Golden State
Warriors
12 th
Golden State
Warriors
13 th
Golden State
Warriors
14 th
Golden State
Warriors
15 th
Golden State
Warriors
16 th
Golden State
Warriors
17 th
Golden State
Warriors
18 th
Golden State
Warriors
19 th
Golden State
Warriors
20 th
Golden State
Warriors
21 st
Golden State
Warriors
22 nd
Golden State
Warriors
23 rd
Golden State
Warriors
24 th
Golden State
Warriors
25 th
Golden State
Warriors
26 th
Golden State
Warriors
27 th
Golden State
Warriors
28 th
Golden State
Warriors
29 th
Golden State
Warriors
30 th

gds-ranker-grid

<div class="gds-ranker-grid">
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            6
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            7
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            8
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            9
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            10
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            11
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            12
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            13
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            14
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            15
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            16
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            17
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            18
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            19
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            20
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            21
            <sup class="gds-ranker-ensign__number--sup">
            st
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            22
            <sup class="gds-ranker-ensign__number--sup">
            nd
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            23
            <sup class="gds-ranker-ensign__number--sup">
            rd
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            24
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            25
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            26
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            27
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            28
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            29
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
    <div class="gds-ranker-grid__ensign">
        <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/>
        <div class="gds-ranker-ensign__content">
            <span class="gds-ranker-ensign__label">Golden State<br/></span>
            <span class="gds-ranker-ensign__title">Warriors</span>
        </div>
        <span class="gds-ranker-ensign__number">
            30
            <sup class="gds-ranker-ensign__number--sup">
            th
            </sup>
        </span>
    </div>
</div>
<div class="gds-ranker-grid"> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 6 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 7 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 8 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 9 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 10 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 11 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 12 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 13 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 14 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 15 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 16 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 17 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 18 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 19 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 20 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 21 <sup class="gds-ranker-ensign__number--sup"> st </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 22 <sup class="gds-ranker-ensign__number--sup"> nd </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 23 <sup class="gds-ranker-ensign__number--sup"> rd </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 24 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 25 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 26 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 27 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 28 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 29 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> <div class="gds-ranker-grid__ensign"> <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png"/> <div class="gds-ranker-ensign__content"> <span class="gds-ranker-ensign__label">Golden State<br/></span> <span class="gds-ranker-ensign__title">Warriors</span> </div> <span class="gds-ranker-ensign__number"> 30 <sup class="gds-ranker-ensign__number--sup"> th </sup> </span> </div> </div>

Refinery

The refinery component is intended to house controls to filter content. The contents of this component can be customized based on the developer's requirements. Breakpoints for the housing are predefined, but internal inputs should be wrapped by columns to ensure they fill the space properly across all sizes. It can persist between sections of a single page app or be exclusive to a single page of a multi-page app.

Mike Watt

gds-refinery

gds-refinery--menu-open

gds-refinery--menu-disabled

<div class="gds-refinery" data-gds-refinery>
    <div class="gds-refinery__container">
        <div class="gds-refinery__menu">
            <h1 class="gds-text--header-xs -m-t-1 -float-left -color-tx-dk-5">Global Filters</h1>
            <div class="gds-form-group -m-t-1 -float-right" data-gds-form-group="0">
                <div class="gds-form-group__toggleswitch">
                    <span class="gds-form-group__label">Disable All</span>
                    <label class="gds-form-group__toggleswitch-label">
                        <input class="gds-form-group__toggleswitch-input" type="checkbox" value="" data-gds-toggle-filters>
                        <span class="gds-form-group__toggleswitch-indicator"></span>
                    </label>
                </div>
            </div>
            <div class="gds-divider -m-b-0">
                <span class="gds-divider__line"></span>
            </div>
            <div class="gds-layout__row">
                <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1">
                    <div class="gds-form-group">
                        <label class="gds-form-group__label">Brands</label>
                        <div class="gds-search-select" data-gds-search-select="multi" data-gds-search-select-size="sm">
                            <div class="gds-search-select__control" data-gds-search-select-control="">
                                <input id="searcchselect-input-0" type="text" placeholder="Choose a State..." class="gds-search-select__input gds-search-select__input--sm" data-gds-search-select-input="" autocomplete="off">
                                <button class="gds-search-select__toggle-button" data-gds-search-select-toggle=""></button>
                            </div>
                            <div class="gds-search-select__tag-holder gds-search-select__tag-holder--bubble gds-search-select__tag-holder--bubble-sm" data-gds-search-select-tag-holder=""></div>
                            <div class="gds-search-select__menu" data-gds-search-select-menu="">
                                <ul class="gds-search-select__menu-items" data-gds-search-select-list="">
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="0">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Alaska
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="1">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Arizona
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="2">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Arkansas
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="3">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>California
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="4">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Connecticut
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="5">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Deleware
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="6">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>DC
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="7">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Florida
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="8">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Georgia
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="9">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Hawaii
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="10">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Idaho
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="11">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Illinois
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="12">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Indiana
                                    </li>
                                    <li class="gds-search-select__menu-item" data-gds-search-select-item="13">
                                        <label class="gds-search-select__checkbox">
                                            <input class="gds-search-select__checkbox-input" type="checkbox" value="">
                                            <span class="gds-search-select__checkbox-indicator"></span>
                                        </label>Iowa
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1">
                    <div class="gds-form-group">
                        <label class="gds-form-group__label">Account Type</label>
                        <div class="gds-multi-select gds-multi-select--sm" data-gds-dropdown="">
                            <div class="gds-multi-select__button gds-multi-select__button--sm" data-gds-dropdown-button="">Multi-select</div>
                            <ul class="gds-multi-select__menu">
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Check All
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 1
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 2
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 3
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 4
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1">
                    <div class="gds-form-group">
                        <label class="gds-form-group__label">Network</label>
                        <div class="gds-multi-select gds-multi-select--sm" data-gds-dropdown="">
                            <div class="gds-multi-select__button gds-multi-select__button--sm" data-gds-dropdown-button="">Multi-select</div>
                            <ul class="gds-multi-select__menu">
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Check All
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 1
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 2
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 3
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 4
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1">
                    <div class="gds-form-group">
                        <label class="gds-form-group__label">Event</label>
                        <div class="gds-multi-select gds-multi-select--sm" data-gds-dropdown="">
                            <div class="gds-multi-select__button gds-multi-select__button--sm" data-gds-dropdown-button="">Multi-select</div>
                            <ul class="gds-multi-select__menu">
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Check All
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 1
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 2
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 3
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="gds-multi-select__menu-item">
                                    <div class="gds-multi-select__menu-link">
                                        <div class="gds-form-group gds-multi-select__option" data-gds-form-group="">
                                            <div class="gds-form-group__checkbox">
                                                <label class="gds-form-group__checkbox-label" data-gds-label="">
                                                    <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input="">
                                                    <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 4
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-2-sm -m-b-2">
                    <div class="gds-form-group">
                        <label class="gds-form-group__label">Start Date</label>
                        <div class="gds-form-group__input-group">
                            <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/15">
                            <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar"></i></button>
                        </div>
                    </div>
                </div>
                <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-3-sm -m-b-2">
                    <div class="gds-form-group">
                        <label class="gds-form-group__label">End Date</label>
                        <div class="gds-form-group__input-group">
                            <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/16">
                            <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar"></i></button>
                        </div>
                    </div>
                </div>
                <div class="gds-divider gds-divider--collapsible -p-h-2 -m-b-2" data-gds-divider="10">
                    <span class="gds-divider__label gds-form-group__label">Active Filters</span>
                    <span class="gds-divider__line"></span>
                    <span class="gds-divider__arrow" data-gds-arrow=""></span>
                </div>
                <div class="gds-segment -p-h-2" data-gds-segment="10">
                    <div class="gds-tag gds-tag--green gds-tag--with-button-sm gds-tag--sm gds-button--block-sm">
                        <span class="gds-form-group__label -color-tx-white -m-b-0">Location:</span> Los Angeles<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button>
                    </div>
                    <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm">
                        <span class="gds-form-group__label -color-tx-white -m-b-0">Start Date:</span> 12/01/15<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button>
                        </div>
                    <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm">
                        <span class="gds-form-group__label -color-tx-white -m-b-0">End Date:</span> 12/01/16<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button>
                    </div>
                    <div class="gds-tag gds-tag--blue gds-tag--with-button-sm gds-tag--sm gds-button--block-sm">
                        <span class="gds-form-group__label -color-tx-white -m-b-0">Keyword:</span> #cocacola<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" data-gds-refinery-tab class="gds-refinery__button gds-button gds-button--primary">
            <i class="gds-refinery__open-icon fa fa-angle-double-up -m-r-1"></i>
            <i class="gds-refinery__close-icon fa fa-angle-double-down -m-r-2"></i>Filters
            <span class="gds-badge gds-badge--danger-inverse">1</span>
        </button>
    </div>
</div>
<div class="gds-refinery" data-gds-refinery> <div class="gds-refinery__container"> <div class="gds-refinery__menu"> <h1 class="gds-text--header-xs -m-t-1 -float-left -color-tx-dk-5">Global Filters</h1> <div class="gds-form-group -m-t-1 -float-right" data-gds-form-group="0"> <div class="gds-form-group__toggleswitch"> <span class="gds-form-group__label">Disable All</span> <label class="gds-form-group__toggleswitch-label"> <input class="gds-form-group__toggleswitch-input" type="checkbox" value="" data-gds-toggle-filters> <span class="gds-form-group__toggleswitch-indicator"></span> </label> </div> </div> <div class="gds-divider -m-b-0"> <span class="gds-divider__line"></span> </div> <div class="gds-layout__row"> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label">Brands</label> <div class="gds-search-select" data-gds-search-select="multi" data-gds-search-select-size="sm"> <div class="gds-search-select__control" data-gds-search-select-control=""> <input id="searcchselect-input-0" type="text" placeholder="Choose a State..." class="gds-search-select__input gds-search-select__input--sm" data-gds-search-select-input="" autocomplete="off"> <button class="gds-search-select__toggle-button" data-gds-search-select-toggle=""></button> </div> <div class="gds-search-select__tag-holder gds-search-select__tag-holder--bubble gds-search-select__tag-holder--bubble-sm" data-gds-search-select-tag-holder=""></div> <div class="gds-search-select__menu" data-gds-search-select-menu=""> <ul class="gds-search-select__menu-items" data-gds-search-select-list=""> <li class="gds-search-select__menu-item" data-gds-search-select-item="0"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Alaska </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="1"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Arizona </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="2"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Arkansas </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="3"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>California </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="4"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Connecticut </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="5"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Deleware </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="6"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>DC </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="7"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Florida </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="8"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Georgia </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="9"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Hawaii </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="10"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Idaho </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="11"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Illinois </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="12"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Indiana </li> <li class="gds-search-select__menu-item" data-gds-search-select-item="13"> <label class="gds-search-select__checkbox"> <input class="gds-search-select__checkbox-input" type="checkbox" value=""> <span class="gds-search-select__checkbox-indicator"></span> </label>Iowa </li> </ul> </div> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label">Account Type</label> <div class="gds-multi-select gds-multi-select--sm" data-gds-dropdown=""> <div class="gds-multi-select__button gds-multi-select__button--sm" data-gds-dropdown-button="">Multi-select</div> <ul class="gds-multi-select__menu"> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Check All </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 1 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 2 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 3 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 4 </label> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label">Network</label> <div class="gds-multi-select gds-multi-select--sm" data-gds-dropdown=""> <div class="gds-multi-select__button gds-multi-select__button--sm" data-gds-dropdown-button="">Multi-select</div> <ul class="gds-multi-select__menu"> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Check All </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 1 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 2 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 3 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 4 </label> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-1"> <div class="gds-form-group"> <label class="gds-form-group__label">Event</label> <div class="gds-multi-select gds-multi-select--sm" data-gds-dropdown=""> <div class="gds-multi-select__button gds-multi-select__button--sm" data-gds-dropdown-button="">Multi-select</div> <ul class="gds-multi-select__menu"> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Check All </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 1 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 2 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 3 </label> </div> </div> </div> </li> <li class="gds-multi-select__menu-item"> <div class="gds-multi-select__menu-link"> <div class="gds-form-group gds-multi-select__option" data-gds-form-group=""> <div class="gds-form-group__checkbox"> <label class="gds-form-group__checkbox-label" data-gds-label=""> <input class="gds-form-group__checkbox-input" type="checkbox" value="" data-gds-input=""> <span class="gds-form-group__checkbox-indicator"></span>Checkbox Option 4 </label> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-2-sm -m-b-2"> <div class="gds-form-group"> <label class="gds-form-group__label">Start Date</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/15"> <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar"></i></button> </div> </div> </div> <div class="gds-layout__column--xl-4 gds-layout__column--lg-4 gds-layout__column--md-6 -m-b-3-sm -m-b-2"> <div class="gds-form-group"> <label class="gds-form-group__label">End Date</label> <div class="gds-form-group__input-group"> <input class="gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--right-edge" type="text" placeholder="12/01/16"> <button class="gds-button gds-button--primary gds-button--button-cap gds-button--button-cap-sm"><i class="fa fa-calendar"></i></button> </div> </div> </div> <div class="gds-divider gds-divider--collapsible -p-h-2 -m-b-2" data-gds-divider="10"> <span class="gds-divider__label gds-form-group__label">Active Filters</span> <span class="gds-divider__line"></span> <span class="gds-divider__arrow" data-gds-arrow=""></span> </div> <div class="gds-segment -p-h-2" data-gds-segment="10"> <div class="gds-tag gds-tag--green gds-tag--with-button-sm gds-tag--sm gds-button--block-sm"> <span class="gds-form-group__label -color-tx-white -m-b-0">Location:</span> Los Angeles<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button> </div> <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm"> <span class="gds-form-group__label -color-tx-white -m-b-0">Start Date:</span> 12/01/15<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button> </div> <div class="gds-tag gds-tag--red gds-tag--with-button-sm gds-tag--sm gds-button--block-sm"> <span class="gds-form-group__label -color-tx-white -m-b-0">End Date:</span> 12/01/16<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button> </div> <div class="gds-tag gds-tag--blue gds-tag--with-button-sm gds-tag--sm gds-button--block-sm"> <span class="gds-form-group__label -color-tx-white -m-b-0">Keyword:</span> #cocacola<button class="gds-tag__button gds-tag__button--sm gds-tag__button--primary"></button> </div> </div> </div> </div> <button type="button" data-gds-refinery-tab class="gds-refinery__button gds-button gds-button--primary"> <i class="gds-refinery__open-icon fa fa-angle-double-up -m-r-1"></i> <i class="gds-refinery__close-icon fa fa-angle-double-down -m-r-2"></i>Filters <span class="gds-badge gds-badge--danger-inverse">1</span> </button> </div> </div>

Ribbon

The gds-ribbon component is used for displaying and choosing from a set of icon-based tools. Its most common use case is for web based visual IDEs where a user would be expected to manipulate elements in a workspace using a common set of tools. Tools on the ribbon can be nested within expandable menus or simply toggled on/off directly.

Dan McKenna

gds-ribbon

gds-ribbon--vertical-left

gds-ribbon--vertical-right

gds-ribbon--white

<ul class="gds-ribbon -m-t-6" data-gds-ribbon="">
    <li class="gds-ribbon__item gds-ribbon__item--expandable" data-gds-ribbon-item="">
        <button class="gds-ribbon__button gds-ribbon__button--expandable gds-ribbon__button--active" data-gds-ribbon-expander-button="1" data-gds-base-class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack" data-tooltip="Pinning (P)">
            <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack fa-rotate-90" aria-hidden="true"></i>
        </button>
        <div class="gds-ribbon__bubble-menu gds-ribbon__bubble-menu--open" data-gds-ribbon-bubble-menu="1">
            <ul class="gds-ribbon__bubble-menu-list">
                <li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <button class="gds-ribbon__button gds-ribbon__button--active" data-gds-ribbon-button="toggle" data-gds-callback-class="fa-rotate-90" data-tooltip="Pin Left">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack fa-rotate-90" aria-hidden="true"></i>
                    </button>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <button class="gds-ribbon__button" data-gds-ribbon-button="toggle" data-gds-callback-class="" data-tooltip="Pin Center">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack" aria-hidden="true"></i>
                    </button>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <button class="gds-ribbon__button" data-gds-ribbon-button="toggle" data-gds-callback-class="fa-rotate-270" data-tooltip="Pin Right">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack fa-rotate-270" aria-hidden="true"></i>
                    </button>
                </li>
            </ul>
        </div>
    </li>
    <li class="gds-ribbon__item gds-ribbon__item--expandable" data-gds-ribbon-item="">
        <button class="gds-ribbon__button gds-ribbon__button--expandable" data-gds-ribbon-expander-button="3" data-tooltip="Movement (M)">
            <i data-gds-ribbon-button-icon="" class="gds-ribbon__button-icon fa fa-fw fa-arrows" aria-hidden="true"></i>
        </button>
        <div class="gds-ribbon__bubble-menu" data-gds-ribbon-bubble-menu="3">
            <ul class="gds-ribbon__bubble-menu-list">
                <li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <div class="gds-ribbon__icon-wrapper">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-arrows-h" aria-hidden="true"></i>
                    </div>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <div class="gds-ribbon__form-group">
                        <input class="gds-ribbon__text-input" data-gds-ribbon-input maxlength="4" type="text" placeholder="" value="32">
                    </div>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <div class="gds-ribbon__form-group">
                        <select class="gds-ribbon__select-input">
                            <option>px</option>
                            <option>%</option>
                        </select>
                    </div>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <div class="gds-ribbon__icon-wrapper">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-arrows-v" aria-hidden="true"></i>
                    </div>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <div class="gds-ribbon__form-group">
                        <input class="gds-ribbon__text-input" maxlength="4" type="text" placeholder="" value="32">
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li class="gds-ribbon__item gds-ribbon__item--expandable" data-gds-ribbon-item="">
        <button class="gds-ribbon__button gds-ribbon__button--expandable" data-gds-ribbon-expander-button="4" data-tooltip="Layers (L)">
            <i data-gds-ribbon-button-icon="" class="gds-ribbon__button-icon fa fa-fw fa-sort" aria-hidden="true"></i>
        </button>
        <div class="gds-ribbon__bubble-menu" data-gds-ribbon-bubble-menu="4">
            <ul class="gds-ribbon__bubble-menu-list">
                <li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <button class="gds-ribbon__button" data-gds-ribbon-button="" data-gds-ribbon-button-no-active="">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-caret-down" aria-hidden="true"></i>
                    </button>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <div class="gds-ribbon__form-group">
                        <input class="gds-ribbon__text-input" maxlength="4" type="text" placeholder="" value="1">
                    </div>
                </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item="">
                    <button class="gds-ribbon__button" data-gds-ribbon-button="" data-gds-ribbon-button-no-active="">
                        <i class="gds-ribbon__button-icon fa fa-fw fa-caret-up" aria-hidden="true"></i>
                    </button>
                </li>
            </ul>
        </div>
    </li>
</ul>
<ul class="gds-ribbon -m-t-6" data-gds-ribbon=""> <li class="gds-ribbon__item gds-ribbon__item--expandable" data-gds-ribbon-item=""> <button class="gds-ribbon__button gds-ribbon__button--expandable gds-ribbon__button--active" data-gds-ribbon-expander-button="1" data-gds-base-class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack" data-tooltip="Pinning (P)"> <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack fa-rotate-90" aria-hidden="true"></i> </button> <div class="gds-ribbon__bubble-menu gds-ribbon__bubble-menu--open" data-gds-ribbon-bubble-menu="1"> <ul class="gds-ribbon__bubble-menu-list"> <li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <button class="gds-ribbon__button gds-ribbon__button--active" data-gds-ribbon-button="toggle" data-gds-callback-class="fa-rotate-90" data-tooltip="Pin Left"> <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack fa-rotate-90" aria-hidden="true"></i> </button> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <button class="gds-ribbon__button" data-gds-ribbon-button="toggle" data-gds-callback-class="" data-tooltip="Pin Center"> <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack" aria-hidden="true"></i> </button> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <button class="gds-ribbon__button" data-gds-ribbon-button="toggle" data-gds-callback-class="fa-rotate-270" data-tooltip="Pin Right"> <i class="gds-ribbon__button-icon fa fa-fw fa-thumb-tack fa-rotate-270" aria-hidden="true"></i> </button> </li> </ul> </div> </li> <li class="gds-ribbon__item gds-ribbon__item--expandable" data-gds-ribbon-item=""> <button class="gds-ribbon__button gds-ribbon__button--expandable" data-gds-ribbon-expander-button="3" data-tooltip="Movement (M)"> <i data-gds-ribbon-button-icon="" class="gds-ribbon__button-icon fa fa-fw fa-arrows" aria-hidden="true"></i> </button> <div class="gds-ribbon__bubble-menu" data-gds-ribbon-bubble-menu="3"> <ul class="gds-ribbon__bubble-menu-list"> <li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <div class="gds-ribbon__icon-wrapper"> <i class="gds-ribbon__button-icon fa fa-fw fa-arrows-h" aria-hidden="true"></i> </div> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <div class="gds-ribbon__form-group"> <input class="gds-ribbon__text-input" data-gds-ribbon-input maxlength="4" type="text" placeholder="" value="32"> </div> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <div class="gds-ribbon__form-group"> <select class="gds-ribbon__select-input"> <option>px</option> <option>%</option> </select> </div> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <div class="gds-ribbon__icon-wrapper"> <i class="gds-ribbon__button-icon fa fa-fw fa-arrows-v" aria-hidden="true"></i> </div> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <div class="gds-ribbon__form-group"> <input class="gds-ribbon__text-input" maxlength="4" type="text" placeholder="" value="32"> </div> </li> </ul> </div> </li> <li class="gds-ribbon__item gds-ribbon__item--expandable" data-gds-ribbon-item=""> <button class="gds-ribbon__button gds-ribbon__button--expandable" data-gds-ribbon-expander-button="4" data-tooltip="Layers (L)"> <i data-gds-ribbon-button-icon="" class="gds-ribbon__button-icon fa fa-fw fa-sort" aria-hidden="true"></i> </button> <div class="gds-ribbon__bubble-menu" data-gds-ribbon-bubble-menu="4"> <ul class="gds-ribbon__bubble-menu-list"> <li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <button class="gds-ribbon__button" data-gds-ribbon-button="" data-gds-ribbon-button-no-active=""> <i class="gds-ribbon__button-icon fa fa-fw fa-caret-down" aria-hidden="true"></i> </button> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <div class="gds-ribbon__form-group"> <input class="gds-ribbon__text-input" maxlength="4" type="text" placeholder="" value="1"> </div> </li><li class="gds-ribbon__bubble-menu-item" data-gds-ribbon-bubble-menu-item=""> <button class="gds-ribbon__button" data-gds-ribbon-button="" data-gds-ribbon-button-no-active=""> <i class="gds-ribbon__button-icon fa fa-fw fa-caret-up" aria-hidden="true"></i> </button> </li> </ul> </div> </li> </ul>

SPA-Header

The spa-header component, prefixed by gds-spa-header, is an alternative, simplified header component for single-page applications.

When using the spa-header component, please add -has-spa-header to the <body> tag for proper spacing.

Myles O'Connor

gds-spa-header

gds-spa-header__product-name--two-lines

gds-spa-header__section--white

gds-spa-header__section--product

<header class="gds-spa-header">
    <div class="gds-spa-header__primary-nav">
        <div class="gds-spa-header__section gds-spa-header__section-icon">
            <a class="gds-spa-header__section-link" href="#back"><i class="btl bt-arrow-left"></i></a>
        </div>
        <div class="gds-spa-header__section gds-spa-header__section-icon">
            <img class="gds-spa-header__logo-mark" src="https://c.gumgum.com/ads/com/gumgum/logo/logo-mark.svg" />
        </div>
        <div class="gds-spa-header__section gds-spa-header__section--product">
            <h6 class="gds-page-header__product-name">Product Name</h6>
        </div>
    </div>
    <div class="gds-spa-header__secondary-nav">
        <div class="gds-spa-header__section gds-spa-header__section-icon">
            <a class="gds-spa-header__section-link" href="#search"><i class="btl bt-search"></i></a>
        </div>
        <div class="gds-spa-header__section gds-spa-header__section-icon">
            <a class="gds-spa-header__section-link" href="#alerts"><i class="btl bt-bell"></i></a>
        </div>
        <div class="gds-spa-header__section gds-spa-header__section-icon">
            <a class="gds-spa-header__section-link" href="#logout"><i class="btl bt-sign-out"></i></a>
        </div>
        <div class="gds-spa-header__section gds-spa-header__section--white">
            <div class="gds-avatar -m-l-2" data-gds-avatar>
                <div class="gds-avatar__image">
                    <img src="https://c.gumgum.com/ads/com/gumgum/documentation/avatars/avatar--default2.jpg" alt="User Name" height="100%" />
                </div>
                <div class="gds-avatar__menu">
                    <ul class="gds-avatar__menu-list">
                        <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#profile">Profile</a></li>
                        <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#settings">Settings</a></li>
                        <li class="gds-avatar__menu-list-divider"></li>
                        <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#logout">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>
<header class="gds-spa-header"> <div class="gds-spa-header__primary-nav"> <div class="gds-spa-header__section gds-spa-header__section-icon"> <a class="gds-spa-header__section-link" href="#back"><i class="btl bt-arrow-left"></i></a> </div> <div class="gds-spa-header__section gds-spa-header__section-icon"> <img class="gds-spa-header__logo-mark" src="https://c.gumgum.com/ads/com/gumgum/logo/logo-mark.svg" /> </div> <div class="gds-spa-header__section gds-spa-header__section--product"> <h6 class="gds-page-header__product-name">Product Name</h6> </div> </div> <div class="gds-spa-header__secondary-nav"> <div class="gds-spa-header__section gds-spa-header__section-icon"> <a class="gds-spa-header__section-link" href="#search"><i class="btl bt-search"></i></a> </div> <div class="gds-spa-header__section gds-spa-header__section-icon"> <a class="gds-spa-header__section-link" href="#alerts"><i class="btl bt-bell"></i></a> </div> <div class="gds-spa-header__section gds-spa-header__section-icon"> <a class="gds-spa-header__section-link" href="#logout"><i class="btl bt-sign-out"></i></a> </div> <div class="gds-spa-header__section gds-spa-header__section--white"> <div class="gds-avatar -m-l-2" data-gds-avatar> <div class="gds-avatar__image"> <img src="https://c.gumgum.com/ads/com/gumgum/documentation/avatars/avatar--default2.jpg" alt="User Name" height="100%" /> </div> <div class="gds-avatar__menu"> <ul class="gds-avatar__menu-list"> <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#profile">Profile</a></li> <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#settings">Settings</a></li> <li class="gds-avatar__menu-list-divider"></li> <li class="gds-avatar__menu-list-item -ellipsis"><a class="gds-avatar__menu-list-link" href="#logout">Logout</a></li> </ul> </div> </div> </div> </div> </header>

Search

The search component, prefixed by gds-search, is a centered global search input. The search component is hidden by default. Add the modifier class gds-search--shown to gds-search to show the search input.

For asynchronous live search with typeahead suggestions, use a standard input without a button cap, along with the gds-search__typeahead list of typeahead results. For a simple synchronous search without typeahead results, use a button-capped input so that the user can click the button or press their Enter key to perform the search and navigate to a list of search results.

Myles O'Connor

gds-search

gds-search--shown

gds-search--no-result

<div class="gds-search" data-gds-search>
    <div class="gds-search__input-holder" data-gds-search-input-holder>
        <div class="gds-form-group gds-search__form-group">
            <div class="gds-form-group__text-input--button-cap">
                <input class="gds-form-group__text-input" type="text" placeholder="Search..." data-gds-search-input="">
                <i class="gds-form-group__text-input-icon btl bt-search"></i>
            </div>
        </div>
        <ul class="gds-search__typeahead">
            <li class="gds-search__typeahead-item gds-search__typeahead-item--selected" data-gds-typeahead-index="0" data-gds-typahead-selected=true><a href="#alabama">Alabama - Selected</a></li>
            <li class="gds-search__typeahead-item" data-gds-typeahead-index="1"><a href="#alabama">Alaska</a></li>
            <li class="gds-search__typeahead-item" data-gds-typeahead-index="2"><a href="#alabama">Arizona</a></li>
            <li class="gds-search__typeahead-item" data-gds-typeahead-index="3"><a href="#alabama">Arkansas</a></li>
            <li class="gds-search__typeahead-item" data-gds-typeahead-index="4"><a href="#alabama">California</a></li>
            <li class="gds-search__typeahead-item" data-gds-typeahead-index="5" data-gds-no-results>No Results</li>
        </ul>
    </div>
</div>
<div class="gds-search" data-gds-search> <div class="gds-search__input-holder" data-gds-search-input-holder> <div class="gds-form-group gds-search__form-group"> <div class="gds-form-group__text-input--button-cap"> <input class="gds-form-group__text-input" type="text" placeholder="Search..." data-gds-search-input=""> <i class="gds-form-group__text-input-icon btl bt-search"></i> </div> </div> <ul class="gds-search__typeahead"> <li class="gds-search__typeahead-item gds-search__typeahead-item--selected" data-gds-typeahead-index="0" data-gds-typahead-selected=true><a href="#alabama">Alabama - Selected</a></li> <li class="gds-search__typeahead-item" data-gds-typeahead-index="1"><a href="#alabama">Alaska</a></li> <li class="gds-search__typeahead-item" data-gds-typeahead-index="2"><a href="#alabama">Arizona</a></li> <li class="gds-search__typeahead-item" data-gds-typeahead-index="3"><a href="#alabama">Arkansas</a></li> <li class="gds-search__typeahead-item" data-gds-typeahead-index="4"><a href="#alabama">California</a></li> <li class="gds-search__typeahead-item" data-gds-typeahead-index="5" data-gds-no-results>No Results</li> </ul> </div> </div>

Slide-Nav

The slide-nav component, prefixed by gds-slide-nav, is the standard off-canvas navigation component. The slide-nav component works in combination with the gds-page-header component to provide accessible navigation on mobile, tablet and desktop devices.

Note: When including the gds-slide-nav component, you must include the -has-slide-nav class on the <body> tag to correctly offset the page content.

Dan McKenna

<nav class="gds-slide-nav">
    <h2 class="gds-slide-nav__user-name gds-text--header-sm">Ken Weiner</h2>
    <div class="gds-slide-nav__group">
        <label class="gds-slide-nav__label">Main Menu</label>
        <ul class="gds-slide-nav__list">
            <li class="gds-slide-nav__list-item gds-slide-nav__list-item--primary gds-slide-nav__list-item--has-children">
                <a class="gds-slide-nav__link gds-slide-nav__link--expandable" href="#" data-gds-expandable>Section One</a>
                <ul class="gds-slide-nav__list gds-slide-nav__list--nested" data-gds-expand-list>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                </ul>
            </li>
            <li class="gds-slide-nav__list-item gds-slide-nav__list-item--primary gds-slide-nav__list-item--has-children">
                <a class="gds-slide-nav__link gds-slide-nav__link--expandable" href="#" data-gds-expandable>Section Two</a>
                <ul class="gds-slide-nav__list gds-slide-nav__list--nested" data-gds-expand-list>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                    <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<nav class="gds-slide-nav"> <h2 class="gds-slide-nav__user-name gds-text--header-sm">Ken Weiner</h2> <div class="gds-slide-nav__group"> <label class="gds-slide-nav__label">Main Menu</label> <ul class="gds-slide-nav__list"> <li class="gds-slide-nav__list-item gds-slide-nav__list-item--primary gds-slide-nav__list-item--has-children"> <a class="gds-slide-nav__link gds-slide-nav__link--expandable" href="#" data-gds-expandable>Section One</a> <ul class="gds-slide-nav__list gds-slide-nav__list--nested" data-gds-expand-list> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> </ul> </li> <li class="gds-slide-nav__list-item gds-slide-nav__list-item--primary gds-slide-nav__list-item--has-children"> <a class="gds-slide-nav__link gds-slide-nav__link--expandable" href="#" data-gds-expandable>Section Two</a> <ul class="gds-slide-nav__list gds-slide-nav__list--nested" data-gds-expand-list> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> <li><a href="#" class="gds-slide-nav__link" data-gds-nav-closer>Item</a></li> </ul> </li> </ul> </div> </nav>

Timeline

The timeline component, prefixed by gds-timeline, is used to indicate the number of completed steps in a given procedure. Add the modifier class gds-timeline__item--active to gds-timeline__item to show the current step the user is on.

Dan McKenna

  • Step 1
  • Step 2
  • Step 3
  • Step 4

gds-timeline

<div class="gds-timeline" data-gds-timeline>
    <ul class="gds-timeline__items">
        <li class="gds-timeline__item gds-timeline__item--completed" data-gds-timeline-item="completed">
            <div class="gds-timeline__item-label">Step 1</div>
            <div class="gds-timeline__item-icon"></div>
        </li>
        <li class="gds-timeline__item gds-timeline__item--active" data-gds-timeline-item="active">
            <div class="gds-timeline__item-label">Step 2</div>
            <div class="gds-timeline__item-icon"></div>
        </li>
        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
            <div class="gds-timeline__item-label">Step 3</div>
            <div class="gds-timeline__item-icon"></div>
        </li>
        <li class="gds-timeline__item" data-gds-timeline-item="inactive">
            <div class="gds-timeline__item-label">Step 4</div>
            <div class="gds-timeline__item-icon"></div>
        </li>
        <div class="gds-timeline__progress-wrapper">
            <div class="gds-timeline__progress-indicator"></div>
        </div>
    </ul>
</div>
<div class="gds-timeline" data-gds-timeline> <ul class="gds-timeline__items"> <li class="gds-timeline__item gds-timeline__item--completed" data-gds-timeline-item="completed"> <div class="gds-timeline__item-label">Step 1</div> <div class="gds-timeline__item-icon"></div> </li> <li class="gds-timeline__item gds-timeline__item--active" data-gds-timeline-item="active"> <div class="gds-timeline__item-label">Step 2</div> <div class="gds-timeline__item-icon"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-label">Step 3</div> <div class="gds-timeline__item-icon"></div> </li> <li class="gds-timeline__item" data-gds-timeline-item="inactive"> <div class="gds-timeline__item-label">Step 4</div> <div class="gds-timeline__item-icon"></div> </li> <div class="gds-timeline__progress-wrapper"> <div class="gds-timeline__progress-indicator"></div> </div> </ul> </div>

Toolbelt

The gds-toolbelt component is used to display a tool palette, similar in appearance to the menus from Photoshop or Illustrator.

Dan McKenna, Myles O'Connor

  • 5
  • Tile asset
  • Apply shape to asset
    Apply shape to asset
    Apply shape to asset
    Apply shape to asset
    Apply shape to asset
    Apply shape to asset
  • Apply shadow to asset

gds-toolbelt

gds-toolbelt__item--with-options

gds-toolbelt__item--disabled

gds-toolbelt__item--stretch

gds-toolbelt__item-icon--active

gds-toolbelt__item

gds-toolbelt__item-icon--expanded

gds-toolbelt__pouch--open

gds-toolbelt__pouch-item-icon--active

<div class="gds-toolbelt" data-gds-toolbelt>
    <ul class="gds-toolbelt__items" data-gds-toolbelt-items>
        <li class="gds-toolbelt__item" data-gds-toolbelt-item>
            <div class="gds-toolbelt__item-zone">
                <div class="gds-toolbelt__item-icon" title="Lock or unlock selected asset" data-gds-toolbelt-action="toggle-lock">
                    <i class="btl bt-lock-open"></i>
                </div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Lock</label>
        </li>
        <li class="gds-toolbelt__item" data-gds-toolbelt-item>
            <div class="gds-toolbelt__item-zone">
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--pin gds-toolbelt__item-icon--active" title="Pin asset left" data-gds-toolbelt-action="pin-left">
                    <i class="btl bt-push-pin"></i>
                </div>
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--pin" title="Pin asset bottom" data-gds-toolbelt-action="pin-center">
                    <i class="btl bt-push-pin"></i>
                </div>
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--pin" title="Pin asset right" data-gds-toolbelt-action="pin-right">
                    <i class="btl bt-push-pin"></i>
                </div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Pin</label>
        </li>
        <li class="gds-toolbelt__item gds-toolbelt__item--stretch" data-gds-toolbelt-item>
            <div class="gds-toolbelt__item-zone">
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--move">
                    <i class="btl bt-long-arrow-left" title="Move asset horizontally"></i>
                    <div class="gds-form-group gds-toolbelt__item-form-group">
                        <div class="gds-form-group__input-group">
                            <input class="gds-toolbelt__item-input gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--dark gds-form-group__text-input--right-edge" type="number"/>
                            <button class="gds-toolbelt__item-input-button gds-button--dark gds-button gds-button--sm gds-button--button-cap -color-tx-white" data-gds-toolbelt-action="toggle-unit">px</button>
                        </div>
                    </div>
                </div>
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--move">
                    <i class="btl bt-long-arrow-up" title="Move asset vertically"></i>
                    <div class="gds-form-group gds-toolbelt__item-form-group">
                        <div class="gds-form-group__input-group">
                            <input class="gds-toolbelt__item-input gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--dark gds-form-group__text-input--right-edge" type="number"/>
                            <button class="gds-toolbelt__item-input-button gds-button gds-button--sm gds-button--dark gds-button--button-cap -color-tx-white" data-gds-toolbelt-action="toggle-unit">px</button>
                        </div>
                    </div>
                </div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Move</label>
        </li>
        <li class="gds-toolbelt__item" data-gds-toolbelt-item>
            <div class="gds-toolbelt__item-zone gds-toolbelt__item-zone--layer">
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--layer" title="Move asset up one layer" data-gds-toolbelt-action="move-forward">
                    <i class="btl bt-angle-up"></i>
                </div>
                <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--layer" title="Move asset down one layer" data-gds-toolbelt-action="move-backward">
                    <i class="btl bt-angle-down"></i>
                </div>
                <div class="gds-toolbelt__item-layer-number" data-gds-toolbelt-item-number>5</div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Layer</label>
        </li>
        <li class="gds-toolbelt__item" title="Toggle horizontal tiling of the asset's background" data-gds-toolbelt-item>
            <div class="gds-toolbelt__item-zone">
                <div class="gds-toolbelt__item-icon" data-gds-toolbelt-action="toggle-tile">
                    <img class="gds-toolbelt__icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_tile--active.svg" alt="Tile asset" />
                </div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Tile</label>
        </li>
        <li class="gds-toolbelt__item gds-toolbelt__item--expanded gds-toolbelt__item--with-options" title="Mask the asset with a shape" data-gds-toolbelt-item>
            <div class="gds-toolbelt__pouch gds-toolbelt__pouch--open" data-gds-toolbelt-pouch=0>
                <div class="gds-toolbelt__pouch-items">
                    <div class="gds-toolbelt__pouch-item">
                        <div class="gds-toolbelt__pouch-item-icon gds-toolbelt__pouch-item-icon--active">
                            <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" />
                        </div>
                    </div>
                    <div class="gds-toolbelt__pouch-item">
                        <div class="gds-toolbelt__pouch-item-icon">
                            <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" />
                        </div>
                    </div>
                    <div class="gds-toolbelt__pouch-item">
                        <div class="gds-toolbelt__pouch-item-icon">
                            <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" />
                        </div>
                    </div>
                    <div class="gds-toolbelt__pouch-item">
                        <div class="gds-toolbelt__pouch-item-icon">
                            <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" />
                        </div>
                    </div>
                    <div class="gds-toolbelt__pouch-item">
                        <div class="gds-toolbelt__pouch-item-icon">
                            <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="gds-toolbelt__item-zone">
                <div class="gds-toolbelt__item-icon" data-gds-toolbelt-action="toggle-pouch" data-gds-toolbelt-target-pouch="0">
                    <img class="gds-toolbelt__icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" />
                </div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Shapes</label>
        </li>
        <li class="gds-toolbelt__item" title="Toggle drop shadow on the asset" data-gds-toolbelt-item>
            <div class="gds-toolbelt__item-zone">
                <div class="gds-toolbelt__item-icon" data-gds-toolbelt-action="toggle-shadow">
                    <img class="gds-toolbelt__icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shadow--active.svg" alt="Apply shadow to asset" />
                </div>
            </div>
            <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Shadow</label>
        </li>
    </ul>
</div>
<div class="gds-toolbelt" data-gds-toolbelt> <ul class="gds-toolbelt__items" data-gds-toolbelt-items> <li class="gds-toolbelt__item" data-gds-toolbelt-item> <div class="gds-toolbelt__item-zone"> <div class="gds-toolbelt__item-icon" title="Lock or unlock selected asset" data-gds-toolbelt-action="toggle-lock"> <i class="btl bt-lock-open"></i> </div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Lock</label> </li> <li class="gds-toolbelt__item" data-gds-toolbelt-item> <div class="gds-toolbelt__item-zone"> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--pin gds-toolbelt__item-icon--active" title="Pin asset left" data-gds-toolbelt-action="pin-left"> <i class="btl bt-push-pin"></i> </div> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--pin" title="Pin asset bottom" data-gds-toolbelt-action="pin-center"> <i class="btl bt-push-pin"></i> </div> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--pin" title="Pin asset right" data-gds-toolbelt-action="pin-right"> <i class="btl bt-push-pin"></i> </div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Pin</label> </li> <li class="gds-toolbelt__item gds-toolbelt__item--stretch" data-gds-toolbelt-item> <div class="gds-toolbelt__item-zone"> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--move"> <i class="btl bt-long-arrow-left" title="Move asset horizontally"></i> <div class="gds-form-group gds-toolbelt__item-form-group"> <div class="gds-form-group__input-group"> <input class="gds-toolbelt__item-input gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--dark gds-form-group__text-input--right-edge" type="number"/> <button class="gds-toolbelt__item-input-button gds-button--dark gds-button gds-button--sm gds-button--button-cap -color-tx-white" data-gds-toolbelt-action="toggle-unit">px</button> </div> </div> </div> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--move"> <i class="btl bt-long-arrow-up" title="Move asset vertically"></i> <div class="gds-form-group gds-toolbelt__item-form-group"> <div class="gds-form-group__input-group"> <input class="gds-toolbelt__item-input gds-form-group__text-input gds-form-group__text-input--sm gds-form-group__text-input--dark gds-form-group__text-input--right-edge" type="number"/> <button class="gds-toolbelt__item-input-button gds-button gds-button--sm gds-button--dark gds-button--button-cap -color-tx-white" data-gds-toolbelt-action="toggle-unit">px</button> </div> </div> </div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Move</label> </li> <li class="gds-toolbelt__item" data-gds-toolbelt-item> <div class="gds-toolbelt__item-zone gds-toolbelt__item-zone--layer"> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--layer" title="Move asset up one layer" data-gds-toolbelt-action="move-forward"> <i class="btl bt-angle-up"></i> </div> <div class="gds-toolbelt__item-icon gds-toolbelt__item-icon--layer" title="Move asset down one layer" data-gds-toolbelt-action="move-backward"> <i class="btl bt-angle-down"></i> </div> <div class="gds-toolbelt__item-layer-number" data-gds-toolbelt-item-number>5</div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Layer</label> </li> <li class="gds-toolbelt__item" title="Toggle horizontal tiling of the asset's background" data-gds-toolbelt-item> <div class="gds-toolbelt__item-zone"> <div class="gds-toolbelt__item-icon" data-gds-toolbelt-action="toggle-tile"> <img class="gds-toolbelt__icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_tile--active.svg" alt="Tile asset" /> </div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Tile</label> </li> <li class="gds-toolbelt__item gds-toolbelt__item--expanded gds-toolbelt__item--with-options" title="Mask the asset with a shape" data-gds-toolbelt-item> <div class="gds-toolbelt__pouch gds-toolbelt__pouch--open" data-gds-toolbelt-pouch=0> <div class="gds-toolbelt__pouch-items"> <div class="gds-toolbelt__pouch-item"> <div class="gds-toolbelt__pouch-item-icon gds-toolbelt__pouch-item-icon--active"> <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" /> </div> </div> <div class="gds-toolbelt__pouch-item"> <div class="gds-toolbelt__pouch-item-icon"> <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" /> </div> </div> <div class="gds-toolbelt__pouch-item"> <div class="gds-toolbelt__pouch-item-icon"> <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" /> </div> </div> <div class="gds-toolbelt__pouch-item"> <div class="gds-toolbelt__pouch-item-icon"> <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" /> </div> </div> <div class="gds-toolbelt__pouch-item"> <div class="gds-toolbelt__pouch-item-icon"> <img class="gds-toolbelt__pouch-icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" /> </div> </div> </div> </div> <div class="gds-toolbelt__item-zone"> <div class="gds-toolbelt__item-icon" data-gds-toolbelt-action="toggle-pouch" data-gds-toolbelt-target-pouch="0"> <img class="gds-toolbelt__icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shapes.svg" alt="Apply shape to asset" /> </div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Shapes</label> </li> <li class="gds-toolbelt__item" title="Toggle drop shadow on the asset" data-gds-toolbelt-item> <div class="gds-toolbelt__item-zone"> <div class="gds-toolbelt__item-icon" data-gds-toolbelt-action="toggle-shadow"> <img class="gds-toolbelt__icon-img" src="https://c.gumgum.com/ads/com/gumgum/documentation/images/icon_shadow--active.svg" alt="Apply shadow to asset" /> </div> </div> <label class="gds-toolbelt__item-label gds-form-group__label -user-select--none -pointer-events--none">Shadow</label> </li> </ul> </div>

Pages

Persistent Nav

The persistent nav remains visible by default at desktop width, and is hidden by default at mobile width. To toggle the nav, add gds-persist-nav__sidebar--toggle to gds-persist-nav__sidebar.

Make sure to add -has-persist-nav to the <body> element when using this component.

Myles O'Connor

gds-persist-nav

gds-persist-nav__sidebar--toggle

gds-persist-nav__sidebar--dark

gds-persist-nav__sub-item--dark

gds-persist-nav__link--dark

See prototypes page for example markup.
See prototypes page for example markup.

Utilities

Absolute Position

Absolutely position elements in a corner of their parent element. Note: This requires the parent element to have a non-static position (such as relative or absolute).

Dan McKenna

-abs-t-r

-abs-t-l

-abs-b-r

-abs-b-l

-pos-abs

-pos-rel

-pos-fix

-pos-stc

<div class="-abs-t-r">Absolute positioned, top right</div>
<div class="-abs-t-l">Absolute positioned, top left</div>
<div class="-abs-b-r">Absolute positioned, bottom right</div>
<div class="-abs-b-l">Absolute positioned, bottom left</div>
<div class="-abs-t-r">Absolute positioned, top right</div> <div class="-abs-t-l">Absolute positioned, top left</div> <div class="-abs-b-r">Absolute positioned, bottom right</div> <div class="-abs-b-l">Absolute positioned, bottom left</div>

Border-Radius

Adjust any element's border-radius to the default value or set it to zero. Includes support for all corners, individual corners, and individual sides. The classes are named using the format: -bor-rad-{sides}-{size}. {sides} can be -a (all), -tl (top left), -tr (top right), -bl (bottom left), -br (bottom right), -t (top left & top right), -r (top right & bottom right), -b (bottom left & bottom right), or -l (top left & bottom left). {size} can be 0 or 1, indicating either zero or the global default value, the $border-radius variable.

Myles O'Connor

-bor-rad-a-0

-bor-rad-a-1

-bor-rad-tl-0

-bor-rad-tl-1

-bor-rad-tr-0

-bor-rad-tr-1

-bor-rad-bl-0

-bor-rad-bl-1

-bor-rad-br-0

-bor-rad-br-1

-bor-rad-t-0

-bor-rad-t-1

-bor-rad-r-0

-bor-rad-r-1

-bor-rad-b-0

-bor-rad-b-1

-bor-rad-l-0

-bor-rad-l-1

<div class="gds-container -bor-rad-a-0">
    <p>Container with border-radius: 0</p>
</div>
<div class="gds-container -bor-rad-a-0"> <p>Container with border-radius: 0</p> </div>

Color

Manually override the color, border-color, or background-color of any element. The basic formula is -color-{p}-{c} where {p} is the property being overridden and {c} is the color. Values for {p} are: bg (background), bd (border), and tx (text color). Values for {c} are: pri (current theme's primary color), sec (current theme's secondary color), ter (current theme's tertiary color), suc (success color), war (warning color), dan (danger color) & inf (info color).

For each color, there are 4 light variations and 4 dark variations, which can be specified using -lt-1, -lt-2, -lt-3, -lt-4, -dk-1, -dk-2, -dk-3 or -dk-4. You can also use the -dark-mode modifier on the body tag to switch the entire app to dark-mode

Dan McKenna

-dark-mode

-color-bg-pri

-color-bg-pri-lt-*

-color-bg-pri-dk-*

-color-bg-sec

-color-bg-sec-lt-*

-color-bg-sec-dk-*

-color-bg-ter

-color-bg-ter-lt-*

-color-bg-ter-dk-*

-color-bg-suc

-color-bg-suc-lt-*

-color-bg-suc-dk-*

-color-bg-war

-color-bg-war-lt-*

-color-bg-war-dk-*

-color-bg-dan

-color-bg-dan-lt-*

-color-bg-dan-dk-*

-color-bg-inf

-color-bg-inf-lt-*

-color-bg-inf-dk-*

-color-bd-pri

-color-bd-pri-lt-*

-color-bd-pri-dk-*

-color-bd-sec

-color-bd-sec-lt-*

-color-bd-sec-dk-*

-color-bd-ter

-color-bd-ter-lt-*

-color-bd-ter-dk-*

-color-bd-suc

-color-bd-suc-lt-*

-color-bd-suc-dk-*

-color-bd-war

-color-bd-war-lt-*

-color-bd-war-dk-*

-color-bd-dan

-color-bd-dan-lt-*

-color-bd-dan-dk-*

-color-bd-inf

-color-bd-inf-lt-*

-color-bd-inf-dk-*

-color-tx-pri

-color-tx-pri-lt-*

-color-tx-pri-dk-*

-color-tx-sec

-color-tx-sec-lt-*

-color-tx-sec-dk-*

-color-tx-ter

-color-tx-ter-lt-*

-color-tx-ter-dk-*

-color-tx-suc

-color-tx-suc-lt-*

-color-tx-suc-dk-*

-color-tx-war

-color-tx-war-lt-*

-color-tx-war-dk-*

-color-tx-dan

-color-tx-dan-lt-*

-color-tx-dan-dk-*

-color-tx-inf

-color-tx-inf-lt-*

-color-tx-inf-dk-*

-color-bg-gold

-color-bg-gold-lt-*

-color-bg-gold-dk-*

-color-bd-gold

-color-bd-gold-lt-*

-color-bd-gold-dk-*

-color-tx-gold

-color-tx-gold-lt-*

-color-tx-gold-dk-*

-color-bg-blue

-color-bg-blue-lt-*

-color-bg-blue-dk-*

-color-bd-blue

-color-bd-blue-lt-*

-color-bd-blue-dk-*

-color-tx-blue

-color-tx-blue-lt-*

-color-tx-blue-dk-*

-color-bg-red

-color-bg-red-lt-*

-color-bg-red-dk-*

-color-bd-red

-color-bd-red-lt-*

-color-bd-red-dk-*

-color-tx-red

-color-tx-red-lt-*

-color-tx-red-dk-*

-color-bg-green

-color-bg-green-lt-*

-color-bg-green-dk-*

-color-bd-green

-color-bd-green-lt-*

-color-bd-green-dk-*

-color-tx-green

-color-tx-green-lt-*

-color-tx-green-dk-*

-color-bg-purple

-color-bg-purple-lt-*

-color-bg-purple-dk-*

-color-bd-purple

-color-bd-purple-lt-*

-color-bd-purple-dk-*

-color-tx-purple

-color-tx-purple-lt-*

-color-tx-purple-dk-*

-color-bg-orange

-color-bg-orange-lt-*

-color-bg-orange-dk-*

-color-bd-orange

-color-bd-orange-lt-*

-color-bd-orange-dk-*

-color-tx-orange

-color-tx-orange-lt-*

-color-tx-orange-dk-*

-color-bg-dkblue

-color-bg-dkblue-lt-*

-color-bg-dkblue-dk-*

-color-bd-dkblue

-color-bd-dkblue-lt-*

-color-bd-dkblue-dk-*

-color-tx-dkblue

-color-tx-dkblue-lt-*

-color-tx-dkblue-dk-*

-color-bg-dkred

-color-bg-dkred-lt-*

-color-bg-dkred-dk-*

-color-bd-dkred

-color-bd-dkred-lt-*

-color-bd-dkred-dk-*

-color-tx-dkred

-color-tx-dkred-lt-*

-color-tx-dkred-dk-*

-color-bg-dkgreen

-color-bg-dkgreen-lt-*

-color-bg-dkgreen-dk-*

-color-bd-dkgreen

-color-bd-dkgreen-lt-*

-color-bd-dkgreen-dk-*

-color-tx-dkgreen

-color-tx-dkgreen-lt-*

-color-tx-dkgreen-dk-*

-color-bg-dkgold

-color-bg-dkgold-lt-*

-color-bg-dkgold-dk-*

-color-bd-dkgold

-color-bd-dkgold-lt-*

-color-bd-dkgold-dk-*

-color-tx-dkgold

-color-tx-dkgold-lt-*

-color-tx-dkgold-dk-*

-color-bg-magenta

-color-bg-magenta-lt-*

-color-bg-magenta-dk-*

-color-bd-magenta

-color-bd-magenta-lt-*

-color-bd-magenta-dk-*

-color-tx-magenta

-color-tx-magenta-lt-*

-color-tx-magenta-dk-*

<div class="-color-bg-pri">Primary background color</div>
<div class="-color-bd-suc">Success color border</div>
<div class="-color-tx-dan">Danger color text</div>
<div class="-color-bg-pri">Primary background color</div> <div class="-color-bd-suc">Success color border</div> <div class="-color-tx-dan">Danger color text</div>

Grayscale

Manually override the color, border-color, or background-color of any element. The basic formula is -color-{p}-{c} where {p} is the property being overridden and {c} is the color. Values for {p} are: bg (background), bd (border), and tx (text color). Values for {c} are: lt (light shades of gray), & dk (dark shades of gray).

There are 5 variations of light gray, and 5 variations of dark gray.

Dan McKenna

-color-bg-lt-1

-color-bg-lt-2

-color-bg-lt-3

-color-bg-lt-4

-color-bg-lt-5

-color-bd-lt-1

-color-bd-lt-2

-color-bd-lt-3

-color-bd-lt-4

-color-bd-lt-5

-color-tx-lt-1

-color-tx-lt-2

-color-tx-lt-3

-color-tx-lt-4

-color-tx-lt-5

-color-bg-dk-1

-color-bg-dk-2

-color-bg-dk-3

-color-bg-dk-4

-color-bg-dk-5

-color-bd-dk-1

-color-bd-dk-2

-color-bd-dk-3

-color-bd-dk-4

-color-bd-dk-5

-color-tx-dk-1

-color-tx-dk-2

-color-tx-dk-3

-color-tx-dk-4

-color-tx-dk-5

-color-bg-white

-color-bd-white

-color-tx-white

<div class="-color-bg-lt-1">Lightest gray background color</div>
<div class="-color-bd-dk-1">Darkest gray border color</div>
<div class="-color-bg-lt-1">Lightest gray background color</div> <div class="-color-bd-dk-1">Darkest gray border color</div>

Cursor

Adjust the cursor property.

Myles O'Connor

Default cursor
Pointer cursor
Context-menu cursor
Help cursor
Progress cursor
Crosshair cursor
Text cursor
Copy cursor
Move cursor
Not-allowed cursor
Zoom-in cursor
Zoom-out cursor
Grab cursor
Grabbing cursor

-cursor--default

-cursor--pointer

-cursor--context-menu

-cursor--help

-cursor--progress

-cursor--crosshair

-cursor--text

-cursor--copy

-cursor--move

-cursor--not-allowed

-cursor--zoom-in

-cursor--zoom-out

-cursor--grab

-cursor--grabbing

<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--default">Default cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--pointer">Pointer cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--context-menu">Context-menu cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--help">Help cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--progress">Progress cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--crosshair">Crosshair cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--text">Text cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--copy">Copy cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--move">Move cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--not-allowed">Not-allowed cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--zoom-in">Zoom-in cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--zoom-out">Zoom-out cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--grab">Grab cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--grabbing">Grabbing cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--default">Default cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--pointer">Pointer cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--context-menu">Context-menu cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--help">Help cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--progress">Progress cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--crosshair">Crosshair cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--text">Text cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--copy">Copy cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--move">Move cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--not-allowed">Not-allowed cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--zoom-in">Zoom-in cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--zoom-out">Zoom-out cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--grab">Grab cursor</div> <div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--grabbing">Grabbing cursor</div>

Disable

Disable the user's interaction with any element.

Dan McKenna

-disabled

<button class="gds-button gds-button--default -disabled">Disabled Button</button>
<button class="gds-button gds-button--default -disabled">Disabled Button</button>

Display

Adjust the display property on any element. To adjust the property at specific breakpoints only, use the breakpoint-specific modifier classes.

Dan McKenna, Myles O'Connor

-block

-block--xs

-block--sm

-block--md

-block--lg

-block--xl

-inline-block

-inline-block--xs

-inline-block--sm

-inline-block--md

-inline-block--lg

-inline-block--xl

-none

-none--xs

-none--sm

-none--md

-none--lg

-none--xl

-vis-hidden

-sr-only

-flex

-flex--xs

-flex--sm

-flex--md

-flex--lg

-flex--xl

<div class="-block">Display block</div>
<div class="-inline-block">Display inline-block</div>
<div class="-none">Display none</div>
<div class="-block">Display block</div> <div class="-inline-block">Display inline-block</div> <div class="-none">Display none</div>

Ellipsis

Truncate text with the -ellipsis utility class. To apply the effect at specific breakpoints only, use the breakpoint-specific modifier classes.

Myles O'Connor

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

-ellipsis--xs

-ellipsis--sm

-ellipsis--md

-ellipsis--lg

-ellipsis--xl

<p class="-ellipsis">Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
<p class="-ellipsis">Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>

Float

Adjust the float property on any element, and clear the floats wherever needed.

Dan McKenna

-float-left

-float-right

-float-none

-clear-left

-clear-right

-clear-both

-float-none--xs

-float-none--sm

-float-none--md

-float-none--lg

-float-none--xl

<div class="-float-left">Float left</div>
<div class="-float-right">Float right</div>
<div class="-clear-both">Clear floats</div>
<div class="-float-left">Float left</div> <div class="-float-right">Float right</div> <div class="-clear-both">Clear floats</div>

Margin & Padding

Assign margin or padding to any element with shorthand utility classes. Includes support for individual properties, all properties, and vertical and horizontal properties. The classes are named using the format: {property}-{sides}-{size}. {property} can be -m (margin), or -p (padding). {sides} can be -t (top), -r (right), -b (bottom), -l (left), -v (vertical, top & bottom sides), -h (horizontal, left & right sides), or -a (all sides). {size} can be 0, 1, 2, 3, 4, 5 or 6 indicating multiples of the global default value, the $unit variable.

For the spacing to take effect at a certain breakpoint only, use the format {property}-{sides}-{size}-{breakpoint}, where {breakpoint} can be xs, sm, md, lg or xl.

Finally, you can use -m-h-cto horizontally center a block element with an assigned width. Margin-centering can also leverage the breakpoint syntax to work exclusively at certain browser sizes.

Dan McKenna, Myles O'Connor

Margin all 1
Margin left 6
Padding vertical 3
Padding horizontal 2

-m-t-*

-m-r-*

-m-b-*

-m-l-*

-m-v-*

-m-h-*

-m-h-c

-m-a-*

-m-t-*-xs

-m-r-*-xs

-m-b-*-xs

-m-l-*-xs

-m-v-*-xs

-m-h-*-xs

-m-h-c-xs

-m-a-*-xs

-m-t-*-sm

-m-r-*-sm

-m-b-*-sm

-m-l-*-sm

-m-v-*-sm

-m-h-*-sm

-m-h-c-sm

-m-a-*-sm

-m-t-*-md

-m-r-*-md

-m-b-*-md

-m-l-*-md

-m-v-*-md

-m-h-*-md

-m-h-c-md

-m-a-*-md

-m-t-*-lg

-m-r-*-lg

-m-b-*-lg

-m-l-*-lg

-m-v-*-lg

-m-h-*-lg

-m-h-c-lg

-m-a-*-lg

-m-t-*-xl

-m-r-*-xl

-m-b-*-xl

-m-l-*-xl

-m-v-*-xl

-m-h-*-xl

-m-h-c-xl

-m-a-*-xl

-p-t-*

-p-r-*

-p-b-*

-p-l-*

-p-v-*

-p-h-*

-p-a-*

-p-t-*-xs

-p-r-*-xs

-p-b-*-xs

-p-l-*-xs

-p-v-*-xs

-p-h-*-xs

-p-a-*-xs

-p-t-*-sm

-p-r-*-sm

-p-b-*-sm

-p-l-*-sm

-p-v-*-sm

-p-h-*-sm

-p-a-*-sm

-p-t-*-pd

-p-r-*-pd

-p-b-*-pd

-p-l-*-pd

-p-v-*-pd

-p-h-*-pd

-p-a-*-pd

-p-t-*-lg

-p-r-*-lg

-p-b-*-lg

-p-l-*-lg

-p-v-*-lg

-p-h-*-lg

-p-a-*-lg

-p-t-*-xl

-p-r-*-xl

-p-b-*-xl

-p-l-*-xl

-p-v-*-xl

-p-h-*-xl

-p-a-*-xl

<div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2">
    <div class="-m-a-1 -color-bg-pri">Margin all 1</div>
</div>
<div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2">
    <div class="-m-l-6 -color-bg-pri">Margin left 6</div>
</div>
<div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2">
    <div class="-p-v-3 -color-bg-pri">Padding vertical 3</div>
</div>
<div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2">
    <div class="-p-h-2 -color-bg-pri">Padding horizontal 2</div>
</div>
<div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2"> <div class="-m-a-1 -color-bg-pri">Margin all 1</div> </div> <div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2"> <div class="-m-l-6 -color-bg-pri">Margin left 6</div> </div> <div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2"> <div class="-p-v-3 -color-bg-pri">Padding vertical 3</div> </div> <div class="-color-bg-pri-lt-4 -overflow-hidden -m-b-2"> <div class="-p-h-2 -color-bg-pri">Padding horizontal 2</div> </div>

Overflow

Adjust the overflow property.

Myles O'Connor

-overflow-hidden

-overflow-visible

-overflow-x-hidden

-overflow-x-scroll

-overflow-x-auto

-overflow-y-hidden

-overflow-y-scroll

-overflow-y-auto

<div class="-overflow-hidden">Overflow hidden</div>
<div class="-overflow-hidden">Overflow hidden</div>

Pointer-Events

Enable or disable the default user interaction with any element.

Myles O'Connor


-pointer-events--auto

-pointer-events--none

<button class="gds-button gds-button--default -pointer-events--auto -m-b-2">Default Pointer-Events</button><br/>
<button class="gds-button gds-button--default -pointer-events--none">No Pointer-Events</button>
<button class="gds-button gds-button--default -pointer-events--auto -m-b-2">Default Pointer-Events</button><br/> <button class="gds-button gds-button--default -pointer-events--none">No Pointer-Events</button>

Text-Align

Adjust text alignment with the following utility classes. Text is aligned left by default.

To adjust text alignment at a specified breakpoint, use the format -text-{direction}-{breakpoint}, where {direction} can be left, center, or right, and {breakpoint} can be xs, sm, md, lg or xl. Breakpoint-specific classes cascade downwards.

Dan McKenna

Left-aligned text

Centered text

Right-aligned text

-text-left

-text-center

-text-right

-text-left--*

-text-center--*

-text-right--*

<p class="-text-left">Left-aligned text</p>
<p class="-text-center">Centered text</p>
<p class="-text-right">Right-aligned text</p>
<p class="-text-left">Left-aligned text</p> <p class="-text-center">Centered text</p> <p class="-text-right">Right-aligned text</p>

Text-Transform

Adjust text capitalization with CSS.

Dan McKenna

Uppercase text

Lowercase text

Capitalized text

-text-tr-up

-text-tr-low

-text-tr-cap

<p class="-text-tr-up">Uppercase text</p>
<p class="-text-tr-low">Lowercase text</p>
<p class="-text-tr-cap">Capitalized text</p>
<p class="-text-tr-up">Uppercase text</p> <p class="-text-tr-low">Lowercase text</p> <p class="-text-tr-cap">Capitalized text</p>

Transitions

Adds transitions of varying lengths and easing values to any element.

Daniel McKenna

-transition-back-100

-transition-back-250

-transition-back-500

-transition-out-100

-transition-out-250

-transition-out-500

-transition-in-100

-transition-in-250

-transition-in-500

<p class="-user-select--none">Transition on this div.</p>
<p class="-user-select--none">Transition on this div.</p>

User-Select

Disable the user's ability to select text within any element.

Myles O'Connor

Some text that can't be selected.

-user-select--none

<p class="-user-select--none">Some text that can't be selected.</p>
<p class="-user-select--none">Some text that can't be selected.</p>

Vertical-Align

Adjust vertical alignment. Vertical alignment defaults to 'baseline'.

Dan McKenna

-va-sub

-va-super

-va-top

-va-middle

-va-bottom

-va-text-top

-va-text-bottom

<div class="-va-middle"></div>
<div class="-va-middle"></div>

Z-Index

Adjust any element's z-index. Higher values render in front of lower values, -z-neg will render z-index: -1.

Dan McKenna

-z-1

-z-2

-z-3

-z-4

-z-5

-z-6

-z-7

-z-8

-z-9

-z-neg

<div class="-z-1"></div>
<div class="-z-1"></div>

Third-Party

Chosen

Chosen.js (harvesthq.github.io/chosen) is used to streamline user selection from dropdown and multi-select inputs.

To style a standard Chosen select input with a dropdown, add the gds-form-group__chosen--standard-select class to your <select> element.

Myles O'Connor

<select data-placeholder="Choose a Country..." class="gds-form-group__chosen--standard-select chosen-select">
    ...
</select>
<select data-placeholder="Choose a Country..." class="gds-form-group__chosen--standard-select chosen-select"> ... </select>

Multi-Select with Tags

To style a Chosen multi-select input with tags inside, add the gds-form-group__chosen--input-with-tags class to your <select> element.

Myles O'Connor

<select data-placeholder="Choose a Country..." class="gds-form-group__chosen--input-with-tags chosen-select">
    ...
</select>
<select data-placeholder="Choose a Country..." class="gds-form-group__chosen--input-with-tags chosen-select"> ... </select>

Markdown

When generating HTML from Markdown code, default Design System styling will have no effect since it is class-based. Most Markdown implementations output standard HTML tags with no classes. Wrapping this HTML output in gds-markdown allows Design System styling to work as expected.

Supported tags are: <h1>, <h2>, <h3>, <h4>, <hr>, <p>, <a>, <img>, <blockquote>, <ul>, <ol>, <code>, <strong>, and <em>.

Myles O'Connor

<span class="gds-markdown">
    ...
</span>
<span class="gds-markdown"> ... </span>