Design System v1.3.29

Name

Internal Products

Description

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.

Author

Dan McKenna, Myles O'Connor

Options

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

Code Sample

html

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

Name

JavaScript

Description

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

Author

Myles O'Connor

Code Sample

javascript

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

Name

Blue Theme

Description

Colors for the Blue theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Dark Blue Theme

Description

Colors for the Dark Blue theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Dark Green Theme

Description

Colors for the Dark Green theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Gold Theme

Description

Colors for the Gold theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Gray Blue Theme

Description

Colors for the Gray Blue theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Gray Gold Theme

Description

Colors for the Gray Gold theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Gray Red Theme

Description

Colors for the Gray Red theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Green Theme

Description

Colors for the Green theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

GumGum Social Theme

Description

Colors for the GumGum Social theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Orange Green Theme

Description

Colors for the Orange Green theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Orange Theme

Description

Colors for the Orange theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Purple Theme

Description

Colors for the Purple theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Red Theme

Description

Colors for the Red theme.

Author

Myles O'Connor

Code Sample

javascript

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;

Name

Scss Variables

Description

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

Author

Myles O'Connor

Code Sample

scss

$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%);

Name

CSS Grid

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Some content

Prototypes Page

gds-grid

Options

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-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-*

Code Sample

html

<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>

Name

Flex

Description

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.

Author

Dan McKenna

Prototypes Page

gds-flex

Options

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-*

Code Sample

html

<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>

Name

Flex Item

Description

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.

Author

Dan McKenna

Options

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

Code Sample

html

<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>

Name

Flex Grid

Description

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.

Author

Myles O'Connor

Rendered Example

Content

Prototypes Page

gds-flex-grid

Options

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

Code Sample

html

<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>

Name

HTML5 Boilerplate

Description

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

Author

Myles O'Connor

Code Sample

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>

<!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>   <div class="gds-slide-content">  </div> <script src="https://assets.ggops.com/stable/app.js"></script> </body> </html>

Name

Layout

Description

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.

Author

Myles O'Connor

Rendered Example

Left column

Center column

Right column

Prototypes Page

gds-layout

Options

gds-layout__container--full-width

Code Sample

html

<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>

Name

Columns

Description

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.

Author

Myles O'Connor

Options

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

Code Sample

html

<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>

Name

Rows

Description

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

Author

Myles O'Connor

Code Sample

html

<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>

Name

Badge

Description

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

Author

Myles O'Connor

Rendered Example

Default badge2

Inverse badge2

Warning badge2

Danger badge2

Prototypes Page

gds-badge

Options

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

Code Sample

html

<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>

Name

Empty Badge

Description

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

Author

Myles O'Connor

Rendered Example

Empty default badge

Empty info badge

Empty warning badge

Empty danger badge

Options

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

Code Sample

html

<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>

Name

Button

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Prototypes Page

gds-button

Options

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

Code Sample

html

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

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

Name

Circular Button

Description

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.

Author

Mike Watt

Rendered Example

Prototypes Page

gds-circular-button

Options

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

Code Sample

html

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

Name

Circular Thumbnail

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Prototypes Page

gds-circular-thumbnail

Options

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

Code Sample

html

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

Name

Container

Description

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

Author

Dan McKenna

Rendered Example

Paragraph in default container

Prototypes Page

gds-container

Options

gds-container--sm

gds-container--lg

gds-container--gray

gds-container--primary

gds-container--success

gds-container--warning

gds-container--danger

Code Sample

html

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

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

Name

Divider

Description

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

Author

Dan McKenna

Rendered Example

Standard Divider

Prototypes Page

gds-divider

Options

gds-divider--collapsible

gds-divider--reversed

gds-divider--centered

Code Sample

html

<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>

Name

Centered

Description

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.

Author

Dan McKenna

Rendered Example

Centered Divider

Options

gds-divider--collapsible

gds-divider--reversed

gds-divider__arrow--collapse

Code Sample

html

<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>

Name

Collapsible

Description

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.

Author

Dan McKenna

Rendered Example

Standard Divider

Options

gds-divider--reversed

gds-divider--centered

gds-divider__arrow--collapse

Code Sample

html

<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>

Name

Hotkey

Description

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

Author

Dan McKenna

Rendered Example

A

Prototypes Page

gds-hotkey

Options

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

Code Sample

html

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

Name

Image

Description

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.

Author

Myles O'Connor

Rendered Example

Options

gds-image--border

Code Sample

