AG Style Guide

All elements and components used in the AG Style Guide.

Typography

Font Family (system fonts)

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Monospace font:.monospace-text

Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;

Font weight normal:.normal-weight-text

400

Font weight bold:.bold-text

600

font size extra small.font-size-extra-small

Voluptatibus ex unde molestiae omnis ea aut odio. Eum dolor ratione qui sed et asperiores. Aut vero consequatur quaerat nesciunt perferendis et dolores animi earum. Pariatur exercitationem nostrum. Occaecati occaecati eos soluta id. Quis mollitia nobis aut deleniti inventore aut corporis.

font size small.font-size-small

Totam iure voluptates. Molestias quae qui molestias odit dolor dignissimos provident commodi porro. Exercitationem aut perspiciatis iure dolorum deserunt exercitationem quisquam asperiores consequatur. Ipsum facilis ipsum nisi et sint beatae exercitationem sequi adipisci.

font size medium.font-size-medium

Deleniti adipisci sint possimus. Aut harum nihil. Ut a distinctio recusandae officia sint. Minima ut est mollitia velit. Reiciendis maiores veritatis beatae magni animi consectetur aliquam. Totam sequi voluptas suscipit repudiandae.

font size large.font-size-large

Praesentium ea ex qui dolorum non totam. Eveniet iure omnis facilis quisquam incidunt quaerat dolores aliquam. Eum voluptas nam aut sit. Omnis sunt cupiditate eaque ratione aut cupiditate. Alias non culpa fugiat id architecto.

font size extra large.font-size-extra-large

Quasi nesciunt saepe accusamus. Et aut illum. Quod dolores quaerat. Minima dolorum id deleniti quos sit. Recusandae iure voluptatem voluptatem mollitia pariatur.

font size massive.font-size-massive

Quis adipisci molestiae ad ipsa rerum aut minima ea iure. Quasi voluptate porro.

font size gigantic.font-size-gigantic

Sunt velit sed et. Quo recusandae dolores error saepe dolores.

font size gargantuan.font-size-gargantuan

Sunt velit sed et. Quo recusandae dolores error saepe dolores.

Color

Abstract Colors

Brand

  • AG Grid dark blue

    --ag-grid-dark-blue

    #003264 | hsl(210, 100%, 19.6%)

  • AG Grid aqua

    --ag-grid-aqua

    #55b4c8 | hsl(190, 51.1%, 55.9%)

  • AG Grid orange

    --ag-grid-orange

    #ff8c00 | hsl(33, 100%, 50%)

  • AG Grid red

    --ag-grid-red

    red | hsl(0, 0%, 0%)

  • AG Grid grey

    --ag-grid-grey

    #b4bebe | hsl(180, 7.1%, 72.5%)

Blues

  • dark cerulean blue

    --dark-cerulean-blue

    #00407f | hsl(210, 100%, 24.9%)

  • medium electric blue

    --medium-electric-blue

    #044c93 | hsl(210, 94.7%, 29.6%)

  • azure blue

    --azure-blue

    #007bff | hsl(211, 100%, 50%)

  • sky blue

    --sky-blue

    #80bdff | hsl(211, 100%, 75.1%)

  • water blue

    --water-blue

    #cce5ff | hsl(211, 100%, 90%)

  • light water blue

    --light-water-blue

    #d9f0fa | hsl(198, 76.7%, 91.6%)

  • bright blue gray

    --bright-blue-gray

    #eaf0f6 | hsl(210, 40%, 94.1%)

  • ghost blue

    --ghost-blue

    #f9fcff | hsl(210, 100%, 98.8%)

Grays

  • black

    --black

    #000 | hsl(0, 0%, 0%)

  • dark gunmetal gray

    --dark-gunmetal-gray

    #212529 | hsl(210, 10.8%, 14.5%)

  • auro metal

    --auro-metal

    #6c757d | hsl(208, 7.3%, 45.7%)

  • dull light gray

    --dull-light-gray

    #d0d4d6 | hsl(200, 6.8%, 82.7%)

  • light gray

    --light-gray

    #ced4da | hsl(210, 14%, 83.1%)

  • platinum gray

    --platinum-gray

    #dee2e6 | hsl(210, 13.8%, 88.6%)

  • ghost white

    --ghost-white

    #f8f9fa | hsl(210, 16.7%, 97.6%)

  • white

    --white

    #fff | hsl(0, 0%, 100%)

