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