html

<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" />

Name

Link

Description

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

Author

Myles O'Connor

Rendered Example

Default text link Secondary color text link

Options

gds-text--link-secondary

Code Sample

html

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

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

Name

Loading

Description

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.

Author

Myles O'Connor

Rendered Example

Options

gds-loading__dot--white

Code Sample

html

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

Name

Large

Description

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

Author

Myles O'Connor

Rendered Example

Code Sample

html

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

Name

Small

Description

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

Author

Myles O'Connor

Rendered Example

Code Sample

html

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

Name

Number-Circle

Description

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

Author

Myles O'Connor

Rendered Example

1

Prototypes Page

gds-number-circle

Options

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

Code Sample

html

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

Name

Progress Bar

Description

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.

Author

Myles O'Connor

Rendered Example

Prototypes Page

gds-progress-bar

Options

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

Code Sample

html

<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>

Name

Segment

Description

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.

Author

Dan McKenna

Options

gds-segment--collapse

Code Sample

html

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

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

Name

Skeleton

Description

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

Author

Myles O'Connor

Rendered Example

Prototypes Page

gds-skeleton

Options

gds-skeleton--header

Code Sample

html

<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>

Name

Snackbar

Description

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.

Author

Myles O'Connor

Prototypes Page

gds-snackbar

Options

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

Code Sample

html

<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>

Name

Tag

Description

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

Author

Myles O'Connor

Rendered Example

This is a tag

Gillette

Primary Tag

Success Tag

Warning Tag

Danger Tag

Small Tag

Small Primary Tag

Prototypes Page

gds-tag

Options

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

Code Sample

html

<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>

Name

Text

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

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

Prototypes Page

gds-text

Options

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

Code Sample

html

<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>

Name

Tooltip

Description

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.

Author

Myles O'Connor

Rendered Example

Prototypes Page

gds-tooltip

Options

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

Code Sample

html

<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>

Name

Accordion

Description

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.

Author

Dan McKenna

Rendered Example

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

Prototypes Page

gds-accordion

Options

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

Code Sample

html

<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>

Name

Avatar

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Prototypes Page

gds-avatar

Options

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

Code Sample

html

<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>

Name

Balloon

Description

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.

Author

Dan McKenna

Prototypes Page

gds-balloon

Options

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

Code Sample

html

<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>

Name

Bubble

Description

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.

Author

Dan McKenna

Prototypes Page

gds-bubble

Options

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

Code Sample

html

<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>

Name

Button-Dropdown

Description

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.

Author

Dan McKenna

Rendered Example

Prototypes Page

gds-button-dropdown

Options

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

Code Sample

html

<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>

Name

Button-Group

Description

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.

Author

Dan McKenna

Rendered Example

Prototypes Page

gds-button-group

Options

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

Code Sample

html

<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>

Name

Button-Toolbar

Description

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.

Author

Dan McKenna

Rendered Example

Prototypes Page

gds-button-toolbar

Code Sample

html

<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>

Name

Card

Description

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

Author

Dan McKenna

Rendered Example

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

Prototypes Page

gds-card

Options

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

Code Sample

html

<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>

Name

Card Footer

Description

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

Author

Dan McKenna

Rendered Example

Card Title

Hero Text

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

Code Sample

html

<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>

<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>

Name

Card Header

Description

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

Author

Dan McKenna

Rendered Example

Card Title

Hero Text

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

Code Sample

html

<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>

Name

Chart Card

Description

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

Author

Dan McKenna

Rendered Example

Card Title

Major Card Stat

Options

gds-card__chart--abs

gds-card__chard--no-fade

Code Sample

html

<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>

Name

Content Block

Description

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

Author

Dan McKenna

Rendered Example

Major Card Stat

123,456,890

Medium Card Stat

123,456,890

Code Sample

html

<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>

Name

Control Card

Description

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

Author

Dan McKenna

Rendered Example

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.

Options

gds-card__control--t-r

gds-card__control--t-l

gds-card__control--b-r

gds-card__control--b-l

Code Sample

html

<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>

Name

Image Card

Description

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

Author

Dan McKenna

Rendered Example

Major Card Stat

123,456,890

5%

Options

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

Code Sample

html

<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>

Name

Tile Card

Description

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

Author

Dan McKenna

Rendered Example

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

Code Sample

html

<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>

Name

Trend Card

Description

Use gds-card__trend to display trend information

Author

Dan McKenna

Rendered Example

