These are system-wide settings that have been converted from YAML files to Sass (SCSS) for use in USITC projects.
\nMost settings can be overridden in your own Sass code by declaring the variable before importing the design system tokens.
\nTokens are also output in other formats for ease of use in various projects. Currently available formats are:
\ndist/assets/tokens/tokens.ts.dist/assets/tokens/tokens.js.dist/assets/tokens/tokens.json.Please send a request to the team if you would like to have these tokens in another format, such as CSS Custom Properties, LESS, Stylus, etc.
\n","deprecated":false,"experimental":false,"reference":"Tokens","referenceNumber":"1","referenceURI":"tokens","weight":1,"colors":[],"markup":"","source":{"filename":"tokens/00-tokens.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/00-tokens.yml","line":10},"depth":1,"modifiers":[],"parameters":[]},{"header":"Colors","description":"","deprecated":false,"experimental":false,"reference":"Tokens.Colors","referenceNumber":"1.1","referenceURI":"tokens-colors","weight":1,"colors":[],"markup":"","source":{"filename":"tokens/01-colors.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/01-colors.yml","line":10},"depth":2,"modifiers":[],"parameters":[]},{"header":"Theme Colors","description":"These are the primary colors to be used on USITC websites. Other variations in lightness can be used when appropriate, and other colors from the Available Colors shown below can also be used sparingly.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Colors.Theme","referenceNumber":"1.1.1","referenceURI":"tokens-colors-theme","weight":1,"colors":[],"markup":"","source":{"filename":"tokens/01-colors.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/01-colors.yml","line":116},"depth":3,"modifiers":[],"parameters":[]},{"header":"Base Theme","description":"These are the colors that should be used by default on USITC websites. You can use these variables in Sass, such as border-color: $color-theme-base-border; or color: $color-theme-base-hover-text;.
This is an example of our base theme in action.
\nThis is an example of our base theme on the alternate background color.
\nWhen you want to use a dark background, use these colors.
\nThis is an example of our dark theme in action.
\nThis is an example of our dark theme on the alternate background color.
\nUse these state color themes to convey information to users.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Colors.State","referenceNumber":"1.1.2","referenceURI":"tokens-colors-state","weight":2,"colors":[],"markup":"","source":{"filename":"tokens/01-colors.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/01-colors.yml","line":207},"depth":3,"modifiers":[],"parameters":[]},{"header":"Error State","description":"These colors should be used to show an error or a very important message for the user.
\nThis is an example of our error state in action.
\nThese colors should be used to show a standard message for the user.
\nThis is an example of our info state in action.
\nThese colors should be used to show that an action has successfully completed or a positive message for the user.
\nThis is an example of our success state in action.
\nThese colors should be used to show a warning or a semi-important message for the user.
\nThis is an example of our warning state in action.
\nBelow are the available colors in the USITC Design System, along with acceptable variations in lightness. You can reference these colors in Sass by using the color() function shown with each variation, such as color: color(cyan, 20); or background-color: color(red);. More information on the color() function (including how to optionally control opacity), refer to the color() function.
If you don’t provide a lightness, it will default to a lightness of 50. Black and white are special cases in that they have no lightness variations. Black will always have 0 lightness and white will always have 100 lightness.
Also shown is the WCAG 2.0 standard for color contrast for each displayed combination. The text shown on each colored background is either white or black, chosen because that color has more contrast on the colored background than the other would.
\nOur goal is to meet WCAG 2.0 AA standards for color contrast for all essential content, which is 4.5:1 for normal text and 3:1 for bold or larger text.
\n| Score | \nContrast Ratio | \nResult | \n
|---|---|---|
| AAA | \n7.0+ | \nPasses WCAG 2.0 AAA | \n
| AA | \n4.5+ | \nPasses WCAG 2.0 AA | \n
| AA18 | \n3.0+ | \nPasses WCAG 2.0 AA Large Text Only (18pt/24px/1.5rem or 14pt/19px/1.2rem bold) | \n
| DNP | \n<3.0 | \nDoes Not Pass WCAG 2.0 | \n
Tip: If you’re using a desktop browser, you can hover over any score to see the actual contrast ratio for that color combination.
\nOur base font family is Montserrat, a geometric sans-serif typeface designed by Argentinian designer Julieta Ulanovsky. The design was inspired by signage from her historical Buenos Aires neighborhood of the same name.
\nWe load Montserrat as a webfont, but if it is unavailable our font stack falls back to the system font for any modern operating system (San Francisco on macOS and iOS, Segoe UI on Windows, Droid Sans on Android, etc.).
\nThis text is set in our base font stack.
\nWe also have a monospace font stack for times when it’s needed, and it’s very visible in the code snippets all over this styleguide. We’ve chosen our favorite monospace font — Operator Mono — as the base, and several good fallback options.
\nThis text is set in our monospace font stack.
\nWe use two main weights of Montserrat — Regular (400) and Bold (700). We occasionally use the Black (900) weight for headers, and we also have an Italic version of each weight.
\nThis is Montserrat Regular.
\nThis is Montserrat Bold.
\nThis is Montserrat Black.
We use a modular scale for our font sizes. Starting at a 1.6rem (16px) base, our font-sizes go up and down based on a modular scale ratio of 1.2.
1rem (rem is a CSS unit of length that stands for root em) is equivalent to our 10px base.
While we have all of the following sizes available, use your judgment on whether a particular size looks reasonable (and readable) in the situation where it is used.
\nThis is our XXS font size.
\nThis is our XS font size.
\nThis is our small font size.
\nThis is our medium (base) font size.
\nThis is our large font size.
\nThis is our XL font size.
\nThis is our XXL font size.
\nThis is our XXXL font size.
\nThis is our XXXXL font size.
These are the base font sizes for our headers, usable as variables in Sass.
\nPages should be structured in a hierarchical manner, with <h1> headings being the most important (usually page titles or main content heading), then <h2> headings (usually major section headings), down to <h3> headings (sub-sections of the <h2>), and so on. Lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).
This is an H1 heading.
\nThis is an H2 heading.
\nThis is an H3 heading.
\nThis is an H4 heading.
\nThis is an H5 heading.
\nThis is an H6 heading.
Our base line height is 1.5 (the number is multiplied by the element’s font size). We use smaller line heights for headers (1.25) and buttons (1). We also set an explicit line height of 5rem (50px) on form elements like input fields and select boxes for consistency.
We use a spacing scale starting at a 2rem (20px) base, going up and down from there. You can use these variables in Sass, such as padding: $space-m; or margin: $space-xl $space-l;.
We have a standard border for elements, along with settings for different border radii. You can use these variables in Sass, such as border-top: $border-base; or border-radius: $border-radius-base;.
These content variables are used when the site styles are generated.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Content","referenceNumber":"1.5","referenceURI":"tokens-content","weight":5,"colors":[],"markup":"","source":{"filename":"tokens/05-content.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/05-content.yml","line":10},"depth":2,"modifiers":[],"parameters":[{"name":"$content-max-width","defaultValue":"1200px","description":"Used to set a maximum content width for pages"},{"name":"$content-header-links","defaultValue":"4","description":"Controls the grid in the site header"}]},{"header":"Breakpoints","description":"These settings (in the form of a Sass map) control the breakpoints for our media queries for responsive design.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Breakpoints","referenceNumber":"1.6","referenceURI":"tokens-breakpoints","weight":6,"colors":[],"markup":"","source":{"filename":"tokens/06-breakpoints.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/06-breakpoints.yml","line":13},"depth":2,"modifiers":[],"parameters":[{"name":"$breakpoints","defaultValue":"(xs: 400px, s: 600px, m: 800px, l: 1000px, xl: 1200px, xxl: 1600px, xxxl: 2400px, xxxxl: 4800px)","description":""}]},{"header":"Grid System","description":"These settings control our grid system.
\n","deprecated":false,"experimental":false,"reference":"Tokens.GridSystem","referenceNumber":"1.7","referenceURI":"tokens-gridsystem","weight":7,"colors":[],"markup":"","source":{"filename":"tokens/07-grid.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/07-grid.yml","line":13},"depth":2,"modifiers":[],"parameters":[{"name":"$grid-columns","defaultValue":"12","description":"The default number of columns in our grid"},{"name":"$grid-gap-col","defaultValue":"$space-m","description":"The default size of the gutter between grid columns"},{"name":"$grid-gap-row","defaultValue":"$space-m","description":"The default size of the gutter between grid rows"}]},{"header":"Transitions","description":"These settings are our default CSS transitions.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Transitions","referenceNumber":"1.8","referenceURI":"tokens-transitions","weight":8,"colors":[],"markup":"","source":{"filename":"tokens/08-transitions.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/08-transitions.yml","line":10},"depth":2,"modifiers":[],"parameters":[{"name":"$transition-base","defaultValue":"all 0.25s ease-in-out","description":"The default transitionThese settings are our default CSS shadows. Shadows are used very sparingly across our design system, but can occasionally be very useful.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Shadows","referenceNumber":"1.9","referenceURI":"tokens-shadows","weight":9,"colors":[],"markup":"","source":{"filename":"tokens/09-shadows.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/09-shadows.yml","line":10},"depth":2,"modifiers":[],"parameters":[{"name":"$shadows-box-base","defaultValue":"0 $space-xxs $space-xxs 0 color(black)","description":"The default box shadow"},{"name":"$shadows-box-focus","defaultValue":"0 0 $space-xxs $space-xxs color(cyan, 30)","description":"The box shadow we use when an element has focus"}]},{"header":"Forms","description":"We use custom form controls for checkboxes and radio buttons. Lining these elements up with the elements around them requires pixel-specific positioning, which is controlled by these settings.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Forms","referenceNumber":"1.10","referenceURI":"tokens-forms","weight":10,"colors":[],"markup":"","source":{"filename":"tokens/10-forms.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/10-forms.yml","line":10},"depth":2,"modifiers":[],"parameters":[{"name":"$form-control-default-left","defaultValue":"-2px","description":"Controls horizontal positioning"},{"name":"$form-control-default-size","defaultValue":"40px","description":"Controls height and width"},{"name":"$form-control-default-size-inner","defaultValue":"26px","description":"Controls inner height and width"},{"name":"$form-control-default-top","defaultValue":"-2px","description":"Controls vertical positioning"},{"name":"$form-control-checkbox-position","defaultValue":"6px 7px","description":"Controls the position of the ✔"},{"name":"$form-control-checkbox-bust-left","defaultValue":"-2px","description":"Controls horizontal positioning for the "bust out" checkbox"},{"name":"$form-control-checkbox-bust-margin-top","defaultValue":"-10px","description":"Controls margins"},{"name":"$form-control-checkbox-bust-position","defaultValue":"5px 2px","description":"Controls the position of the ✔"},{"name":"$form-control-checkbox-bust-size","defaultValue":"50px","description":"Controls height and width"},{"name":"$form-control-checkbox-bust-size-inner","defaultValue":"44px","description":"Controls inner height and width"},{"name":"$form-control-checkbox-bust-top","defaultValue":"-2px","description":"Controls vertical positioning"}]},{"header":"Icons","description":"These settings control sizing for our icon system. Our base icon is 0.75em in height and width, and scales up and down based on a modular scale ratio of 1.5. Unlike our typography sizes which will are based on rem, our icon sizes are based on em and depend on the font size of the containing element.
These settings are used for our print-only styles.
\n","deprecated":false,"experimental":false,"reference":"Tokens.Print","referenceNumber":"1.12","referenceURI":"tokens-print","weight":12,"colors":[],"markup":"","source":{"filename":"tokens/12-print.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/12-print.yml","line":13},"depth":2,"modifiers":[],"parameters":[{"name":"$print-color-base","defaultValue":"color(black)","description":"Sets the color of all text to black"},{"name":"$print-color-background","defaultValue":"color(white)","description":"Sets the background for all elements to white"},{"name":"$print-font-size","defaultValue":"12pt","description":"Sets the default font size"},{"name":"$print-font-size-results","defaultValue":"5.5pt","description":"Sets the font size for search results"},{"name":"$print-page-margin","defaultValue":"1cm","description":"Sets the page margins"}]},{"header":"Off-Canvas","description":"These settings are used for our off-canvas components.
\n","deprecated":false,"experimental":false,"reference":"Tokens.OffCanvas","referenceNumber":"1.13","referenceURI":"tokens-offcanvas","weight":13,"colors":[],"markup":"","source":{"filename":"tokens/13-off-canvas.yml","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/tokens/13-off-canvas.yml","line":10},"depth":2,"modifiers":[],"parameters":[{"name":"$off-canvas-height","defaultValue":"100vh","description":"Sets the height of off-canvas elements"},{"name":"$off-canvas-width","defaultValue":"250px","description":"Sets the width of off-canvas elements"},{"name":"$off-canvas-open-at","defaultValue":"xxxl","description":"Keep the off-canvas menu open at a certain breakpoint"},{"name":"$off-canvas-shadow","defaultValue":"5px 0 10px 0 color(black, 0, 25)","description":"Sets the box-shadow for off-canvas elements"},{"name":"$off-canvas-transition","defaultValue":"left 0.75s ease-in-out","description":"Sets the CSS transition when toggling off-canvas elements"}]},{"header":"Sass Directives","description":"Mixins and functions to help make development and styling easier and more consistent.
\n","deprecated":false,"experimental":false,"reference":"SassDirectives","referenceNumber":"2","referenceURI":"sassdirectives","weight":2,"colors":[],"markup":"","source":{"filename":"scss/_directives.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/_directives.scss","line":10},"depth":1,"modifiers":[],"parameters":[]},{"header":"Breakpoints","description":"@include breakpoint($point)\nThe breakpoint() Sass mixin takes a single required parameter. You must pass in a breakpoint name or a number. If a breakpoint name is passed, the $breakpoints list as defined in Tokens ➔ Breakpoints is used for a minimum-width. If a number is passed, that number of pixels is used as a minimum-width.
This will cause any styles between the following set of {} brackets to be applied only to screen sizes wider than the breakpoint passed.
Applying the CSS generated by the example below, any element with the .disclaimer class would have a border when the browser width is less than the medium (800px) breakpoint, but would have no border when the browser is wider than that.
^^^scss\nstr-replace($string, $search, $replace)\n^^^
\nThe str-replace() Sass function takes three parameters, the first two of which are required. You must pass the text to be modified ($string) and the text you want to replace ($search). The third (optional) parameter is the text you want to insert in place of the $search text ($replace). If the $replace parameter is not passed, the $search text will simply be removed. This function is used in Directives ➔ Font Definition.
For example, this SCSS code:
\n^^^scss\n$string: 'The answer to life, the universe, and everything is blah.';\n\n.selector {\ncontent: str-replace($string, 'blah', '42');\n}\n^^^
\nwill compile to this CSS:
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StringReplace","referenceNumber":"2.2","referenceURI":"sassdirectives-stringreplace","weight":2,"colors":[],"markup":"SCSS:\n.selector {\n content: 'The answer to life, the universe, and everything is 42.';\n}","source":{"filename":"scss/directives/_string-replace.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/directives/_string-replace.scss","line":13},"depth":2,"modifiers":[],"parameters":[]},{"header":"Font Definition","description":"^^^scss\n@include font-def($family, $variant, $weight, $style, $stretch);\n^^^
\nThe font-def() Sass mixin takes five parameters, the first two of which are required. You must pass the font family name ($family) and font variant name ($variant) to generate a @font-face definition. This function is used to generate @font-face declarations in Components ➔ Typography.
You can also pass the following optional parameters:
\n$weight — normal | bold | 100 | 200 | 300 | … | 800 | 900$style — normal | italic$stretch — normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expandedThe optional parameters will all default to normal if they are not passed. The $stretch variable is currently not used in our design system, but is available for potential future use.
For example, this SCSS code:
\n^^^scss\n@include font-def(Raleway, semibolditalic, 600, italic, normal);\n^^^
\nwill compile to this CSS:
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.FontDefinition","referenceNumber":"2.3","referenceURI":"sassdirectives-fontdefinition","weight":3,"colors":[],"markup":"SCSS:\n@font-face {\n font-family: 'Raleway';\n font-stretch: normal;\n font-style: italic;\n font-weight: 600;\n src: url('../fonts/raleway-semibolditalic.woff') format('woff'),\n url('../fonts/raleway-semibolditalic.woff2') format('woff2');\n}","source":{"filename":"scss/directives/_font-face.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/directives/_font-face.scss","line":10},"depth":2,"modifiers":[],"parameters":[]},{"header":"Colors","description":"^^^scss\ncolor($key, $luminosity, $alpha)\n^^^
\nThe color() Sass function takes three parameters, only the first of which is required. You must pass in a color name ($key) from the Available Colors in Tokens ➔ Colors.
For example, this SCSS code:
\n^^^scss\np {\ncolor: color(cyan);\n}\n^^^
\nwill render paragraph text in the base cyan equivalent to #19c3e6 or rgba(25, 195, 230, 1).
You may pass in an optional brightness variable ($luminosity), which can be any percentage, though it is recommended to use only multiples of ten (10, 20, 30 … 80, 90). The higher the number, the brighter the color:
h1 {\n color: color(cyan, 20);\n}\n\nh2 {\n color: color(cyan, 50);\n}\n\nh3 {\n color: color(cyan, 80);\n}\nwill compile to CSS that renders:
\nH1 text in a dark cyan equivalent to #0a4e5c or rgba(10, 78, 92, 1)H2 text in the base cyan equivalent to #19c3e6 or rgba(25, 195, 230, 1)H3 text in a light cyan equivalent to #a3e7f5 or rgba(163, 231, 245, 1)color(black) and color(white) are special cases in that their brightness is set by definition and cannot be adjusted:
color(black) is the same as color(grey, 0) equivalent to #000000 or rgba(0, 0, 0, 1)color(white) is the same as color(grey, 100) equivalent to #ffffff or rgba(255, 255, 255, 1)You may pass in an optional opacity variable ($alpha), which can be any percentage, though it is recommended to use only multiples of ten: 10, 20, 30 … 80, 90. If you want to use $alpha, you must also pass a $luminosity — it is recommended to always pass 50 so that you are creating only transparent versions of the base color. The higher the number, the more opaque the color:
h1 {\n color: color(cyan, 50, 20);\n}\n\nh2 {\n color: color(cyan, 50, 50);\n}\n\nh3 {\n color: color(cyan, 80, 100);\n}\nwill compile to CSS that renders:
\nH1 text in a nearly transparent base cyan equivalent to rgba(25, 195, 230, 0.2)H2 text in the half transparent base cyan equivalent to rgba(25, 195, 230, 0.5)H3 text in a completely opaque base cyan equivalent to rgba(25, 195, 230, 1)Unlike brightness, opacity CAN be set on color(black) and color(white):
color(black, 0, 20) will render a nearly transparent black equivalent to rgba(0, 0, 0, 0.2)color(white, 100, 50) will render a half transparent white equivalent to rgba(255, 255, 255, 0.5)Include these Sass mixins to use standard state colors on an element and its children.
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StateColors","referenceNumber":"2.5","referenceURI":"sassdirectives-statecolors","weight":5,"colors":[],"markup":"","source":{"filename":"scss/directives/_state-colors.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/directives/_state-colors.scss","line":10},"depth":2,"modifiers":[],"parameters":[]},{"header":"Default State","description":"^^^scss\n@include state-default();\n^^^
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StateColors.DefaultState","referenceNumber":"2.5.1","referenceURI":"sassdirectives-statecolors-defaultstate","weight":0,"colors":[],"markup":"This is an example of our default state in action.
\n^^^scss\n@include state-error();\n^^^
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StateColors.ErrorState","referenceNumber":"2.5.2","referenceURI":"sassdirectives-statecolors-errorstate","weight":0,"colors":[],"markup":"This is an example of our error state in action.
\n^^^scss\n@include state-info();\n^^^
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StateColors.InfoState","referenceNumber":"2.5.3","referenceURI":"sassdirectives-statecolors-infostate","weight":0,"colors":[],"markup":"This is an example of our info state in action.
\n^^^scss\n@include state-success();\n^^^
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StateColors.SuccessState","referenceNumber":"2.5.4","referenceURI":"sassdirectives-statecolors-successstate","weight":0,"colors":[],"markup":"This is an example of our success state in action.
\n^^^scss\n@include state-warning();\n^^^
\n","deprecated":false,"experimental":false,"reference":"SassDirectives.StateColors.WarningState","referenceNumber":"2.5.5","referenceURI":"sassdirectives-statecolors-warningstate","weight":0,"colors":[],"markup":"This is an example of our warning state in action.
\n^^^scss\npow($number, $exponent)\n^^^
\nThe power() Sass function takes two parameters, both of which is required. You must pass in a $number and an $exponent. The function returns the number to the exponent power. This function is used in the modular scale functions in Sass Directives ➔ Modular Scale.
^^^scss\nms($ratio, $base, $factor)\n^^^
\nThe ms() Sass function takes three parameters, all of which is required, and is used to build a modular scale. You must pass in a $ratio, a $base, and a $factor. This function is used for our Tokens ➔ Typography and Tokens ➔ Icons scales.
^^^scss\n@include constrained($max-width)\n^^^
\nThe breakpoint() Sass mixin takes a single optional parameter, $max-width. If no $max-width is passed, it will default to the $content-max-width defined in Tokens ➔ Content. This mixin can be used to set the maximum width of a block level element, and center it in the browser.
^^^scss\n@include build-grid()\n^^^
\nThe build-grid() Sass mixin is a shortcut that generates our grid system. The mixin takes no parameters, but uses the $breakpoints defined in Tokens ➔ Breakpoints and the $grid-columns defined in Tokens ➔ Grid.
These are CSS classes that can be used in your HTML templates.
\n","deprecated":false,"experimental":false,"reference":"Utilities","referenceNumber":"3","referenceURI":"utilities","weight":3,"colors":[],"markup":"","source":{"filename":"scss/_utilities.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/_utilities.scss","line":10},"depth":1,"modifiers":[],"parameters":[]},{"header":"Borders","description":"Our base border is a one pixel wide, solid grey border, as defined in Tokens ➔ Borders. You can add this class to any HTML element:
\n","deprecated":false,"experimental":false,"reference":"Utilities.Borders","referenceNumber":"3.1","referenceURI":"utilities-borders","weight":0,"colors":[],"markup":"You can add these classes to any HTML element to give it a border on one side (they can also be combined):
\n","deprecated":false,"experimental":false,"reference":"Utilities.Borders.SideSpecific","referenceNumber":"3.1.1","referenceURI":"utilities-borders-sidespecific","weight":1,"colors":[],"markup":"You can add these classes to any HTML element to remove a border from an element:
\n","deprecated":false,"experimental":false,"reference":"Utilities.Borders.BorderRemoval","referenceNumber":"3.1.2","referenceURI":"utilities-borders-borderremoval","weight":2,"colors":[],"markup":"The .flex class can be added to an element to display the element’s children as flexbox items if the viewport width is above the medium breakpoint defined in Tokens ➔ Breakpoints. At smaller widths, these classes have no effect.
Our responsive grid system is built using CSS Grid Layout and uses our Sass Directives ➔ Grid Builder mixin to generate the grid. By default, it is a 12-column wide grid and includes five tiers of predefined classes for building complex responsive layouts.
\nAdd a grid class to an element that wraps around your grid cells. Any direct children of that element will be a grid cell. You can add classes to these grid cells to control their width at different screen widths. See the examples below to get a basic understanding of the code required.
| \n | \n Extra small \n ≥400px\n | \n \n Small \n ≥600px\n | \n \n Medium \n ≥800px\n | \n \n Large \n ≥1200px\n | \n \n Extra large \n ≥1600px\n | \n
|---|---|---|---|---|---|
| Class prefix | \n.g-xs- | \n .g-sm- | \n .g-md- | \n .g-lg- | \n .g-xl- | \n
Collapses to a single column when the screen width is less than the medium breakpoint (800px).
Collapses to a single column when the screen width is less than the small breakpoint (600px).
Collapses to two columns when the screen width is less than the small breakpoint (600px), and to a single column when the screen width is less than the medium breakpoint (800px).
Our grid system doesn’t limit you to a single row. Your content can flow onto multiple rows at different screen widths.
\nTest your grid at different screen widths to ensure that things collapse as you expect. If a grid cell won’t fit on a row, it will simply drop down to the next row.
\nYou can add gutters to your grid by adding a grid-gap class. You can also use grid-gap-col for only horizontal gutters and grid-gap-row for only vertical gutters.
There are classes available to make content alignment in cells easier.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Grid.Alignment","referenceNumber":"3.3.3","referenceURI":"utilities-grid-alignment","weight":3,"colors":[],"markup":"","source":{"filename":"scss/utilities/_grid.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_grid.scss","line":202},"depth":3,"modifiers":[],"parameters":[]},{"header":"Column-Axis Alignment","description":"The CSS property align-self aligns a grid item inside a cell along the block (column) axis. This value applies to the grid item inside a single cell. By default, grid items will stretch to fill the entire cell. You can add grid-self-align-* classes to individual grid elements to align their content.
The CSS property justify-self aligns a grid item inside a cell along the inline (row) axis. This value applies to a grid item inside a single cell. By default, grid items will stretch to fill the entire cell. You can add grid-self-justify-* classes to individual grid elements to align their content.
These are utility classes that can be used to hide elements based on the viewport widths defined in Tokens ➔ Breakpoints.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Responsive","referenceNumber":"3.4","referenceURI":"utilities-responsive","weight":0,"colors":[],"markup":"","source":{"filename":"scss/utilities/_responsive.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_responsive.scss","line":13},"depth":2,"modifiers":[],"parameters":[{"name":".hide-xs-down","defaultValue":"","description":"Hide element when screen size is smaller than the XS breakpoint."},{"name":".hide-xs-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the XS breakpoint."},{"name":".hide-s-down","defaultValue":"","description":"Hide element when screen size is smaller than the S breakpoint."},{"name":".hide-s-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the S breakpoint."},{"name":".hide-m-down","defaultValue":"","description":"Hide element when screen size is smaller than the M breakpoint."},{"name":".hide-m-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the M breakpoint."},{"name":".hide-l-down","defaultValue":"","description":"Hide element when screen size is smaller than the L breakpoint."},{"name":".hide-l-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the L breakpoint."},{"name":".hide-xl-down","defaultValue":"","description":"Hide element when screen size is smaller than the XL breakpoint."},{"name":".hide-xl-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the XL breakpoint."},{"name":".hide-xxl-down","defaultValue":"","description":"Hide element when screen size is smaller than the XXL breakpoint."},{"name":".hide-xxl-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the XXL breakpoint."},{"name":".hide-xxxl-up","defaultValue":"","description":"Hide element when screen size is equal to or greater than the XXXL breakpoint."}]},{"header":"Spacing","description":"These are utility classes that can be used to change margins and padding on elements.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing","referenceNumber":"3.5","referenceURI":"utilities-spacing","weight":0,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":13},"depth":2,"modifiers":[],"parameters":[]},{"header":"Margin","description":"","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Margin","referenceNumber":"3.5.1","referenceURI":"utilities-spacing-margin","weight":1,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":19},"depth":3,"modifiers":[],"parameters":[]},{"header":"None","description":"These classes remove margins.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Margin.None","referenceNumber":"3.5.1.1","referenceURI":"utilities-spacing-margin-none","weight":1,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":25},"depth":4,"modifiers":[],"parameters":[{"name":".margin-none","defaultValue":"","description":"Removes any margin from all sides of the element."},{"name":".margin-top-none","defaultValue":"","description":"Removes any margin from the top side of the element."},{"name":".margin-right-none","defaultValue":"","description":"Removes any margin from the right side of the element."},{"name":".margin-bottom-none","defaultValue":"","description":"Removes any margin from the bottom side of the element."},{"name":".margin-left-none","defaultValue":"","description":"Removes any margin from the left side of the element."}]},{"header":"Base","description":"These classes add base (medium) margins as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Margin.Base","referenceNumber":"3.5.1.2","referenceURI":"utilities-spacing-margin-base","weight":2,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":58},"depth":4,"modifiers":[],"parameters":[{"name":".margin","defaultValue":"","description":"Adds a base margin on all sides of the element."},{"name":".margin-left-right","defaultValue":"","description":"Adds a base margin on the left and right sides of the element."},{"name":".margin-top-bottom","defaultValue":"","description":"Adds a base margin on the top and bottom sides of the element."},{"name":".margin-top","defaultValue":"","description":"Adds a base margin on the top side of the element."},{"name":".margin-right","defaultValue":"","description":"Adds a base margin on the right side of the element."},{"name":".margin-bottom","defaultValue":"","description":"Adds a base margin on the bottom side of the element."},{"name":".margin-left","defaultValue":"","description":"Adds a base margin on the left side of the element."}]},{"header":"Half","description":"These classes add half (small) margins as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Margin.Half","referenceNumber":"3.5.1.3","referenceURI":"utilities-spacing-margin-half","weight":3,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":107},"depth":4,"modifiers":[],"parameters":[{"name":".margin-half","defaultValue":"","description":"Adds a half margin on all sides of the element."},{"name":".margin-top-half","defaultValue":"","description":"Adds a half margin on the top side of the element."},{"name":".margin-right-half","defaultValue":"","description":"Adds a half margin on the right side of the element."},{"name":".margin-bottom-half","defaultValue":"","description":"Adds a half margin on the bottom side of the element."},{"name":".margin-left-half","defaultValue":"","description":"Adds a half margin on the left side of the element."}]},{"header":"Quarter","description":"These classes add quarter (extra small) margins as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Margin.Quarter","referenceNumber":"3.5.1.4","referenceURI":"utilities-spacing-margin-quarter","weight":4,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":140},"depth":4,"modifiers":[],"parameters":[{"name":".margin-quarter","defaultValue":"","description":"Adds a quarter margin on all sides of the element."},{"name":".margin-top-quarter","defaultValue":"","description":"Adds a quarter margin on the top side of the element."},{"name":".margin-right-quarter","defaultValue":"","description":"Adds a quarter margin on the right side of the element."},{"name":".margin-bottom-quarter","defaultValue":"","description":"Adds a quarter margin on the bottom side of the element."},{"name":".margin-left-quarter","defaultValue":"","description":"Adds a quarter margin on the left side of the element."}]},{"header":"Double","description":"These classes add double (large) margins as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Margin.Double","referenceNumber":"3.5.1.5","referenceURI":"utilities-spacing-margin-double","weight":5,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":173},"depth":4,"modifiers":[],"parameters":[{"name":".margin-double","defaultValue":"","description":"Adds a double margin on all sides of the element."},{"name":".margin-top-double","defaultValue":"","description":"Adds a double margin on the top side of the element."},{"name":".margin-right-double","defaultValue":"","description":"Adds a double margin on the right side of the element."},{"name":".margin-bottom-double","defaultValue":"","description":"Adds a double margin on the bottom side of the element."},{"name":".margin-left-double","defaultValue":"","description":"Adds a double margin on the left side of the element."}]},{"header":"Padding","description":"","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Padding","referenceNumber":"3.5.2","referenceURI":"utilities-spacing-padding","weight":2,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":206},"depth":3,"modifiers":[],"parameters":[]},{"header":"None","description":"These classes remove padding.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Padding.None","referenceNumber":"3.5.2.1","referenceURI":"utilities-spacing-padding-none","weight":1,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":212},"depth":4,"modifiers":[],"parameters":[{"name":".padding-none","defaultValue":"","description":"Removes any padding from all sides of the element."},{"name":".padding-top-none","defaultValue":"","description":"Removes any padding from the top side of the element."},{"name":".padding-right-none","defaultValue":"","description":"Removes any padding from the right side of the element."},{"name":".padding-bottom-none","defaultValue":"","description":"Removes any padding from the bottom side of the element."},{"name":".padding-left-none","defaultValue":"","description":"Removes any padding from the left side of the element."}]},{"header":"Base","description":"These classes add base (medium) padding as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Padding.Base","referenceNumber":"3.5.2.2","referenceURI":"utilities-spacing-padding-base","weight":2,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":245},"depth":4,"modifiers":[],"parameters":[{"name":".padding","defaultValue":"","description":"Adds a base padding on all sides of the element."},{"name":".padding-left-right","defaultValue":"","description":"Adds a base padding on the left and right sides of the element."},{"name":".padding-top-bottom","defaultValue":"","description":"Adds a base padding on the top and bottom sides of the element."},{"name":".padding-top","defaultValue":"","description":"Adds a base padding on the top side of the element."},{"name":".padding-right","defaultValue":"","description":"Adds a base padding on the right side of the element."},{"name":".padding-bottom","defaultValue":"","description":"Adds a base padding on the bottom side of the element."},{"name":".padding-left","defaultValue":"","description":"Adds a base padding on the left side of the element."}]},{"header":"Half","description":"These classes add half (small) padding as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Padding.Half","referenceNumber":"3.5.2.3","referenceURI":"utilities-spacing-padding-half","weight":3,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":298},"depth":4,"modifiers":[],"parameters":[{"name":".padding-half","defaultValue":"","description":"Adds a half padding on all sides of the element."},{"name":".padding-left-right-half","defaultValue":"","description":"Adds a half padding on the left and right sides of the element."},{"name":".padding-top-bottom-half","defaultValue":"","description":"Adds a half padding on the top and bottom sides of the element."},{"name":".padding-top-half","defaultValue":"","description":"Adds a half padding on the top side of the element."},{"name":".padding-right-half","defaultValue":"","description":"Adds a half padding on the right side of the element."},{"name":".padding-bottom-half","defaultValue":"","description":"Adds a half padding on the bottom side of the element."},{"name":".padding-left-half","defaultValue":"","description":"Adds a half padding on the left side of the element."}]},{"header":"Quarter","description":"These classes add quarter (extra small) padding as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Padding.Quarter","referenceNumber":"3.5.2.4","referenceURI":"utilities-spacing-padding-quarter","weight":4,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":343},"depth":4,"modifiers":[],"parameters":[{"name":".padding-quarter","defaultValue":"","description":"Adds a quarter margin on all sides of the element."}]},{"header":"Double","description":"These classes add double (large) padding as defined in Tokens ➔ Spacing.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Spacing.Padding.Double","referenceNumber":"3.5.2.5","referenceURI":"utilities-spacing-padding-double","weight":5,"colors":[],"markup":"","source":{"filename":"scss/utilities/_spacing.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_spacing.scss","line":356},"depth":4,"modifiers":[],"parameters":[{"name":".padding-double","defaultValue":"","description":"Adds a double margin on all sides of the element."}]},{"header":"States","description":"These are utility classes that can be used to convey state, using the states defined in Tokens ➔ Colors.
\n","deprecated":false,"experimental":false,"reference":"Utilities.States","referenceNumber":"3.6","referenceURI":"utilities-states","weight":0,"colors":[],"markup":"","source":{"filename":"scss/utilities/_states.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_states.scss","line":10},"depth":2,"modifiers":[],"parameters":[]},{"header":"Error","description":"","deprecated":false,"experimental":false,"reference":"Utilities.States.Error","referenceNumber":"3.6.1","referenceURI":"utilities-states-error","weight":1,"colors":[],"markup":"These are utility classes that can be used to change font weight, size, alignment, etc.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Typography","referenceNumber":"3.7","referenceURI":"utilities-typography","weight":0,"colors":[],"markup":"","source":{"filename":"scss/utilities/_typography.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_typography.scss","line":13},"depth":2,"modifiers":[],"parameters":[]},{"header":"Weight","description":"These classes change the font weight, defined in Tokens ➔ Typography.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Typography.Weight","referenceNumber":"3.7.1","referenceURI":"utilities-typography-weight","weight":1,"colors":[],"markup":"","source":{"filename":"scss/utilities/_typography.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_typography.scss","line":45},"depth":3,"modifiers":[],"parameters":[{"name":".black","defaultValue":"","description":"Use the black weight."},{"name":".bold","defaultValue":"","description":"Use the bold weight."},{"name":".unbold","defaultValue":"","description":"Use the normal weight."}]},{"header":"Size","description":"These classes change the font size, defined in Tokens ➔ Typography.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Typography.Size","referenceNumber":"3.7.2","referenceURI":"utilities-typography-size","weight":2,"colors":[],"markup":"","source":{"filename":"scss/utilities/_typography.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_typography.scss","line":72},"depth":3,"modifiers":[],"parameters":[{"name":".size-xxs","defaultValue":"","description":"Use the XXS size."},{"name":".size-xs","defaultValue":"","description":"Use the XS size."},{"name":".size-s","defaultValue":"","description":"Use the small size."},{"name":".size-m","defaultValue":"","description":"Use the medium size."},{"name":".size-l","defaultValue":"","description":"Use the large size."},{"name":".size-xl","defaultValue":"","description":"Use the XL size."},{"name":".size-xxl","defaultValue":"","description":"Use the XXL size."},{"name":".size-xxxl","defaultValue":"","description":"Use the XXXL size."},{"name":".size-xxxxl","defaultValue":"","description":"Use the XXXXL size."}]},{"header":"Alignment","description":"These classes change the text alignment. Please note that these force the element to a block-level element.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Typography.Alignment","referenceNumber":"3.7.3","referenceURI":"utilities-typography-alignment","weight":3,"colors":[],"markup":"","source":{"filename":"scss/utilities/_typography.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_typography.scss","line":125},"depth":3,"modifiers":[],"parameters":[{"name":".text-left","defaultValue":"","description":"Left-align the element."},{"name":".text-center","defaultValue":"","description":"Center the element."},{"name":".text-right","defaultValue":"","description":"Right-align the element."}]},{"header":"Various","description":"These classes change other typography settings.
\n","deprecated":false,"experimental":false,"reference":"Utilities.Typography.Various","referenceNumber":"3.7.4","referenceURI":"utilities-typography-various","weight":4,"colors":[],"markup":"","source":{"filename":"scss/utilities/_typography.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/utilities/_typography.scss","line":151},"depth":3,"modifiers":[],"parameters":[{"name":".italic","defaultValue":"","description":"Italicize the text."},{"name":".uppercase","defaultValue":"","description":"Display the text as all uppercase letters."}]},{"header":"Components","description":"These are components that can be used in your project.
\n","deprecated":false,"experimental":false,"reference":"Components","referenceNumber":"4","referenceURI":"components","weight":4,"colors":[],"markup":"","source":{"filename":"scss/_components.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/_components.scss","line":13},"depth":1,"modifiers":[],"parameters":[]},{"header":"Buttons","description":"This is our base button. It can be generated using a <button type="button"> element, an <input type="button"> element, or a <a class="button" role="button"> element.
Common practice on the web suggests that:
\n<button> elements should be used to trigger a page action, such as hiding/displaying content.<input> elements should be used to trigger <form> actions.<a> elements should be used to trigger a move to a new page or view.The variations below can be combined so that you can have, for example, an XL-sized, right-aligned, primary-colored button with an icon on it.
\nAlways specify a type when using a <button> element and always add role="button" when using an <a> element as a button.
Add a .button-primary class for a button that will be trigger the primary action on a page.
Use the .button-primary-light class if you need a lighter primary button.
Use the .button-primary-dark class if you need a darker primary button.
Add a .button-success class to call attention to a positive action such as saving a search or downloading data.
Use the .button-success-light class if you need a lighter success button.
Add a .button-cancel class for an action that requires caution before being triggered, such as:
Use the .button-cancel-light class if you need a lighter cancel button.
Add a .button-s class for a smaller button.
Add a .button-l class for a larger button.
Add a .button-xl class for an XL button.
Add a .button-xxl class for an XXL button.
Add a .button-full-width class for a button 100% of the width of its container.
Add a .button-centered class for a button that will be centered on its own line.
Add a .button-right class for a button that will be right-aligned on its own line.
You can add icons to <button> and <a> buttons (but not <input> buttons). They can be placed alone, before, after, or even in the middle of the button text.
You will likely need to add margins to the icons for things to look right, which can be done easily in the markup using our spacing classes as shown below.
\n","deprecated":false,"experimental":false,"reference":"Components.Buttons.WithIcons","referenceNumber":"4.1.4","referenceURI":"components-buttons-withicons","weight":4,"colors":[],"markup":"\n\n\n","source":{"filename":"scss/components/_buttons.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/components/_buttons.scss","line":214},"depth":3,"modifiers":[],"parameters":[]},{"header":"Disabled Button","description":"Disable <button> and <input> elements with the boolean disabled attribute and <a> elements with the .disabled class.
Coming soon...
\n","deprecated":false,"experimental":false,"reference":"Components.Forms","referenceNumber":"4.2","referenceURI":"components-forms","weight":0,"colors":[],"markup":"","source":{"filename":"scss/components/_forms.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/components/_forms.scss","line":10},"depth":2,"modifiers":[],"parameters":[]},{"header":"Global","description":"Coming soon...
\n","deprecated":false,"experimental":false,"reference":"Components.Global","referenceNumber":"4.3","referenceURI":"components-global","weight":0,"colors":[],"markup":"","source":{"filename":"scss/components/_global.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/components/_global.scss","line":13},"depth":2,"modifiers":[],"parameters":[]},{"header":"Icons","description":"We have a selection of standard icons that can be used. They can be used in your project several different ways:
\n<ds-icon> Angular component.<svg class="icon"> along with a <use> element.<img class="icon"> element.If you use either of the first two, you’ll be able to style the icon using your own CSS, and by default the icon will be displayed in the active color.
\n","deprecated":false,"experimental":false,"reference":"Components.Icons","referenceNumber":"4.4","referenceURI":"components-icons","weight":0,"colors":[],"markup":"![](\"/assets/icons/check.svg\"){kind=icon}
","source":{"filename":"scss/components/_icons.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/components/_icons.scss","line":10},"depth":2,"modifiers":[],"parameters":[]},{"header":"Available Icons","description":"Following are the currently available icons in the design system. Please send a request to the team if you would like to add new icons.
\n","deprecated":false,"experimental":false,"reference":"Components.Icons.AvailableIcons","referenceNumber":"4.4.1","referenceURI":"components-icons-availableicons","weight":1,"colors":[],"markup":"Icons:\nafrica\nalert\narrow-down-circle\narrow-down\narrow-left-circle\narrow-left\narrow-right-circle\narrow-right\narrow-up-circle\narrow-up\nback-to-start\nback\ncase-open\ncase-closed\ncase-open-aligned\ncase-closed-aligned\nchart-upward\ncheck-circle\ncheck\nchevron-down-circle\nchevron-down\nchevron-left-circle\nchevron-left\nchevron-right-circle\nchevron-right\nchevron-up-circle\nchevron-up\ncircle-open\ncircle\ncopy-to-clipboard\ncopy\ndatabase\ndownload\nedit\nexternal\nfile-csv\nfile-zip\nfolder-open\nfolder-closed\nfolder-open-aligned\nfolder-closed-aligned\nforward-to-end\nforward\nglobe-with-marker\nglobe\ninfo\nlink\nmenu\nminus-circle\nminus\nplus-circle\nplus\nquestion\nsave\nsearch\nsettings\nshaking-hands\nshare\ntable\ntrash\nuser\nx-circle\nx","source":{"filename":"scss/components/_icons.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/components/_icons.scss","line":49},"depth":3,"modifiers":[],"parameters":[]},{"header":"Icon Sizes","description":"By default, icons should be close in size to the text around them. You can use the below classes to make them larger or smaller.
\n","deprecated":false,"experimental":false,"reference":"Components.Icons.Sizes","referenceNumber":"4.4.2","referenceURI":"components-icons-sizes","weight":1,"colors":[],"markup":"","source":{"filename":"scss/components/_icons.scss","path":"/Users/smccaughey/Sites/usitc/ds/projects/ds-assets/src/scss/components/_icons.scss","line":123},"depth":3,"modifiers":[],"parameters":[]},{"header":"Small Icon","description":"Add an .icon-s class for a smaller icon.
Add an .icon-l class for a larger icon.
Add an .icon-xl class for an XL icon.
Add an .icon-xxl class for an XXL icon.
Add an .icon-xxxl class for an XXXL icon.
Add an .icon-xxxxl class for an XXXXL icon.
Add an .icon-centered class for an icon that will be centered on its own line.
Add a .icon-right class for an icon that will be right-aligned on its own line.