Other

  • cerise pink

    --cerise-pink

    #e83e8c | hsl(332, 78.7%, 57.6%)

  • danger red

    --danger-red

    #dc3545 | hsl(354, 70.5%, 53.5%)

Semantic Colors

Text

Border

Link

Button

Inline

  • inline element background color

    --inline-element-background-color

    --ghost-white

Code

Input

  • input background color

    --input-background-color

    --#fff

  • input secondary background color

    --input-secondary-background-color

    --ag-grid-grey

  • input secondary border color

    --input-secondary-border-color

    --auro-metal

  • input primary color

    --input-primary-color

    --azure-blue

  • input focus border color

    --input-focus-border-color

    --sky-blue

  • input focus box shadow color

    --input-focus-box-shadow-color

    --water-blue

  • input error color

    --input-error-color

    --danger-red

Table

  • table odd row background color

    --table-odd-row-background-color

    --ghost-blue

Site Header

Toolbar

Sizes

Size half (4px)$size-half

Size one (8px)$size-1

Size two (16px)$size-2

Size three (24px)$size-3

Size four (32px)$size-4

Size five (40px)$size-5

Size six (48px)$size-6

Size seven (48px)$size-7

Size eight (64px)$size-8

Size nine (96px)$size-9

Size ten (208px)$size-10

Icons

<Icon name="info" />

<Icon name="warning" />

<Icon name="email" />

<Icon name="creditCard" />

<Icon name="lightBulb" />

<Icon name="enterprise" />

<Icon name="collapseCategories" />

<Icon name="search" />

<Icon name="arrowUp" />

<Icon name="arrowRight" />

<Icon name="arrowDown" />

<Icon name="arrowLeft" />

<Icon name="link" />

<Icon name="chevronUp" />

<Icon name="chevronRight" />

<Icon name="chevronDown" />

<Icon name="chevronLeft" />

<Icon name="replaydemo" />

<Icon name="takeControl" />

<Icon name="playCircle" />

<Icon name="download" />

<Icon name="executableProgram" />

<Icon name="code" />

<Icon name="tick" />

<Icon name="cross" />

<Icon name="plunker" />

<Icon name="stackblitz" />

<Icon name="codesandbox" />

<Icon name="maximize" />

<Icon name="minimize" />

<Icon name="idea" />

<Icon name="github" />

<Icon name="twitter" />

<Icon name="youtube" />

<Icon name="linkedin" />

<Icon name="docs-api" />

<Icon name="docs-columns" />

<Icon name="docs-row" />

<Icon name="docs-tooling" />

<Icon name="docs-styling" />

<Icon name="docs-csd" />

<Icon name="docs-ssd" />

<Icon name="docs-selection" />

<Icon name="docs-filtering" />

<Icon name="docs-rendering" />

<Icon name="docs-editing" />

<Icon name="docs-group" />

<Icon name="docs-detail" />

<Icon name="docs-import-export" />

<Icon name="docs-accessories" />

<Icon name="docs-components" />

<Icon name="docs-sparklines" />

<Icon name="docs-integrated-charts" />

<Icon name="docs-standalone-charts" />

<Icon name="docs-scrolling" />

<Icon name="docs-interactivity" />

<Icon name="docs-testing" />

<Icon name="docs-misc" />

<Icon name="feature-editing" />

<Icon name="feature-transactions" />

<Icon name="feature-aggregation" />

<Icon name="feature-grouping" />

<Icon name="feature-detail" />

<Icon name="feature-clipboard" />

<Icon name="feature-server-side" />

<Icon name="feature-pivoting" />

<Icon name="feature-filtering" />

<Icon name="feature-excel" />

<Icon name="feature-menu" />

<Icon name="feature-tree" />

Text Elements

Inline elements

Bold

Italic

Underline

Deleted

Inserted

Strikethrough

Small

Text Sub

Text Sup

Abbr.

Highlighted

Kbd

${code}

Link

In hic fugit nostrum Bold exercitationem aut nam quaerat occaecati. Cumque quo explicabo. Mollitia fugiat Italic unde mollitia dolor consequatur incidunt. Quod debitis aliquam Underline ipsum quis sed qui aut.

Quis dicta et incidunt Deleted mollitia quo vel omnis. Voluptas quibusdam vitae voluptates Inserted aspernatur mollitia amet. Id rem magnam at Strikethrough harum a quidem velit maiores. Accusamus autem dolorem Small voluptatem fuga cumqueSub maxime laboreSup ut. Aliquid iure sed id incidunt necessitatibus.