Major Card Stat

123,456,890

5%

Medium Card Stat

123,456,890

0%

Medium Card Stat

123,456,890

2%

Options

gds-card__trend--up

gds-card__trend--same

gds-card__trend--down

Code Sample

html

<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>

Name

Checklist

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Milk
Bread
Eggs
Waffles

Prototypes Page

gds-checklist

Options

gds-checklist__item--sm

gds-checklist__item--lg

gds-checklist__item--inverse

gds-checklist__item--active

gds-checklist__item--completed

Code Sample

html

<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>

Name

Chooser

Description

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.

Author

Daniel McKenna

Rendered Example

This is the current Item

Options

gds-chooser--secondary

gds-chooser--tertiary

gds-chooser__menu--secondary

gds-chooser__menu--tertiary

Code Sample

html

<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>

Name

Corner-Content

Description

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.

Author

Myles O'Connor

Options

gds-corner-content--shown

gds-corner-content--top

gds-corner-content--left

gds-corner-content--right

Code Sample

html

<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>

Name

HTML Preview

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Prototypes Page

gds-html-preview

Options

gds-html-preview--active

gds-html-preview--disabled

gds-html-preview--resize

Code Sample

html

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

Name

Hotkey-Toggle

Description

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.

Author

Dan McKenna

Rendered Example

E

Denver Nuggets

Prototypes Page

gds-hotkey-toggle

Options

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

Code Sample

html

<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>

Name

Input

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Example Text Input text input hint / validation error text.

Prototypes Page

gds-input

Options

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

Code Sample

html

<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>

Name

Capped Text Input

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

$

.00

Options

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

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

Code Sample

html

<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>

Name

Checkbox

Description

Checkbox inputs use the following syntax.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Single Checkbox Option.

Options

gds-form-group__checkbox-label--dark

gds-form-group__checkbox-indicator--dark

gds-form-group__checkbox--xs

gds-form-group__checkbox--sm

Code Sample

html

<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>

Name

Combination Input and Button Cap

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Example Text Input With Button Cap

Options

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

Code Sample

html

<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>

Name

Date Input

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Date Input with Button

/ /

Options

gds-form-group__date-input--xs

gds-form-group__date-input--sm

gds-form-group__date-input--lg

Code Sample

html

<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>

Name

Dual Range Slider

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Dual Selector Range Input (Requires JS)

Code Sample

html

<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>

Name

File Upload

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Basic File Input

Options

gds-form-group__file--xs

gds-form-group__file--sm

gds-form-group__file--lg

Code Sample

html

<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>

Name

Radio button

Description

Radio button inputs use the following syntax.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Radio button

Options

gds-form-group__radio-indicator--dark

gds-form-group__radio-label--dark

gds-form-group__radio--xs

gds-form-group__radio--sm

Code Sample

html

<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>

Name

Range Slider

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Basic Range Input

Code Sample

html

<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>

Name

Select

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Basic Select Input

Options

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

Code Sample

html

<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>

Name

Textarea

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Example Text Area

Options

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

Code Sample

html

<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>

Name

Toggle Switch

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Toggle Switch

Options

gds-form-group__toggleswitch-indicator--dark

gds-form-group__toggleswitch-label--dark

gds-form-group__toggleswitch--xs

gds-form-group__toggleswitch--sm

Code Sample

html

<!-- 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>

<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>  <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>

Name

Keyboard Shortcuts

Description

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.

Author

Myles O'Connor

Options

gds-keyboard-shortcuts--shown

Code Sample

html

<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>

Name

Landing Pad

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Click or Drag Logo Here

Prototypes Page

gds-landing-pad

Options

gds-landing-pad--active

gds-landing-pad__status

gds-landing-pad__status--success

gds-landing-pad__status--danger

Code Sample

html

<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>

Name

Legend

Description

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.

Author

Dan McKenna

Rendered Example

Label
Label
Label
Label

Prototypes Page

gds-legend

Options

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

Code Sample

html

<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>

Name

Modal

Description

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.

Author

Myles O'Connor

Prototypes Page

gds-modal

Options

gds-modal--shown

gds-modal--dark

gds-modal__form

gds-modal__header--dark

gds-modal__footer--dark

gds-modal__overlay

Code Sample

html

<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>

Name

Multi-Select

Description

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.

Author

Dan McKenna

Rendered Example

Multi-select

Check All
Checkbox Option

Sub-Menu Checkbox Option

Sub-Menu Checkbox Option
Checkbox Option

