accessibility
css
:focus
#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--smallaccessibility
css
:focus
:focus { ... }Description
Global selector to address box-model and default :focus pseudo elements. Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
Check current browser support for :focus-visible on Can I Use.
Example
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";&:focus-visible
:focus { ... }Description
Global selector to address box-model and default :focus pseudo elements. Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
Check current browser support for :focus-visible on Can I Use.
Example
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";&:focus-visible
&:focus-visible { ... }Description
Global setting for the display of focus-visible accessibility interaction. Can I Use.
This is a OPT-IN feature, support is NOT added by default. Users MUST subscribe to Sass import described below.
The focus-visible Sass file MUST be imported BEFORE the essentials Sass file. Sass load order is IMPORTANT. See example below.
Manage $scope option.
Example
Default selector(s)
*:focus-visible {}Selector(s) when $scope: true;
.auro *:focus-visible {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";it's important to import focus-visible BEFORE essentials
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
-@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";animation
mixins
auro_transition
animation
mixinsauro_transition
@mixin auro_transition($property: $ds-animation-default-property, $duration: $ds-animation-default-duration, $timing: $ds-animation-default-timing, $delay: null) { ... }Description
Provides a way to control animation speed when changing CSS properties.
Defaults are set by baseline Design Tokens
Compatibility: css-transitions
Parameters
parameter Name parameter Description parameter Type parameter Default value $propertySpecifies the name of the CSS property the transition effect is for
String$ds-animation-default-property$durationSpecifies how many seconds or milliseconds a transition effect takes to complete
String$ds-animation-default-duration$timingSpecifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out)
String$ds-animation-default-timing$delaySpecifies a delay (in seconds) for the transition effect
StringnullExample
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/animation";Using mixin with default values;
.foo { @include auro_transition; -}
component-support
css:host
component-support
css:host
:host { ... }Description
Component a11y support for
:host
For use with auroElement.js base class and web component developmentExample
Default selector
:host {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
container
css#{$scope}.#{$prefix}container
:host([hiddenVisually]:not(:focus):not(:active)) { ... }Description
Component a11y support for
:hostselector withhiddenVisuallyattribute
For use with auroElement.js base class and web component developmentExample
Default selector
:host([hiddenVisually]:not(:focus):not(:active)) {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";
container
css#{$scope}.#{$prefix}container
#{$scope}.#{$prefix}container { ... }Description
Container class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.container {}Selector(s) when $scope: true;
.auro .container {}Selector(s) when $prefix: true;
.auro_container {}Example HTML selector use
<element class="container"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";#{$scope}.#{$prefix}pagecontainer
#{$scope}.#{$prefix}container { ... }Description
Container class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.container {}Selector(s) when $scope: true;
.auro .container {}Selector(s) when $prefix: true;
.auro_container {}Example HTML selector use
<element class="container"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";#{$scope}.#{$prefix}pagecontainer
#{$scope}.#{$prefix}pagecontainer { ... }Description
Container class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.container {}Selector(s) when $scope: true;
.auro .container {}Selector(s) when $prefix: true;
.auro_container {}Example HTML selector use
<element class="container"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
core
css#{$sym}#{$prefix}#{$scope}blockquote
#{$scope}.#{$prefix}pagecontainer { ... }Description
Container class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.container {}Selector(s) when $scope: true;
.auro .container {}Selector(s) when $prefix: true;
.auro_container {}Example HTML selector use
<element class="container"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
core
css#{$sym}#{$prefix}#{$scope}blockquote
#{$sym}#{$prefix}#{$scope}blockquote { ... }Description
Baseline HTML setting for blockquote element.
Manage
$scopeoption.Example
Default selector(s)
blockquote {}Selector(s) when $scope: true;
.auro blockquote {}Selector(s) when $prefix: true;
.auro_blockquote {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote";#{$sym}#{$prefix}picture#{$scope}
#{$sym}#{$prefix}#{$scope}blockquote { ... }Description
Baseline HTML setting for blockquote element.
Manage
$scopeoption.Example
Default selector(s)
blockquote {}Selector(s) when $scope: true;
.auro blockquote {}Selector(s) when $prefix: true;
.auro_blockquote {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote";#{$sym}#{$prefix}picture#{$scope}
#{$sym}#{$prefix}picture#{$scope} { ... }Description
Baseline HTML setting for picture element.
Manage
$scopeand$prefixoptions.Example
Default selector(s)
picture img {}Selector(s) when $scope: true;
picture.auro img {}Selector(s) when $prefix: true;
.auro_picture img {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture";
essentials
css#{$sym}#{$prefix}html#{$scope}
#{$sym}#{$prefix}picture#{$scope} { ... }Description
Baseline HTML setting for picture element.
Manage
$scopeand$prefixoptions.Example
Default selector(s)
picture img {}Selector(s) when $scope: true;
picture.auro img {}Selector(s) when $prefix: true;
.auro_picture img {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture";
essentials
css#{$sym}#{$prefix}html#{$scope}
#{$sym}#{$prefix}html#{$scope} { ... }Description
Baseline HTML setting to establish box-model and default font size.
Manage
$scopeand$prefixoptions.Example
Default selector(s)
html {}Selector(s) when $scope: true;
html.auro {}Selector(s) when $prefix: true;
.auro_html {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType
DescriptionSet baseline type settings for
bodyelement or with the use of the.baseTypeselector.Manage
$scopeand$prefixoptions.Example
Default selector(s)
body, .baseType {}Selector(s) when $scope: true;
.auro body, .auro .baseType {}Selector(s) when $prefix: true;
.body, -.auro_baseType {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}.#{$prefix}baseParagraph
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}.#{$prefix}baseParagraph
#{$scope}.#{$prefix}baseParagraph { ... }Description
Sets standard
marginfor all paragraph style contentUse of nested
.auro_hyperlinkdefines underline text-decoration for anchor tagsManage
$scopeand$prefixoptions.Example
Default selector(s)
.baseParagraph {} .baseParagraph .hyperlink {}Selector(s) when $scope: true;
.auro .baseParagraph {} .auro .baseParagraph .hyperlink {}Selector(s) when $prefix: true;
.auro_baseParagraph {} -.auro_baseParagraph .auro_hyperlink {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}.#{$prefix}hyperlink
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}.#{$prefix}hyperlink
Selector(s) when $prefix: true;
.auro_hyperlink {} .auro_hyperlink--inline {} -.auro_hyperlink--darktheme {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}#{$sym}#{$prefix}img
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}#{$sym}#{$prefix}img
#{$scope}#{$sym}#{$prefix}img { ... }Description
Default setting for all
<img />tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.Manage
$scopeand$prefixoptions.Example
Default selector(s)
img {}Selector(s) when $scope: true;
.auro img {}Selector(s) when $prefix: true;
.auro_img {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small
DescriptionLegal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.
Manage
$scopeand$prefixoptions.Example
Default selector(s)
small, .type--small {}Selector(s) when $scope: true;
.auro small, .auro .type--small {}Selector(s) when $prefix: true;
.auro_small, -.auro_type--small {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}#{$sym}#{$prefix}p
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}#{$sym}#{$prefix}p
#{$scope}#{$sym}#{$prefix}p { ... }Description
Set
<p>element margin standard. This selector is not set by default, set the$paragraphflag to `true' prior to import.Other options are to use the
<small>element or the.baseParagraphselector.Manage
$scopeand$prefixoptions.Example
Default selector(s)
p {}Selector(s) when $scope: true;
.auro p {}Selector(s) when $prefix: true;
.auro_p {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";import file with
$paragraphflag set to true$paragraph: true; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";#{$scope}.#{$prefix}fineprint
#{$scope}.#{$prefix}fineprint
#{$scope}.#{$prefix}fineprint { ... }Description
Defines the font size and color of fine print text
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.fineprint {}Selector(s) when $scope: true;
.auro .fineprint {}Selector(s) when $prefix: true;
.auro_fineprint {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
grid
mixinsgrid-stickycolumn--md
#{$scope}.#{$prefix}fineprint { ... }Description
Defines the font size and color of fine print text
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.fineprint {}Selector(s) when $scope: true;
.auro .fineprint {}Selector(s) when $prefix: true;
.auro_fineprint {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
grid
mixinsgrid-stickycolumn--md
@mixin grid-stickycolumn--md() { ... }Description
This mixin will set the element to be sticky on tablet and larger devices.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid-stickycolumn--xs
@mixin grid-stickycolumn--md() { ... }Description
This mixin will set the element to be sticky on tablet and larger devices.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid-stickycolumn--xs
@mixin grid-stickycolumn--xs() { ... }Description
This mixin will set the element to be sticky on mobile devices.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid_width
@mixin grid-stickycolumn--xs() { ... }Description
This mixin will set the element to be sticky on mobile devices.
Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid_width
@mixin grid_width($maxWidth: 1232px) { ... }Parameters
parameter Name parameter Description parameter Type parameter Default value $maxWidthSpecifies the max-width value of the grid.
String1232pxExample
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
$maxWidth: vac.$ds-grid-breakpoint-xl !default; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid_margin
grid_margin
@mixin grid_margin() { ... }Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid_padding
@mixin grid_margin() { ... }Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid_padding
@mixin grid_padding() { ... }Parameters
None.
Example
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";import mixin file with altered output values prior to import
$padding: vac.$ds-grid-margin-xs !default; - @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";grid_gutter
grid_gutter
@mixin grid_gutter($gutter: 16px) { ... }Parameters
parameter Name parameter Description parameter Type parameter Default value $gutterSpecifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.
String16pxExample
import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";import mixin file with altered output values prior to import
$gutter: vac.$ds-grid-gutter-xs !default; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
headings
css#{$scope}.#{$prefix}heading
headings
css#{$scope}.#{$prefix}heading
#{$scope}.#{$prefix}heading { ... }Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g.
<h1>,<h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.heading {}Selector(s) when $scope: true;
.auro .heading {}Selector(s) when $prefix: true;
.auro_heading {}Example HTML selector use
<element class="heading"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--display
#{$scope}.#{$prefix}heading { ... }Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g.
<h1>,<h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.heading {}Selector(s) when $scope: true;
.auro .heading {}Selector(s) when $prefix: true;
.auro_heading {}Example HTML selector use
<element class="heading"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--display
#{$scope}.#{$prefix}heading--display { ... }Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g.
<h1>,<h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--display {}Selector(s) when $scope: true;
.auro .heading--display {}Selector(s) when $prefix: true;
.auro_heading--display {}Example HTML selector use
<element class="heading heading--display"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--800
#{$scope}.#{$prefix}heading--display { ... }Description
Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g.
<h1>,<h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--display {}Selector(s) when $scope: true;
.auro .heading--display {}Selector(s) when $prefix: true;
.auro_heading--display {}Example HTML selector use
<element class="heading heading--display"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--800
#{$scope}.#{$prefix}heading--800 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--800 {}Selector(s) when $scope: true;
.auro .heading--800 {}Selector(s) when $prefix: true;
.auro_heading--800 {}Example HTML selector use
<element class="heading heading--800"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--700
#{$scope}.#{$prefix}heading--800 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--800 {}Selector(s) when $scope: true;
.auro .heading--800 {}Selector(s) when $prefix: true;
.auro_heading--800 {}Example HTML selector use
<element class="heading heading--800"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--700
#{$scope}.#{$prefix}heading--700 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--700 {}Selector(s) when $scope: true;
.auro .heading--700 {}Selector(s) when $prefix: true;
.auro_heading--700 {}Example HTML selector use
<element class="heading heading--700"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--600
#{$scope}.#{$prefix}heading--700 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--700 {}Selector(s) when $scope: true;
.auro .heading--700 {}Selector(s) when $prefix: true;
.auro_heading--700 {}Example HTML selector use
<element class="heading heading--700"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--600
#{$scope}.#{$prefix}heading--600 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--600 {}Selector(s) when $scope: true;
.auro .heading--600 {}Selector(s) when $prefix: true;
.auro_heading--600 {}Example HTML selector use
<element class="heading heading--600"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--500
#{$scope}.#{$prefix}heading--600 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--600 {}Selector(s) when $scope: true;
.auro .heading--600 {}Selector(s) when $prefix: true;
.auro_heading--600 {}Example HTML selector use
<element class="heading heading--600"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--500
#{$scope}.#{$prefix}heading--500 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--500 {}Selector(s) when $scope: true;
.auro .heading--500 {}Selector(s) when $prefix: true;
.auro_heading--500 {}Example HTML selector use
<element class="heading heading--500"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--400
#{$scope}.#{$prefix}heading--500 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--500 {}Selector(s) when $scope: true;
.auro .heading--500 {}Selector(s) when $prefix: true;
.auro_heading--500 {}Example HTML selector use
<element class="heading heading--500"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--400
#{$scope}.#{$prefix}heading--400 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--400 {}Selector(s) when $scope: true;
.auro .heading--400 {}Selector(s) when $prefix: true;
.auro_heading--400 {}Example HTML selector use
<element class="heading heading--400"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--300
#{$scope}.#{$prefix}heading--400 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--400 {}Selector(s) when $scope: true;
.auro .heading--400 {}Selector(s) when $prefix: true;
.auro_heading--400 {}Example HTML selector use
<element class="heading heading--400"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";#{$scope}.#{$prefix}heading--300
#{$scope}.#{$prefix}heading--300 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--300 {}Selector(s) when $scope: true;
.auro .heading--300 {}Selector(s) when $prefix: true;
.auro_heading--300 {}Example HTML selector use
<element class="heading heading--300"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
normalize
csshtml#{$scope}
#{$scope}.#{$prefix}heading--300 { ... }Description
Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with
.headingselectorManage
$scopeand$prefixoptions.Example
Default selector(s)
.heading--300 {}Selector(s) when $scope: true;
.auro .heading--300 {}Selector(s) when $prefix: true;
.auro_heading--300 {}Example HTML selector use
<element class="heading heading--300"> ... </element>import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";
normalize
csshtml#{$scope}
html#{$scope} { ... }Description
- Correct the line height in all browsers.
- Prevent adjustments of font size after orientation changes in iOS.
Manage
$scopeoption.Example
Default selector(s)
html {}Selector(s) when $scope: true;
html.auro {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}body
html#{$scope} { ... }Description
- Correct the line height in all browsers.
- Prevent adjustments of font size after orientation changes in iOS.
Manage
$scopeoption.Example
Default selector(s)
html {}Selector(s) when $scope: true;
html.auro {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}body
#{$scope}body { ... }Description
Remove the margin in all browsers.
Manage
$scopeoption.Example
Default selector(s)
body {}Selector(s) when $scope: true;
.auro body {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}main
#{$scope}body { ... }Description
Remove the margin in all browsers.
Manage
$scopeoption.Example
Default selector(s)
body {}Selector(s) when $scope: true;
.auro body {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}main
#{$scope}main { ... }Description
Render the
mainelement consistently in IE.Manage
$scopeoption.Example
Default selector(s)
main {}Selector(s) when $scope: true;
.auro main {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}hr
#{$scope}main { ... }Description
Render the
mainelement consistently in IE.Manage
$scopeoption.Example
Default selector(s)
main {}Selector(s) when $scope: true;
.auro main {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}hr
#{$scope}hr { ... }Description
- Show the overflow in Edge and IE.
- Add the correct box sizing in Firefox.
Manage
$scopeoption.Example
Default selector(s)
hr {}Selector(s) when $scope: true;
.auro hr {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}pre
#{$scope}hr { ... }Description
- Show the overflow in Edge and IE.
- Add the correct box sizing in Firefox.
Manage
$scopeoption.Example
Default selector(s)
hr {}Selector(s) when $scope: true;
.auro hr {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}pre
#{$scope}pre { ... }Description
- Correct the inheritance and scaling of font size in all browsers.
- Correct the odd
emfont sizing in all browsers.Manage
$scopeoption.Example
Default selector(s)
pre {}Selector(s) when $scope: true;
.auro pre {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}a
#{$scope}pre { ... }Description
- Correct the inheritance and scaling of font size in all browsers.
- Correct the odd
emfont sizing in all browsers.Manage
$scopeoption.Example
Default selector(s)
pre {}Selector(s) when $scope: true;
.auro pre {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}a
#{$scope}a { ... }Description
Remove the gray background on active links in IE 10.
Manage
$scopeoption.Example
Default selector(s)
a {}Selector(s) when $scope: true;
.auro a {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}abbr
#{$scope}a { ... }Description
Remove the gray background on active links in IE 10.
Manage
$scopeoption.Example
Default selector(s)
a {}Selector(s) when $scope: true;
.auro a {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}abbr
#{$scope}abbr { ... }Description
- Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- Remove the bottom border in Chrome 57-
Manage
$scopeoption.Example
Default selector(s)
abbr[title] {}Selector(s) when $scope: true;
.auro abbr[title] {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}b, #{$scope}strong
Selector(s) when $scope: true;
.auro b, .auro strong {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}code, #{$scope}kbd, #{$scope}samp
Selector(s) when $scope: true;
.auro code, .auro kbd, .auro samp {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}sub, #{$scope}sup
#{$scope}sub, #{$scope}sup { ... }Description
Prevent
subandsupelements from affecting the line height in all browsers.Manage
$scopeoption.Example
Default selector(s)
sub, sup {}Selector(s) when $scope: true;
.auro sub, -.auro sup {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}sub
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}sub
#{$scope}sub { ... }Description
Prevent
subelement from affecting the line height in all browsers.Manage
$scopeoption.Example
Default selector(s)
sub {}Selector(s) when $scope: true;
.auro sub {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}sup
#{$scope}sub { ... }Description
Prevent
subelement from affecting the line height in all browsers.Manage
$scopeoption.Example
Default selector(s)
sub {}Selector(s) when $scope: true;
.auro sub {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}sup
#{$scope}sup { ... }Description
Prevent
supelement from affecting the line height in all browsers.Manage
$scopeoption.Example
Default selector(s)
sup {}Selector(s) when $scope: true;
.auro sup {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}img
#{$scope}sup { ... }Description
Prevent
supelement from affecting the line height in all browsers.Manage
$scopeoption.Example
Default selector(s)
sup {}Selector(s) when $scope: true;
.auro sup {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}img
#{$scope}img { ... }Description
Remove the border on images inside links in IE 10.
Manage
$scopeoption.Example
Default selector(s)
img {}Selector(s) when $scope: true;
.auro img {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}input
DescriptionExample
Default selector(s)
button, input {}Selector(s) when $scope: true;
.auro button, .auro input {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}select
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
#{$scope}button, #{$scope}[type='button'], #{$scope}[type='reset'], #{$scope}[type='submit']
Selector(s) when $scope: true;
.auro button, .auro [type="button"], .auro [type="reset"], -.auro [type="submit"] {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}fieldset
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}fieldset
#{$scope}fieldset { ... }Description
Correct the padding in Firefox.
Manage
$scopeoption.Example
Default selector(s)
fieldset {}Selector(s) when $scope: true;
.auro fieldset {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}legend
#{$scope}fieldset { ... }Description
Correct the padding in Firefox.
Manage
$scopeoption.Example
Default selector(s)
fieldset {}Selector(s) when $scope: true;
.auro fieldset {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}legend
#{$scope}legend { ... }Description
- Correct the text wrapping in Edge and IE.
- Remove the padding so developers are not caught out when they zero out
fieldsetelements in all browsers.- Correct the color inheritance from
fieldsetelements in IE.Manage
$scopeoption.Example
Default selector(s)
legend {}Selector(s) when $scope: true;
.auro legend {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}progress
#{$scope}legend { ... }Description
- Correct the text wrapping in Edge and IE.
- Remove the padding so developers are not caught out when they zero out
fieldsetelements in all browsers.- Correct the color inheritance from
fieldsetelements in IE.Manage
$scopeoption.Example
Default selector(s)
legend {}Selector(s) when $scope: true;
.auro legend {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}progress
#{$scope}progress { ... }Description
Add the correct vertical alignment in Chrome, Firefox, and Opera.
Manage
$scopeoption.Example
Default selector(s)
progress {}Selector(s) when $scope: true;
.auro progress {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}textarea
#{$scope}progress { ... }Description
Add the correct vertical alignment in Chrome, Firefox, and Opera.
Manage
$scopeoption.Example
Default selector(s)
progress {}Selector(s) when $scope: true;
.auro progress {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}textarea
#{$scope}textarea { ... }Description
Remove the default vertical scrollbar in IE 10+.
Manage
$scopeoption.Example
Default selector(s)
textarea {}Selector(s) when $scope: true;
.auro textarea {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}[type='number']
#{$scope}textarea { ... }Description
Remove the default vertical scrollbar in IE 10+.
Manage
$scopeoption.Example
Default selector(s)
textarea {}Selector(s) when $scope: true;
.auro textarea {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}[type='number']
#{$scope}[type='number'] { ... }Description
Correct the cursor style of increment and decrement buttons in Chrome.
Manage
$scopeoption.Example
Default selector(s)
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {}Selector(s) when $scope: true;
.auro [type="number"]::-webkit-inner-spin-button, -.auro [type="number"]::-webkit-outer-spin-button {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}[type='search']
import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}[type='search']
#{$scope}[type='search'] { ... }Description
- Correct the outline style in Safari.
- Correct the odd appearance in Chrome and Safari.
Manage
$scopeoption.Example
Default selector(s)
[type="search"] {}Selector(s) when $scope: true;
.auro [type="search"] {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}::-webkit-search-decoration
#{$scope}[type='search'] { ... }Description
- Correct the outline style in Safari.
- Correct the odd appearance in Chrome and Safari.
Manage
$scopeoption.Example
Default selector(s)
[type="search"] {}Selector(s) when $scope: true;
.auro [type="search"] {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}::-webkit-search-decoration
#{$scope}::-webkit-search-decoration { ... }Description
Remove the inner padding in Chrome and Safari on macOS.
Manage
$scopeoption.Example
Default selector(s)
[type="search"]::-webkit-search-decoration {}Selector(s) when $scope: true;
.auro [type="search"]::-webkit-search-decoration {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}::-webkit-file-upload-button
#{$scope}::-webkit-search-decoration { ... }Description
Remove the inner padding in Chrome and Safari on macOS.
Manage
$scopeoption.Example
Default selector(s)
[type="search"]::-webkit-search-decoration {}Selector(s) when $scope: true;
.auro [type="search"]::-webkit-search-decoration {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}::-webkit-file-upload-button
#{$scope}::-webkit-file-upload-button { ... }Description
!. Change font properties to
inheritin Safari.
- Correct the inability to style clickable types in iOS and Safari.
Manage
$scopeoption.Example
Default selector(s)
::-webkit-file-upload-button {}Selector(s) when $scope: true;
.auro ::-webkit-file-upload-button {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}details
#{$scope}::-webkit-file-upload-button { ... }Description
!. Change font properties to
inheritin Safari.
- Correct the inability to style clickable types in iOS and Safari.
Manage
$scopeoption.Example
Default selector(s)
::-webkit-file-upload-button {}Selector(s) when $scope: true;
.auro ::-webkit-file-upload-button {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}details
#{$scope}details { ... }Description
Add the correct display in Edge, IE 10+, and Firefox.
Manage
$scopeoption.Example
Default selector(s)
details {}Selector(s) when $scope: true;
.auro details {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}summary
#{$scope}details { ... }Description
Add the correct display in Edge, IE 10+, and Firefox.
Manage
$scopeoption.Example
Default selector(s)
details {}Selector(s) when $scope: true;
.auro details {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}summary
#{$scope}summary { ... }Description
Add the correct display in all browsers.
Manage
$scopeoption.Example
Default selector(s)
summary {}Selector(s) when $scope: true;
.auro summary {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}template
#{$scope}summary { ... }Description
Add the correct display in all browsers.
Manage
$scopeoption.Example
Default selector(s)
summary {}Selector(s) when $scope: true;
.auro summary {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";#{$scope}template
#{$scope}template { ... }Description
Add the correct display in IE 10+.
Manage
$scopeoption.Example
Default selector(s)
template {}Selector(s) when $scope: true;
.auro template {}import file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";
page layouts
css
page layouts
css#{$scope}.#{$prefix}pageLayout-3col
#{$scope}.#{$prefix}pageLayout-2colSideNav { ... }Description
pageLayout-2colSideNav class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.pageLayout-2colSideNav {}Selector(s) when $scope: true;
.auro .pageLayout-2colSideNav {}Selector(s) when $prefix: true;
.auro_pageLayout-2colSideNav {}Example HTML selector use
<element class="pageLayout-2colSideNav"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";#{$scope}.#{$prefix}pageLayout-3col
#{$scope}.#{$prefix}pageLayout-3col { ... }Description
pageLayout-3col class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.pageLayout-3col {}Selector(s) when $scope: true;
.auro .pageLayout-3col {}Selector(s) when $prefix: true;
.auro_pageLayout-3col {}Example HTML selector use
<element class="pageLayout-3col"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
responsive
mixinsauro_breakpoint
#{$scope}.#{$prefix}pageLayout-3col { ... }Description
pageLayout-3col class
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.pageLayout-3col {}Selector(s) when $scope: true;
.auro .pageLayout-3col {}Selector(s) when $prefix: true;
.auro_pageLayout-3col {}Example HTML selector use
<element class="pageLayout-3col"> ... </element>import file;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
responsive
mixinsauro_breakpoint
auro_grid-breakpoint--xl
auro_grid-breakpoint--xl
auro_grid-breakpoint--lg
auro_grid-breakpoint--lg
auro_grid-breakpoint--md
auro_grid-breakpoint--md
auro_grid-breakpoint--sm
auro_grid-breakpoint--sm
auro_grid-breakpoint--xs
auro_grid-breakpoint--xs
scope-prefix
variablesscope
$scope: null !default;Description
Variables to determine if
$scopeis to be displayed.Set
truevalue prior to importing file if scope selector output file is wantedType
BooleanExample
import file
$scope: true; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...return example
.auro [selector] { ... }Used by
- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
auro_layoutPropertiesGenerator- [mixin]
auro_spacing- [mixin]
auro_spacingprefix
$prefix: null !default;Description
Variables to determine if $prefix is to be displayed
Set
truevalue prior to importing file if prefix selector output file is wantedType
BooleanExample
import file
$prefix: true; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...return example
.auro_[selector] { ... }Used by
- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
auro_layoutPropertiesGenerator- [mixin]
auro_spacing- [mixin]
auro_spacing
General
mixinsessentials-base
scope-prefix
variablesscope
$scope: null !default;Description
Variables to determine if
$scopeis to be displayed.Set
truevalue prior to importing file if scope selector output file is wantedType
BooleanExample
import file
$scope: true; +@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...return example
.auro [selector] { ... }Used by
- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
auro_layoutPropertiesGenerator- [mixin]
auro_spacing- [mixin]
auro_spacingprefix
$prefix: null !default;Description
Variables to determine if $prefix is to be displayed
Set
truevalue prior to importing file if prefix selector output file is wantedType
BooleanExample
import file
$prefix: true; +@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...return example
.auro_[selector] { ... }Used by
- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
essentials-base- [mixin]
auro_layoutPropertiesGenerator- [mixin]
auro_spacing- [mixin]
auro_spacing
General
mixinsessentials-base
@mixin essentials-base($theme-props) { ... }Description
Mixin for base essentials
Parameters
parameter Name parameter Description parameter Type parameter Default value $theme-propsTheme map containing property values
Map— none Requires
- [variable]
prefix- [variable]
scope- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix
css#{$sym}#{$prefix}html#{$scope}
@mixin essentials-base($theme-props) { ... }Description
Mixin for base essentials
Parameters
parameter Name parameter Description parameter Type parameter Default value $theme-propsTheme map containing property values
Map— none Requires
- [variable]
prefix- [variable]
scope- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix- [variable]
scope- [variable]
prefix
css#{$sym}#{$prefix}html#{$scope}
#{$sym}#{$prefix}html#{$scope} { ... }Description
Baseline HTML setting to establish box-model and default font size.
#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType
#{$scope}#{$sym}#{$prefix}body, - #{$scope}.#{$prefix}baseType { ... }Description
Set baseline type settings for
bodyelement or with the use of the.baseTypeselector.#{$scope}.#{$prefix}baseParagraph
DescriptionSet baseline type settings for
bodyelement or with the use of the.baseTypeselector.#{$scope}.#{$prefix}baseParagraph
#{$scope}.#{$prefix}baseParagraph { ... }Description
Sets standard
marginfor all paragraph style content#{$scope}.#{$prefix}hyperlink
#{$scope}.#{$prefix}baseParagraph { ... }Description
Sets standard
marginfor all paragraph style content#{$scope}.#{$prefix}hyperlink
#{$scope}.#{$prefix}hyperlink { ... }Description
Baseline hyperlink styles as mirrored in auro-hyperlink web component
#{$scope}#{$sym}#{$prefix}img
#{$scope}.#{$prefix}hyperlink { ... }Description
Baseline hyperlink styles as mirrored in auro-hyperlink web component
#{$scope}#{$sym}#{$prefix}img
#{$scope}#{$sym}#{$prefix}img { ... }Description
Default setting for all
<img />tags
#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small
#{$scope}#{$sym}#{$prefix}small, - #{$scope}.#{$prefix}type--small { ... }Description
Legal copy, disclaimers, and footnotes
#{$scope}#{$sym}#{$prefix}p
DescriptionLegal copy, disclaimers, and footnotes
#{$scope}#{$sym}#{$prefix}p
#{$scope}#{$sym}#{$prefix}p { ... }Description
Paragraph element margin (conditional)
#{$scope}.#{$prefix}fineprint
#{$scope}#{$sym}#{$prefix}p { ... }Description
Paragraph element margin (conditional)
#{$scope}.#{$prefix}fineprint
#{$scope}.#{$prefix}fineprint { ... }Description
Fine print text
utility
functionsauro_capitalize
#{$scope}.#{$prefix}fineprint { ... }Description
Fine print text
utility
functionsauro_capitalize
@function auro_capitalize($string: null) { ... }Description
The purpose of this function is to take a string and capitalize the first letter on output
Parameters
parameter Name parameter Description parameter Type parameter Default value $stringpass in string to be capitolized
StringnullExample
pass string into function
capitalize('foo') => Fooimport dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize";Used by
- [mixin]
auro_spacing- [mixin]
auro_spacing- [mixin]
auro_spacing- [mixin]
auro_spacingauro_contains
@function auro_capitalize($string: null) { ... }Description
The purpose of this function is to take a string and capitalize the first letter on output
Parameters
parameter Name parameter Description parameter Type parameter Default value $stringpass in string to be capitolized
StringnullExample
pass string into function
capitalize('foo') => Fooimport dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize";Used by
- [mixin]
auro_spacing- [mixin]
auro_spacing- [mixin]
auro_spacing- [mixin]
auro_spacingauro_contains
@function auro_contains($list: null, $var) { ... }Description
The purpose of this function is to evaluate if a requested var is in the supplied array
Parameters
parameter Name parameter Description parameter Type parameter Default value $listvariable list to be evaluated
Variablenull$varitem in list
Item— none Example
pass string into function
ods-contains($options, $value)import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains";Used by
- [mixin]
auro_spacingauro_map-deep-get
@function auro_contains($list: null, $var) { ... }Description
The purpose of this function is to evaluate if a requested var is in the supplied array
Parameters
parameter Name parameter Description parameter Type parameter Default value $listvariable list to be evaluated
Variablenull$varitem in list
Item— none Example
pass string into function
ods-contains($options, $value)import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains";Used by
- [mixin]
auro_spacingauro_map-deep-get
import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get";Used by
- [mixin]
auro_spacingLinks
variablesimportant
$important: null !default;Description
The use of the
$importantvariable allows the user to determine if they require the use of the!importantflag with utility classes or not. By default the!importantflag is NOT set on any CSS selector.Map structure
key Name key Description key Type key Value $importantmanage use of
!importantflagBooleannullExample
update value prior to importing utility support file if
!importantflag is needed$important: true; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... ";Used by
- [mixin]
auro_layoutPropertiesGenerator- [mixin]
auro_spacing- [mixin]
auro_spacingds-spacing-options
$ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;Description
When using spacing mixins, it's required to import this variable list for use of options.
Map structure
key Name key Description key Type key Value $optionslist of available token options
VariablelistExample
import dependency variable list
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options";
utility-auro
css#{$scope}.auro_roleButton
import dependency
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get";Used by
- [mixin]
auro_spacingLinks
variablesimportant
$important: null !default;Description
The use of the
$importantvariable allows the user to determine if they require the use of the!importantflag with utility classes or not. By default the!importantflag is NOT set on any CSS selector.Map structure
key Name key Description key Type key Value $importantmanage use of
!importantflagBooleannullExample
update value prior to importing utility support file if
!importantflag is needed$important: true; +@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... ";Used by
- [mixin]
auro_layoutPropertiesGenerator- [mixin]
auro_spacing- [mixin]
auro_spacingds-spacing-options
$ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;Description
When using spacing mixins, it's required to import this variable list for use of options.
Map structure
key Name key Description key Type key Value $optionslist of available token options
VariablelistExample
import dependency variable list
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options";
utility-auro
css#{$scope}.auro_roleButton
#{$scope}.auro_roleButton { ... }Description
.auro_roleButtonis a utility class to support the UI of a standard html hyperlink using the attributerole="button". This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.See for more information
Manage
$scopeoptions.Example
Default selector(s)
.auro_roleButton {}Selector(s) when $scope: true;
.auro .auro_roleButton {}import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton";#{$scope}.auro_roleTab
#{$scope}.auro_roleButton { ... }Description
.auro_roleButtonis a utility class to support the UI of a standard html hyperlink using the attributerole="button". This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.See for more information
Manage
$scopeoptions.Example
Default selector(s)
.auro_roleButton {}Selector(s) when $scope: true;
.auro .auro_roleButton {}import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton";#{$scope}.auro_roleTab
#{$scope}.auro_roleTab { ... }Description
auro_roleTabis a helper class to support the UI of a hyperlink usingrole="tab"Manage
$scopeoptions.Example
Default selector(s)
.auro_roleTab {}Selector(s) when $scope: true;
.auro .auro_roleTab {}import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab";#{$scope}.auro_containedButtons
#{$scope}.auro_roleTab { ... }Description
auro_roleTabis a helper class to support the UI of a hyperlink usingrole="tab"Manage
$scopeoptions.Example
Default selector(s)
.auro_roleTab {}Selector(s) when $scope: true;
.auro .auro_roleTab {}import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab";#{$scope}.auro_containedButtons
#{$scope}.auro_containedButtons { ... }Description
.auro_containedButtonsis a helper class to support the use of multiple buttons and/or the use of ods-hyperlinkrole="button"in a parent container.
.auro_containedButtonshas a dependency on WCSS breakpoints. See example below to import dependency.Manage
$scopeoptions.Place selector on outer parent element.
Example
Default selector(s)
.auro_containedButtons {}Selector(s) when $scope: true;
.auro .auro_containedButtons {}import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons";import dependency file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";#{$scope}.auro_table
#{$scope}.auro_containedButtons { ... }Description
.auro_containedButtonsis a helper class to support the use of multiple buttons and/or the use of ods-hyperlinkrole="button"in a parent container.
.auro_containedButtonshas a dependency on WCSS breakpoints. See example below to import dependency.Manage
$scopeoptions.Place selector on outer parent element.
Example
Default selector(s)
.auro_containedButtons {}Selector(s) when $scope: true;
.auro .auro_containedButtons {}import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons";import dependency file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";#{$scope}.auro_table
#{$scope}.auro_table { ... }Description
CSS selectors for easy reproduction of Auro Table UI.
Defaults are set by baseline Design Tokens
Manage
$scopeoptions.Example
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";#{$scope}.auro_tablist
#{$scope}.auro_table { ... }Description
CSS selectors for easy reproduction of Auro Table UI.
Defaults are set by baseline Design Tokens
Manage
$scopeoptions.Example
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";#{$scope}.auro_tablist
#{$scope}.auro_tablist { ... }Description
.auro_tablistis a helper class to support the UI of a hyperlink usingrole="tab"Place selector on outer
divorsectioncontainer with therole="tablist"also applied.Manage
$scopeoptions.Example
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist";
utility-display
css#{$scope}.#{$prefix}util_displayInline
#{$scope}.auro_tablist { ... }Description
.auro_tablistis a helper class to support the UI of a hyperlink usingrole="tab"Place selector on outer
divorsectioncontainer with therole="tablist"also applied.Manage
$scopeoptions.Example
import selector file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist";
utility-display
css#{$scope}.#{$prefix}util_displayInline
#{$scope}.#{$prefix}util_displayInline { ... }Description
Example
Default selector(s)
.util_displayInline {}Selector(s) when $scope: true;
.auro .util_displayInline {}Selector(s) when $prefix: true;
.auro_util_displayInline {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayInlineBlock
#{$scope}.#{$prefix}util_displayInline { ... }Description
Example
Default selector(s)
.util_displayInline {}Selector(s) when $scope: true;
.auro .util_displayInline {}Selector(s) when $prefix: true;
.auro_util_displayInline {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayInlineBlock
#{$scope}.#{$prefix}util_displayInlineBlock { ... }Description
Utility class to display elements
inline-blockManage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_displayInline {}Selector(s) when $scope: true;
.auro .util_displayInline {}Selector(s) when $prefix: true;
.auro_util_displayInline {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayBlock
#{$scope}.#{$prefix}util_displayInlineBlock { ... }Description
Utility class to display elements
inline-blockManage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_displayInline {}Selector(s) when $scope: true;
.auro .util_displayInline {}Selector(s) when $prefix: true;
.auro_util_displayInline {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayBlock
#{$scope}.#{$prefix}util_displayBlock { ... }Description
Example
Default selector(s)
.util_displayBlock {}Selector(s) when $scope: true;
.auro .util_displayBlock {}Selector(s) when $prefix: true;
.auro_util_displayBlock {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayFlex
#{$scope}.#{$prefix}util_displayBlock { ... }Description
Example
Default selector(s)
.util_displayBlock {}Selector(s) when $scope: true;
.auro .util_displayBlock {}Selector(s) when $prefix: true;
.auro_util_displayBlock {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayFlex
#{$scope}.#{$prefix}util_displayFlex { ... }Description
Example
Default selector(s)
.util_displayFlex {}Selector(s) when $scope: true;
.auro .util_displayFlex {}Selector(s) when $prefix: true;
.auro_util_displayFlex {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayHidden
#{$scope}.#{$prefix}util_displayFlex { ... }Description
Example
Default selector(s)
.util_displayFlex {}Selector(s) when $scope: true;
.auro .util_displayFlex {}Selector(s) when $prefix: true;
.auro_util_displayFlex {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayHidden
#{$scope}.#{$prefix}util_displayHidden { ... }Description
Example
Default selector(s)
.util_displayHidden {}Selector(s) when $scope: true;
.auro .util_displayHidden {}Selector(s) when $prefix: true;
.auro_util_displayHidden {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayHiddenVisually
#{$scope}.#{$prefix}util_displayHidden { ... }Description
Example
Default selector(s)
.util_displayHidden {}Selector(s) when $scope: true;
.auro .util_displayHidden {}Selector(s) when $prefix: true;
.auro_util_displayHidden {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";#{$scope}.#{$prefix}util_displayHiddenVisually
#{$scope}.#{$prefix}util_displayHiddenVisually { ... }Description
Utility class to visually hide elements within the UI, but still be picked up by screen readers.
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_displayHiddenVisually {}Selector(s) when $scope: true;
.auro .util_displayHiddenVisually {}Selector(s) when $prefix: true;
.auro_util_displayHiddenVisually {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
utility-font
css#{$scope}.#{$prefix}util_fontWeightDefault
#{$scope}.#{$prefix}util_displayHiddenVisually { ... }Description
Utility class to visually hide elements within the UI, but still be picked up by screen readers.
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_displayHiddenVisually {}Selector(s) when $scope: true;
.auro .util_displayHiddenVisually {}Selector(s) when $prefix: true;
.auro_util_displayHiddenVisually {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
utility-font
css#{$scope}.#{$prefix}util_fontWeightDefault
#{$scope}.#{$prefix}util_fontWeightDefault { ... }Description
Example
Default selector(s)
.util_fontWeightDefault {}Selector(s) when $scope: true;
.auro .util_fontWeightDefault {}Selector(s) when $prefix: true;
.auro_util_fontWeightDefault {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_fontWeightMedium
#{$scope}.#{$prefix}util_fontWeightDefault { ... }Description
Example
Default selector(s)
.util_fontWeightDefault {}Selector(s) when $scope: true;
.auro .util_fontWeightDefault {}Selector(s) when $prefix: true;
.auro_util_fontWeightDefault {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_fontWeightMedium
#{$scope}.#{$prefix}util_fontWeightMedium { ... }Description
Example
Default selector(s)
.util_fontWeightMedium {}Selector(s) when $scope: true;
.auro .util_fontWeightMedium {}Selector(s) when $prefix: true;
.auro_util_fontWeightMedium {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_fontWeightDisplay
#{$scope}.#{$prefix}util_fontWeightMedium { ... }Description
Example
Default selector(s)
.util_fontWeightMedium {}Selector(s) when $scope: true;
.auro .util_fontWeightMedium {}Selector(s) when $prefix: true;
.auro_util_fontWeightMedium {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_fontWeightDisplay
#{$scope}.#{$prefix}util_fontWeightDisplay { ... }Description
Example
Default selector(s)
.util_fontWeightDisplay {}Selector(s) when $scope: true;
.auro .util_fontWeightDisplay {}Selector(s) when $prefix: true;
.auro_util_fontWeightDisplay {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_body--lg
#{$scope}.#{$prefix}util_fontWeightDisplay { ... }Description
Example
Default selector(s)
.util_fontWeightDisplay {}Selector(s) when $scope: true;
.auro .util_fontWeightDisplay {}Selector(s) when $prefix: true;
.auro_util_fontWeightDisplay {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_body--lg
#{$scope}.#{$prefix}util_body--lg { ... }Description
Example
Default selector(s)
.util_body--lg {}Selector(s) when $scope: true;
.auro .util_body--lg {}Selector(s) when $prefix: true;
.auro_util_body--lg {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_body--sm
#{$scope}.#{$prefix}util_body--lg { ... }Description
Example
Default selector(s)
.util_body--lg {}Selector(s) when $scope: true;
.auro .util_body--lg {}Selector(s) when $prefix: true;
.auro_util_body--lg {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_body--sm
#{$scope}.#{$prefix}util_body--sm { ... }Description
Example
Default selector(s)
.util_body--sm {}Selector(s) when $scope: true;
.auro .util_body--sm {}Selector(s) when $prefix: true;
.auro_util_body--sm {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_body--xs
#{$scope}.#{$prefix}util_body--sm { ... }Description
Example
Default selector(s)
.util_body--sm {}Selector(s) when $scope: true;
.auro .util_body--sm {}Selector(s) when $prefix: true;
.auro_util_body--sm {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";#{$scope}.#{$prefix}util_body--xs
#{$scope}.#{$prefix}util_body--xs { ... }Description
Example
Default selector(s)
.util_body--xs {}Selector(s) when $scope: true;
.auro .util_body--xs {}Selector(s) when $prefix: true;
.auro_util_body--xs {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
utility-inset
css#{$scope}.#{$prefix}util_insetNone
#{$scope}.#{$prefix}util_body--xs { ... }Description
Example
Default selector(s)
.util_body--xs {}Selector(s) when $scope: true;
.auro .util_body--xs {}Selector(s) when $prefix: true;
.auro_util_body--xs {}import Sass file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";
utility-inset
css#{$scope}.#{$prefix}util_insetNone
#{$scope}.#{$prefix}util_insetNone { ... }Description
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_insetNone {}Selector(s) when $scope: true;
.auro .util_insetNone {}Selector(s) when $prefix: true;
.auro_util_insetNone {}#{$scope}.#{$prefix}util_insetXxxs
#{$scope}.#{$prefix}util_insetNone { ... }Description
Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_insetNone {}Selector(s) when $scope: true;
.auro .util_insetNone {}Selector(s) when $prefix: true;
.auro_util_insetNone {}#{$scope}.#{$prefix}util_insetXxxs
#{$scope}.#{$prefix}util_insetXxxs { ... }Description
Manage
!importantflag.Manage
$scopeand$prefixoptions.Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs {}Selector(s) when $scope: true;
.auro .util_insetXxxs {}Selector(s) when $prefix: true;
.auro_util_insetXxxs {}#{$scope}.#{$prefix}util_insetXxxs--stretch
#{$scope}.#{$prefix}util_insetXxxs { ... }Description
Manage
!importantflag.Manage
$scopeand$prefixoptions.Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs {}Selector(s) when $scope: true;
.auro .util_insetXxxs {}Selector(s) when $prefix: true;
.auro_util_insetXxxs {}#{$scope}.#{$prefix}util_insetXxxs--stretch
#{$scope}.#{$prefix}util_insetXxxs--stretch { ... }Description
Manage
!importantflag.Manage
$scopeand$prefixoptions.Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--stretch {}Selector(s) when $scope: true;
.auro .util_insetXxxs--stretch {}Selector(s) when $prefix: true;
.auro_util_insetXxxs--stretch {}#{$scope}.#{$prefix}util_insetXxxs--squish
#{$scope}.#{$prefix}util_insetXxxs--stretch { ... }Description
Manage
!importantflag.Manage
$scopeand$prefixoptions.Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--stretch {}Selector(s) when $scope: true;
.auro .util_insetXxxs--stretch {}Selector(s) when $prefix: true;
.auro_util_insetXxxs--stretch {}#{$scope}.#{$prefix}util_insetXxxs--squish
#{$scope}.#{$prefix}util_insetXxxs--squish { ... }Description
Manage
!importantflag.Manage
$scopeand$prefixoptions.Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--squish {}Selector(s) when $scope: true;
.auro .util_insetXxxs--squish {}Selector(s) when $prefix: true;
.auro_util_insetXxxs--squish {}
utility-layout
css#{$scope}.#{$prefix}util_floatLeft
#{$scope}.#{$prefix}util_insetXxxs--squish { ... }Description
Manage
!importantflag.Manage
$scopeand$prefixoptions.Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
Example
Default selector(s)
.util_insetXxxs--squish {}Selector(s) when $scope: true;
.auro .util_insetXxxs--squish {}Selector(s) when $prefix: true;
.auro_util_insetXxxs--squish {}
utility-layout
css#{$scope}.#{$prefix}util_floatLeft
#{$scope}.#{$prefix}util_floatLeft { ... }Description
Utility class to set elements to float
leftManage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_floatLeft {}Selector(s) when $scope: true;
.auro .util_floatLeft {}Selector(s) when $prefix: true;
.auro_util_floatLeft {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";#{$scope}.#{$prefix}util_floatRight
#{$scope}.#{$prefix}util_floatLeft { ... }Description
Utility class to set elements to float
leftManage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_floatLeft {}Selector(s) when $scope: true;
.auro .util_floatLeft {}Selector(s) when $prefix: true;
.auro_util_floatLeft {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";#{$scope}.#{$prefix}util_floatRight
#{$scope}.#{$prefix}util_floatRight { ... }Description
Utility class to set elements to float
rightManage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_floatRight {}Selector(s) when $scope: true;
.auro .util_floatRight {}Selector(s) when $prefix: true;
.auro_util_floatRight {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";#{$scope}.#{$prefix}util_margin--auto
#{$scope}.#{$prefix}util_floatRight { ... }Description
Utility class to set elements to float
rightManage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_floatRight {}Selector(s) when $scope: true;
.auro .util_floatRight {}Selector(s) when $prefix: true;
.auro_util_floatRight {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";#{$scope}.#{$prefix}util_margin--auto
#{$scope}.#{$prefix}util_margin--auto { ... }Description
Utility class to center content within a block element
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_margin--auto {}Selector(s) when $scope: true;
.auro .util_margin--auto {}Selector(s) when $prefix: true;
.auro_util_margin--auto {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
mixinsauro_layoutPropertiesGenerator
#{$scope}.#{$prefix}util_margin--auto { ... }Description
Utility class to center content within a block element
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_margin--auto {}Selector(s) when $scope: true;
.auro .util_margin--auto {}Selector(s) when $prefix: true;
.auro_util_margin--auto {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";
mixinsauro_layoutPropertiesGenerator
Requiresauro_spacing
Requiresauro_spacing
import with custom over-rides
$ds-spacing-types: inline; $ds-spacing-options: 200; @import "./node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariableMap"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";Throws
INVALID, \
Requires
- [function]
auro_map-deep-get- [function]
auro_contains- [function]
auro_capitalize- [function]
auro_capitalize- [function]
auro_capitalize- [function]
auro_capitalize- [variable]
scope- [variable]
prefix- [variable]
important- [variable]
scope- [variable]
prefix- [variable]
important
utility-list
css#{$scope}.#{$prefix}util_listUnstyled
Throws
INVALID, \
Requires
- [function]
auro_map-deep-get- [function]
auro_contains- [function]
auro_capitalize- [function]
auro_capitalize- [function]
auro_capitalize- [function]
auro_capitalize- [variable]
scope- [variable]
prefix- [variable]
important- [variable]
scope- [variable]
prefix- [variable]
important
utility-list
css#{$scope}.#{$prefix}util_listUnstyled
#{$scope}.#{$prefix}util_listUnstyled { ... }Description
Utility class to display unordered lists without bulleting
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listUnstyled {}Selector(s) when $scope: true;
.auro .util_listUnstyled {}Selector(s) when $prefix: true;
.auro_util_listUnstyled {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listNoIndent
#{$scope}.#{$prefix}util_listUnstyled { ... }Description
Utility class to display unordered lists without bulleting
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listUnstyled {}Selector(s) when $scope: true;
.auro .util_listUnstyled {}Selector(s) when $prefix: true;
.auro_util_listUnstyled {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listNoIndent
#{$scope}.#{$prefix}util_listNoIndent { ... }Description
Utility class to display unordered lists with non-indented bullets
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listNoIndent {}Selector(s) when $scope: true;
.auro .util_listNoIndent {}Selector(s) when $prefix: true;
.auro_util_listNoIndent {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listIndented
#{$scope}.#{$prefix}util_listNoIndent { ... }Description
Utility class to display unordered lists with non-indented bullets
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listNoIndent {}Selector(s) when $scope: true;
.auro .util_listNoIndent {}Selector(s) when $prefix: true;
.auro_util_listNoIndent {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listIndented
#{$scope}.#{$prefix}util_listIndented { ... }Description
Utility class to display unordered lists with non-indented bullets
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listIndented {}Selector(s) when $scope: true;
.auro .util_listIndented {}Selector(s) when $prefix: true;
.auro_util_listIndented {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listNoIndentOrdered
#{$scope}.#{$prefix}util_listIndented { ... }Description
Utility class to display unordered lists with non-indented bullets
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listIndented {}Selector(s) when $scope: true;
.auro .util_listIndented {}Selector(s) when $prefix: true;
.auro_util_listIndented {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listNoIndentOrdered
#{$scope}.#{$prefix}util_listNoIndentOrdered { ... }Description
Utility class to display ordered lists with non-indented numbering
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listNoIndentOrdered {}Selector(s) when $scope: true;
.auro .util_listNoIndentOrdered {}Selector(s) when $prefix: true;
.auro_util_listNoIndentOrdered {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listIndentedOrdered
#{$scope}.#{$prefix}util_listNoIndentOrdered { ... }Description
Utility class to display ordered lists with non-indented numbering
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listNoIndentOrdered {}Selector(s) when $scope: true;
.auro .util_listNoIndentOrdered {}Selector(s) when $prefix: true;
.auro_util_listNoIndentOrdered {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listIndentedOrdered
#{$scope}.#{$prefix}util_listIndentedOrdered { ... }Description
Utility class to display ordered lists with non-indented numbering
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listIndentedOrdered {}Selector(s) when $scope: true;
.auro .util_listIndentedOrdered {}Selector(s) when $prefix: true;
.auro_util_listIndentedOrdered {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listAuroIcon
#{$scope}.#{$prefix}util_listIndentedOrdered { ... }Description
Utility class to display ordered lists with non-indented numbering
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listIndentedOrdered {}Selector(s) when $scope: true;
.auro .util_listIndentedOrdered {}Selector(s) when $prefix: true;
.auro_util_listIndentedOrdered {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";#{$scope}.#{$prefix}util_listAuroIcon
#{$scope}.#{$prefix}util_listAuroIcon { ... }Description
Utility class to display unordered lists with auro icons
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listAuroIcon {}Selector(s) when $scope: true;
.auro .util_listAuroIcon {}Selector(s) when $prefix: true;
.auro_util_listAuroIcon {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
utility-mixins
mixinsauro_anchorButton
#{$scope}.#{$prefix}util_listAuroIcon { ... }Description
Utility class to display unordered lists with auro icons
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
Default selector(s)
.util_listAuroIcon {}Selector(s) when $scope: true;
.auro .util_listAuroIcon {}Selector(s) when $prefix: true;
.auro_util_listAuroIcon {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";
utility-mixins
mixinsauro_anchorButton
Set properties for CSS output that IS within a component
.button { @include auro_anchorButton(css, component) -}Throws
Invalid $style option. Please use
cssorsassInvalid $env option. Please use
componentornoncomponentauro_anchorTab
Throws
Invalid $style option. Please use
cssorsassInvalid $env option. Please use
componentornoncomponentauro_anchorTab
Set properties for CSS output that IS within a component
.hyperlink--tab { @include auro_anchorTab(css, component) -}Throws
Invalid $style option. Please use
cssorsassInvalid $env option. Please use
componentornoncomponent
utility-responsive
css#{$scope}.#{$prefix}util_is-smOnly
Throws
Invalid $style option. Please use
cssorsassInvalid $env option. Please use
componentornoncomponent
utility-responsive
css#{$scope}.#{$prefix}util_is-smOnly
#{$scope}.#{$prefix}util_is-smOnly { ... }Description
Utility class to restrain visibility of UI element to sm users only.
Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-smOnly {}Selector(s) when $scope: true;
.auro .util_is-smOnly {}Selector(s) when $prefix: true;
.auro_util_is-smOnly {}#{$scope}.#{$prefix}util_is-mdOnly
Default selector(s)
.util_is-smOnly {}Selector(s) when $scope: true;
.auro .util_is-smOnly {}Selector(s) when $prefix: true;
.auro_util_is-smOnly {}#{$scope}.#{$prefix}util_is-mdOnly
#{$scope}.#{$prefix}util_is-mdOnly { ... }Description
Utility class to restrain
blockvisibility of UI element between sm and md screens.Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-mdOnly {}Selector(s) when $scope: true;
.auro .util_is-mdOnly {}Selector(s) when $prefix: true;
.auro_util_is-mdOnly {}#{$scope}.#{$prefix}util_is-mdOnly--inline
Default selector(s)
.util_is-mdOnly {}Selector(s) when $scope: true;
.auro .util_is-mdOnly {}Selector(s) when $prefix: true;
.auro_util_is-mdOnly {}#{$scope}.#{$prefix}util_is-mdOnly--inline
#{$scope}.#{$prefix}util_is-mdOnly--inline { ... }Description
Utility class to restrain
inline-blockvisibility of UI element between sm and md screens.Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-mdOnly--inline {}Selector(s) when $scope: true;
.auro .util_is-mdOnly--inline {}Selector(s) when $prefix: true;
.auro_util_is-mdOnly--inline {}#{$scope}.#{$prefix}util_is-mdAppears
Default selector(s)
.util_is-mdOnly--inline {}Selector(s) when $scope: true;
.auro .util_is-mdOnly--inline {}Selector(s) when $prefix: true;
.auro_util_is-mdOnly--inline {}#{$scope}.#{$prefix}util_is-mdAppears
#{$scope}.#{$prefix}util_is-mdAppears { ... }Description
Utility class to restrain
blockvisibility of UI element for md screens.Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-mdAppears {}Selector(s) when $scope: true;
.auro .util_is-mdAppears {}Selector(s) when $prefix: true;
.auro_util_is-mdAppears {}#{$scope}.#{$prefix}util_is-mdAppears--inline
Default selector(s)
.util_is-mdAppears {}Selector(s) when $scope: true;
.auro .util_is-mdAppears {}Selector(s) when $prefix: true;
.auro_util_is-mdAppears {}#{$scope}.#{$prefix}util_is-mdAppears--inline
#{$scope}.#{$prefix}util_is-mdAppears--inline { ... }Description
Utility class to restrain
blockvisibility of UI element for md screens.Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-mdAppears--inline {}Selector(s) when $scope: true;
.auro .util_is-mdAppears--inline {}Selector(s) when $prefix: true;
.auro_util_is-mdAppears--inline {}#{$scope}.#{$prefix}util_is-lgOnly
Default selector(s)
.util_is-mdAppears--inline {}Selector(s) when $scope: true;
.auro .util_is-mdAppears--inline {}Selector(s) when $prefix: true;
.auro_util_is-mdAppears--inline {}#{$scope}.#{$prefix}util_is-lgOnly
#{$scope}.#{$prefix}util_is-lgOnly { ... }Description
Utility class to restrain
blockvisibility of UI element for lg screens.Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-lgOnly {}Selector(s) when $scope: true;
.auro .util_is-lgOnly {}Selector(s) when $prefix: true;
.auro_util_is-lgOnly {}#{$scope}.#{$prefix}util_is-lgOnly--inline
Default selector(s)
.util_is-lgOnly {}Selector(s) when $scope: true;
.auro .util_is-lgOnly {}Selector(s) when $prefix: true;
.auro_util_is-lgOnly {}#{$scope}.#{$prefix}util_is-lgOnly--inline
#{$scope}.#{$prefix}util_is-lgOnly--inline { ... }Description
Utility class to restrain
blockvisibility of UI element for lg screens.Manage
!importantflag.Manage
$scopeand$prefixoptions.Example
import mixin file and selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints"; -@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_is-lgOnly--inline {}Selector(s) when $scope: true;
.auro .util_is-lgOnly--inline {}Selector(s) when $prefix: true;
.auro_util_is-lgOnly--inline {}#{$scope}.#{$prefix}util_img-is-responsive
Default selector(s)
.util_is-lgOnly--inline {}Selector(s) when $scope: true;
.auro .util_is-lgOnly--inline {}Selector(s) when $prefix: true;
.auro_util_is-lgOnly--inline {}#{$scope}.#{$prefix}util_img-is-responsive
#{$scope}.#{$prefix}util_img-is-responsive { ... }Description
Utility class that will allow img src to fill 100% of space for responsive characteristics
See variable use for managing the
!importantflag.Manage
$scopeand$prefixoptions.Example
import selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_img-is-responsive {}Selector(s) when $scope: true;
.auro .util_img-is-responsive {}Selector(s) when $prefix: true;
.auro_util_img-is-responsive {}Example HTML selector use
<img class="util_img-is-responsive" src=" ... " alt="" />
utility-type
css#{$scope}.#{$prefix}util_nowrap
#{$scope}.#{$prefix}util_img-is-responsive { ... }Description
Utility class that will allow img src to fill 100% of space for responsive characteristics
See variable use for managing the
!importantflag.Manage
$scopeand$prefixoptions.Example
import selector partial file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";Default selector(s)
.util_img-is-responsive {}Selector(s) when $scope: true;
.auro .util_img-is-responsive {}Selector(s) when $prefix: true;
.auro_util_img-is-responsive {}Example HTML selector use
<img class="util_img-is-responsive" src=" ... " alt="" />
utility-type
css#{$scope}.#{$prefix}util_nowrap
#{$scope}.#{$prefix}util_nowrap { ... }Description
Example
Default selector(s)
.util_nowrap {}Selector(s) when $scope: true;
.auro .util_nowrap {}Selector(s) when $prefix: true;
.auro_util_nowrap {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";#{$scope}.#{$prefix}util_capitalize
#{$scope}.#{$prefix}util_nowrap { ... }Description
Example
Default selector(s)
.util_nowrap {}Selector(s) when $scope: true;
.auro .util_nowrap {}Selector(s) when $prefix: true;
.auro_util_nowrap {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";#{$scope}.#{$prefix}util_capitalize
#{$scope}.#{$prefix}util_capitalize { ... }Description
Example
Default selector(s)
.util_capitalize {}Selector(s) when $scope: true;
.auro .util_capitalize {}Selector(s) when $prefix: true;
.auro_util_capitalize {}import mixin file
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";
utility-variables
variablescss-ns
$css-ns: "wcss" !default;Description
Global CSS theme custom property namespace
Defines the namespace used for all CSS theme custom properties
Type
StringExample
$css-ns: 'auro'; // Would result in --auro-property-name