Eum beatae Kbd doloremque est harum veniam veniam ${code} ducimus. Et dignissimos praesentium placeat link voluptatum eum non. Qui iste dolorum voluptate omnis omnis veniam.

Horizontal rule hr

Un ordered list ul

  • Aliquam lobortis lacus eu libero ornare facilisis.
  • Nam et magna at libero scelerisque egestas.
    • Proin ultricies turpis et volutpat vehicula.
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
  • Proin ultricies turpis et volutpat vehicula.

Ordered list ol

  1. Aliquam lobortis lacus eu libero ornare facilisis.
  2. Nam et magna at libero scelerisque egestas.
    • Proin ultricies turpis et volutpat vehicula.
  3. Suspendisse id nisl ut leo finibus vehicula quis eu ex.
  4. Proin ultricies turpis et volutpat vehicula.

List style none: .list-style-none

  • Aliquam lobortis lacus eu libero ornare facilisis.
  • Nam et magna at libero scelerisque egestas.
    • Proin ultricies turpis et volutpat vehicula.
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
  • Proin ultricies turpis et volutpat vehicula.

Preformatted text: pre

:root {
    --font-size: 1rem;
    --line-height: 1.5;
    --font-weight: 400;
    --font-weight-thin: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --icon-size: 2em;
}

Preformatted code: <Snippet>

const addOne = (x) => {
    // Add one here
    const result = x + 1;
    return result;
};

Heading one: h1

Heading one

Heading two: h2

Heading two

Heading three: h3

Heading three

Heading four: h4

Heading four

Heading five: h5

Heading five

Heading six: h6

Heading six

Buttons

Primary:<button> / .button

Primary (link as button)

Secondary:.button-secondary

Secondary (link as button)

Disabled:<button disabled> / .button.disabled

Input button:.button-input

Button style none:.button-style-none

Button as link:.button-as-link

Small:.button.font-size-small

Large:.button.font-size-large

Form elements

Text input input type="text"

Search input input type="search"

Select select

Range input type="range"

Range input type="number"

Checkbox input type="checkbox"

Radio input type="radio"

Switch input type="checkbox" class="switch"

Reset & Submit input type="reset/submit"

Container .input-field with label

Container .input-field.inline with label

Container .input-field.input-error with label

Please provide a valid value.
Please select a valid value.

Container .input-field.inline.input-error with label

Please provide a valid value.
Please select a valid value.

Extra info .extra-info

Some extra info

Extra info .extra-info inside .input-error

Please provide a valid value.
Some extra info

Checkbox with .input-error container

Please check the checkbox.

Radio button with .input-error container

Please select the radio button.

Switch with .input-error container

Please toggle the switch.

Tables

Table: table

#YearMonthDayHourMinute
12023January24th1242
21997October3rd0912
22096March31st1855

With small header & no zebra striping: table.small-header.no-zebra

#YearMonthDayHourMinute
12023January24th1242
21997October3rd0912
22096March31st1855

Stacked table: table.stack / table { @incldue stack-table(); }

#YearMonthDayHourMinute
12023January24th1242
21997October3rd0912
22096March31st1855

Containers

Card:.card

Card header example

Example content: Non aut explicabo enim vel quos porro repellendus iure. Dolor sed provident aut consequatur in.

  • Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles
  • New ABC 13 9370, 13.3, 5th Gen CoreA5-8250U, 8GB RAM, 256GB SSD, power UHD Graphics, OS 10 Home, OS Office A & J 2016
  • Ergonomic executive chair upholstered in bonded black leather and PVC padded seat and back for all-day comfort and support
  • Andy shoes are designed to keeping in mind durability as well as trends, the most stylish range of shoes & sandals

Tabbed section:<Tabs><div tab-label="...">...</div></Tabs>

Section ONE: Et inventore est veniam expedita adipisci. Dolor rerum in ex illo. Rerum autem deleniti aut eligendi tempora aliquam nihil id magnam. Porro eveniet quisquam voluptate labore tempore saepe qui qui facilis.

Tabbed section with links:<Tabs><div tabs-links="true">...</div>...</Tabs>

Section ONE: Et inventore est veniam expedita adipisci. Dolor rerum in ex illo. Rerum autem deleniti aut eligendi tempora aliquam nihil id magnam. Porro eveniet quisquam voluptate labore tempore saepe qui qui facilis.