Prototypes Page

gds-multi-select

Options

gds-multi-select--sm

gds-multi-select--xs

gds-multi-select__button--sm

gds-multi-select__button--xs

Code Sample

html

<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>

Name

Nav

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Tab one content goes here.

Tab two content goes here.

Tab three content goes here.

Tab four content goes here.

Prototypes Page

gds-nav

Options

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

Code Sample

html

<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>

Name

Justified

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Tab one content goes here.

Tab two content goes here.

Tab three content goes here.

Tab four content goes here.

Code Sample

html

<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>

Name

Pill

Description

For pill nav, use gds-nav-pills.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Tab one content goes here.

Tab two content goes here.

Tab three content goes here.

Tab four content goes here.

Options

gds-nav-pills--sm

gds-nav-pills--lg

gds-nav-pills--dark

gds-nav-pills__link--dark

Code Sample

html

<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>

Name

Underline

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Tab one content goes here.

Tab two content goes here.

Tab three content goes here.

Tab four content goes here.

Code Sample

html

<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>

Name

Pagination

Description

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.

Author

Dan McKenna

Rendered Example

Prototypes Page

gds-pagination

Options

gds-pagination--xs

gds-pagination--sm

gds-pagination--lg

gds-pagination--xl

Code Sample

html

<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">«</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">»</span><span class="-sr-only">Next</span></a></li> <span class='gds-pagination__page-indicator'></span> </ul> </nav>

Name

Radio Block

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

Prototypes Page

gds-radio-block

Options

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

Code Sample

html

<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>

Name

Ranker

Description

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.

Author

Dan McKenna

Rendered Example

1
2
3
4
5

Prototypes Page

gds-ranker

Options

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

Code Sample

html

<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>

Name

Ranker Ensign

Description

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

Author

Jarrod Dowalter

Rendered Example

Golden State Warriors

15 ^th

Prototypes Page

gds-ranker-ensign

Options

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

Code Sample

html

<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>

Name

Search-Select

Description

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.

Author

Dan McKenna

Prototypes Page

gds-search-select

Options

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

Code Sample

html

<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>

Name

Slab-Nav

Description

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.

Author

Dan McKenna

Rendered Example

Nav Label
Nav Label

23
Nav Label
Nav Label

Content goes here

Options

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

Code Sample

html

<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>

Name

Table

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

#	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

Prototypes Page

gds-table

Options

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

Code Sample

html

<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>

Name

Colored Cells

Description

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.

Author

Dan McKenna, Myles O'Connor

Rendered Example

#	First Name	Last Name	Username (selected)
1	Mark	Otto	@mdo

Code Sample

html

<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>

Name

Tree

Description

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

Author

Dan McKenna, Myles O'Connor, Mike Watt

Rendered Example

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

Prototypes Page

gds-tree

Options

gds-tree--dark

gds-tree__link--active

gds-tree__link--primary

gds-tree__link--secondary

gds-tree__link--tertiary

gds-tree__link--quaternary

Code Sample

html

<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>

Name

Well

Description

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

Author

Myles O'Connor

Rendered Example

Default well

Success well

Prototypes Page

gds-well

Options

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

Code Sample

html

<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>

Name

Account-Modal

Description

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.

Author

Myles O'Connor

Prototypes Page

gds-account-modal

Code Sample

html

<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>

Name

Alert

Description

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.

Author

Dan McKenna

Prototypes Page

gds-alert

Options

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

Code Sample

html

<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>

Name

Animation Timeline

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

A very long name goes here

0s

1s

2s

3s

4s

5s

A very long name goes here

Prototypes Page

gds-anim-timeline

Code Sample

html

<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>

Name

Conversation

Description

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

Author

Dan McKenna

Rendered Example

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

Sent: 9/13/2016

Mon, 09/12/2016

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.

Sent: 9/13/2016

Bob Smith

deserunt mollit anim id est laborum.

Sent: 9/13/2016

Tues, 09/13/2016

You

You suck!

Sent: 9/13/2016

User Blocked!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sent: 9/13/2016

You

Prototypes Page

gds-conversation

Code Sample

html

<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>

Name

Feedback

Description

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

Author

Mike Watt

Prototypes Page

gds-feedback

Options

gds-feedback--align-right

gds-feedback--fixed-right

gds-feedback--align-left

gds-feedback--fixed-left

Code Sample

html

<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>

Name

Filters

Description

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.

Author

Dan McKenna, Mike Watt

Prototypes Page

gds-filters

Options

gds-bubble__menu--menu-open

Code Sample

html

<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>

Name

Leaderboard

Description

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.

Author

Jarrod Dowalter

Rendered Example

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

Prototypes Page

gds-leaderboard

Code Sample

html

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

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

Name

Lens

Description

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

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

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

Author

Dan McKenna

Rendered Example

Prototypes Page

gds-lens

Options

gds-lens--active

gds-lens__viewport--no-icon

Code Sample

html

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

Name

Lens - Edit Mode

Description

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

Author

Dan McKenna

Rendered Example

Options

gds-lens--valid

gds-lens--invalid

Code Sample

html

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

Name

Onboarder

Description

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

Author

Dan McKenna

Prototypes Page

gds-onboarder

Options

gds-onboarder--t-l

gds-onboarder--t-r

gds-onboarder--b-l

gds-onboarder--b-r

Code Sample

html

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

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

Name

Page-Header

Description

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

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

Author

Dan McKenna, Myles O'Connor

Prototypes Page

gds-spa-header

Options

gds-page-header--dark

gds-page-header__nav-bar--dark

gds-page-header__secondary-nav--dark

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

Code Sample

html

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

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

Name

Ranker Card

Description

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

Author

Dan McKenna, Myles O'Connor, Mike Watt

Rendered Example

1

1,321,121,392,129
Impressions
2

1,321,121,392,129
Impressions
3

1,321,121,392,129
Impressions
4

1,321,121,392,129
Impressions

Prototypes Page

gds-ranker-card

Options

gds-ranker-card--primary

gds-ranker-card--secondary

gds-ranker-card--tertiary

gds-ranker-card--sm

gds-ranker-card__number--sm

gds-ranker-card__number--primary

gds-ranker-card__number--secondary

gds-ranker-card__number--tertiary

Code Sample

html

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

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

Name

Ranker Grid

Description

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

Author

Jarrod Dowalter

Rendered Example

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

Prototypes Page

gds-ranker-grid

Code Sample

html

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

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

Name

Refinery

Description

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

Author

Mike Watt

Prototypes Page

gds-refinery

Options

gds-refinery--menu-open

gds-refinery--menu-disabled

Code Sample

html

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

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

Name

Ribbon

Description

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

Author

Dan McKenna

Prototypes Page

gds-ribbon

Options

gds-ribbon--vertical-left

gds-ribbon--vertical-right

gds-ribbon--white

Code Sample

html

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

Name

SPA-Header

Description

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

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

Author

Myles O'Connor

Prototypes Page

gds-spa-header

Options

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

gds-spa-header__section--white

gds-spa-header__section--product

Code Sample

html

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

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

Name

Search

Description

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

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

Author

Myles O'Connor

Prototypes Page

gds-search

Options

gds-search--shown

gds-search--no-result

Code Sample

html

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

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

Name

Slide-Nav

Description

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

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

Author

Dan McKenna

Code Sample

html

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

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

Name

Timeline

Description

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

Author

Dan McKenna

Rendered Example

Step 1
Step 2
Step 3
Step 4

Prototypes Page

gds-timeline

Code Sample

html

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

Name

Toolbelt

Description

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Lock
Pin
Move
5

Layer
Tile
Shapes
Shadow

Prototypes Page

gds-toolbelt

Options

gds-toolbelt__item--with-options

gds-toolbelt__item--disabled

gds-toolbelt__item--stretch

gds-toolbelt__item-icon--active

gds-toolbelt__item

gds-toolbelt__item-icon--expanded

gds-toolbelt__pouch--open

gds-toolbelt__pouch-item-icon--active

Code Sample

html

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

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

Name

Persistent Nav

Description

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

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

Author

Myles O'Connor

Prototypes Page

gds-persist-nav

Options

gds-persist-nav__sidebar--toggle

gds-persist-nav__sidebar--dark

gds-persist-nav__sub-item--dark

gds-persist-nav__link--dark

Code Sample

html

See prototypes page for example markup.

See prototypes page for example markup.

Name

Absolute Position

Description

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

Author

Dan McKenna

Options

-abs-t-r

-abs-t-l

-abs-b-r

-abs-b-l

-pos-abs

-pos-rel

-pos-fix

-pos-stc

Code Sample

html

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

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

Name

Border-Radius

Description

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

Author

Myles O'Connor

Options

-bor-rad-a-0

-bor-rad-a-1

-bor-rad-tl-0

-bor-rad-tl-1

-bor-rad-tr-0

-bor-rad-tr-1

-bor-rad-bl-0

-bor-rad-bl-1

-bor-rad-br-0

-bor-rad-br-1

-bor-rad-t-0

-bor-rad-t-1

-bor-rad-r-0

-bor-rad-r-1

-bor-rad-b-0

-bor-rad-b-1

-bor-rad-l-0

-bor-rad-l-1

Code Sample

html

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

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

Name

Color

Description

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

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

Author

Dan McKenna

Options

-dark-mode

-color-bg-pri

-color-bg-pri-lt-*

-color-bg-pri-dk-*

-color-bg-sec

-color-bg-sec-lt-*

-color-bg-sec-dk-*

-color-bg-ter

-color-bg-ter-lt-*

-color-bg-ter-dk-*

-color-bg-suc

-color-bg-suc-lt-*

-color-bg-suc-dk-*

-color-bg-war

-color-bg-war-lt-*

-color-bg-war-dk-*

-color-bg-dan

-color-bg-dan-lt-*

-color-bg-dan-dk-*

-color-bg-inf

-color-bg-inf-lt-*

-color-bg-inf-dk-*

-color-bd-pri

-color-bd-pri-lt-*

-color-bd-pri-dk-*

-color-bd-sec

-color-bd-sec-lt-*

-color-bd-sec-dk-*

-color-bd-ter

-color-bd-ter-lt-*

-color-bd-ter-dk-*

-color-bd-suc

-color-bd-suc-lt-*

-color-bd-suc-dk-*

-color-bd-war

-color-bd-war-lt-*

-color-bd-war-dk-*

-color-bd-dan

-color-bd-dan-lt-*

-color-bd-dan-dk-*

-color-bd-inf

-color-bd-inf-lt-*

-color-bd-inf-dk-*

-color-tx-pri

-color-tx-pri-lt-*

-color-tx-pri-dk-*

-color-tx-sec

-color-tx-sec-lt-*

-color-tx-sec-dk-*

-color-tx-ter

-color-tx-ter-lt-*

-color-tx-ter-dk-*

-color-tx-suc

-color-tx-suc-lt-*

-color-tx-suc-dk-*

-color-tx-war

-color-tx-war-lt-*

-color-tx-war-dk-*

-color-tx-dan

-color-tx-dan-lt-*

-color-tx-dan-dk-*

-color-tx-inf

-color-tx-inf-lt-*

-color-tx-inf-dk-*

-color-bg-gold

-color-bg-gold-lt-*

-color-bg-gold-dk-*

-color-bd-gold

-color-bd-gold-lt-*

-color-bd-gold-dk-*

-color-tx-gold

-color-tx-gold-lt-*

-color-tx-gold-dk-*

-color-bg-blue

-color-bg-blue-lt-*

-color-bg-blue-dk-*

-color-bd-blue

-color-bd-blue-lt-*

-color-bd-blue-dk-*

-color-tx-blue

-color-tx-blue-lt-*

-color-tx-blue-dk-*

-color-bg-red

-color-bg-red-lt-*

-color-bg-red-dk-*

-color-bd-red

-color-bd-red-lt-*

-color-bd-red-dk-*

-color-tx-red

-color-tx-red-lt-*

-color-tx-red-dk-*

-color-bg-green

-color-bg-green-lt-*

-color-bg-green-dk-*

-color-bd-green

-color-bd-green-lt-*

-color-bd-green-dk-*

-color-tx-green

-color-tx-green-lt-*

-color-tx-green-dk-*

-color-bg-purple

-color-bg-purple-lt-*

-color-bg-purple-dk-*

-color-bd-purple

-color-bd-purple-lt-*

-color-bd-purple-dk-*

-color-tx-purple

-color-tx-purple-lt-*

-color-tx-purple-dk-*

-color-bg-orange

-color-bg-orange-lt-*

-color-bg-orange-dk-*

-color-bd-orange

-color-bd-orange-lt-*

-color-bd-orange-dk-*

-color-tx-orange

-color-tx-orange-lt-*

-color-tx-orange-dk-*

-color-bg-dkblue

-color-bg-dkblue-lt-*

-color-bg-dkblue-dk-*

-color-bd-dkblue

-color-bd-dkblue-lt-*

-color-bd-dkblue-dk-*

-color-tx-dkblue

-color-tx-dkblue-lt-*

-color-tx-dkblue-dk-*

-color-bg-dkred

-color-bg-dkred-lt-*

-color-bg-dkred-dk-*

-color-bd-dkred

-color-bd-dkred-lt-*

-color-bd-dkred-dk-*

-color-tx-dkred

-color-tx-dkred-lt-*

-color-tx-dkred-dk-*

-color-bg-dkgreen

-color-bg-dkgreen-lt-*

-color-bg-dkgreen-dk-*

-color-bd-dkgreen

-color-bd-dkgreen-lt-*

-color-bd-dkgreen-dk-*

-color-tx-dkgreen

-color-tx-dkgreen-lt-*

-color-tx-dkgreen-dk-*

-color-bg-dkgold

-color-bg-dkgold-lt-*

-color-bg-dkgold-dk-*

-color-bd-dkgold

-color-bd-dkgold-lt-*

-color-bd-dkgold-dk-*

-color-tx-dkgold

-color-tx-dkgold-lt-*

-color-tx-dkgold-dk-*

-color-bg-magenta

-color-bg-magenta-lt-*

-color-bg-magenta-dk-*

-color-bd-magenta

-color-bd-magenta-lt-*

-color-bd-magenta-dk-*

-color-tx-magenta

-color-tx-magenta-lt-*

-color-tx-magenta-dk-*

Code Sample

html

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

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

Name

Grayscale

Description

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

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

Author

Dan McKenna

Options

-color-bg-lt-1

-color-bg-lt-2

-color-bg-lt-3

-color-bg-lt-4

-color-bg-lt-5

-color-bd-lt-1

-color-bd-lt-2

-color-bd-lt-3

-color-bd-lt-4

-color-bd-lt-5

-color-tx-lt-1

-color-tx-lt-2

-color-tx-lt-3

-color-tx-lt-4

-color-tx-lt-5

-color-bg-dk-1

-color-bg-dk-2

-color-bg-dk-3

-color-bg-dk-4

-color-bg-dk-5

-color-bd-dk-1

-color-bd-dk-2

-color-bd-dk-3

-color-bd-dk-4

-color-bd-dk-5

-color-tx-dk-1

-color-tx-dk-2

-color-tx-dk-3

-color-tx-dk-4

-color-tx-dk-5

-color-bg-white

-color-bd-white

-color-tx-white

Code Sample

html

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

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

Name

Cursor

Description

Adjust the cursor property.

Author

Myles O'Connor

Rendered Example

Default cursor

Pointer cursor

Help cursor

Progress cursor

Crosshair cursor

Text cursor

Copy cursor

Move cursor

Not-allowed cursor

Zoom-in cursor

Zoom-out cursor

Grab cursor

Grabbing cursor

Options

-cursor--default

-cursor--pointer

-cursor--context-menu

-cursor--help

-cursor--progress

-cursor--crosshair

-cursor--text

-cursor--copy

-cursor--move

-cursor--not-allowed

-cursor--zoom-in

-cursor--zoom-out

-cursor--grab

-cursor--grabbing

Code Sample

html

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

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

Name

Disable

Description

Disable the user's interaction with any element.

Author

Dan McKenna

Rendered Example

Options

-disabled

Code Sample

html

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

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

Name

Display

Description

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

Author

Dan McKenna, Myles O'Connor

Options

-block

-block--xs

-block--sm

-block--md

-block--lg

-block--xl

-inline-block

-inline-block--xs

-inline-block--sm

-inline-block--md

-inline-block--lg

-inline-block--xl

-none

-none--xs

-none--sm

-none--md

-none--lg

-none--xl

-vis-hidden

-sr-only

-flex

-flex--xs

-flex--sm

-flex--md

-flex--lg

-flex--xl

Code Sample

html

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

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

Name

Ellipsis

Description

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

Author

Myles O'Connor

Rendered Example

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

Options

-ellipsis--xs

-ellipsis--sm

-ellipsis--md

-ellipsis--lg

-ellipsis--xl

Code Sample

html

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

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

Name

Float

Description

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

Author

Dan McKenna

Options

-float-left

-float-right

-float-none

-clear-left

-clear-right

-clear-both

-float-none--xs

-float-none--sm

-float-none--md

-float-none--lg

-float-none--xl

Code Sample

html

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

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

Name

Margin & Padding

Description

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

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

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

Author

Dan McKenna, Myles O'Connor

Rendered Example

Margin all 1

Margin left 6

Padding vertical 3

Padding horizontal 2

Options

-m-t-*

-m-r-*

-m-b-*

-m-l-*

-m-v-*

-m-h-*

-m-h-c

-m-a-*

-m-t-*-xs

-m-r-*-xs

-m-b-*-xs

-m-l-*-xs

-m-v-*-xs

-m-h-*-xs

-m-h-c-xs

-m-a-*-xs

-m-t-*-sm

-m-r-*-sm

-m-b-*-sm

-m-l-*-sm

-m-v-*-sm

-m-h-*-sm

-m-h-c-sm

-m-a-*-sm

-m-t-*-md

-m-r-*-md

-m-b-*-md

-m-l-*-md

-m-v-*-md

-m-h-*-md

-m-h-c-md

-m-a-*-md

-m-t-*-lg

-m-r-*-lg

-m-b-*-lg

-m-l-*-lg

-m-v-*-lg

-m-h-*-lg

-m-h-c-lg

-m-a-*-lg

-m-t-*-xl

-m-r-*-xl

-m-b-*-xl

-m-l-*-xl

-m-v-*-xl

-m-h-*-xl

-m-h-c-xl

-m-a-*-xl

-p-t-*

-p-r-*

-p-b-*

-p-l-*

-p-v-*

-p-h-*

-p-a-*

-p-t-*-xs

-p-r-*-xs

-p-b-*-xs

-p-l-*-xs

-p-v-*-xs

-p-h-*-xs

-p-a-*-xs

-p-t-*-sm

-p-r-*-sm

-p-b-*-sm

-p-l-*-sm

-p-v-*-sm

-p-h-*-sm

-p-a-*-sm

-p-t-*-pd

-p-r-*-pd

-p-b-*-pd

-p-l-*-pd

-p-v-*-pd

-p-h-*-pd

-p-a-*-pd

-p-t-*-lg

-p-r-*-lg

-p-b-*-lg

-p-l-*-lg

-p-v-*-lg

-p-h-*-lg

-p-a-*-lg

-p-t-*-xl

-p-r-*-xl

-p-b-*-xl

-p-l-*-xl

-p-v-*-xl

-p-h-*-xl

-p-a-*-xl

Code Sample

html

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

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

Name

Overflow

Description

Adjust the overflow property.

Author

Myles O'Connor

Options

-overflow-hidden

-overflow-visible

-overflow-x-hidden

-overflow-x-scroll

-overflow-x-auto

-overflow-y-hidden

-overflow-y-scroll

-overflow-y-auto

Code Sample

html

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

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

Name

Pointer-Events

Description

Enable or disable the default user interaction with any element.

Author

Myles O'Connor

Rendered Example

Options

-pointer-events--auto

-pointer-events--none

Code Sample

html

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

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

Name

Text-Align

Description

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

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

Author

Dan McKenna

Rendered Example

Left-aligned text

Centered text

Right-aligned text

Options

-text-left

-text-center

-text-right

-text-left--*

-text-center--*

-text-right--*

Code Sample

html

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

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

Name

Text-Transform

Description

Adjust text capitalization with CSS.

Author

Dan McKenna

Rendered Example

Uppercase text

Lowercase text

Capitalized text

Options

-text-tr-up

-text-tr-low

-text-tr-cap

Code Sample

html

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

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

Name

Transitions

Description

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

Author

Daniel McKenna

Options

-transition-back-100

-transition-back-250

-transition-back-500

-transition-out-100

-transition-out-250

-transition-out-500

-transition-in-100

-transition-in-250

-transition-in-500

Code Sample

html

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

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

Name

User-Select

Description

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

Author

Myles O'Connor

Rendered Example

Some text that can't be selected.

Options

-user-select--none

Code Sample

html

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

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

Name

Vertical-Align

Description

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

Author

Dan McKenna

Options

-va-sub

-va-super

-va-top

-va-middle

-va-bottom

-va-text-top

-va-text-bottom

Code Sample

html

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

Name

Z-Index

Description

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

Author

Dan McKenna

Options

-z-1

-z-2

-z-3

-z-4

-z-5

-z-6

-z-7

-z-8

-z-9

-z-neg

Code Sample

html

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

Name

Chosen

Description

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

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

Author

Myles O'Connor

Code Sample

html

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

Name

Multi-Select with Tags

Description

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

Author

Myles O'Connor

Code Sample

html

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

Name

Markdown

Description

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

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

Author

Myles O'Connor

Code Sample

html

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