1 #Variables Variables
Definition of all available core variables.
Source:
assets/styles/styleguide.scss, line 1
1.1 #Variables.Base Size Base Size
The base size is used to the define the font-size on the html element.
Subsequent sizes should be defined in rem.
The following variables are available to define the base size for the different breakpoints:
Parameters:
-
$rds--size#{$rds--size} -
$rds--size-sm#{$rds--size-sm} -
$rds--size-md#{$rds--size-md} -
$rds--size-lg#{$rds--size-lg} -
$rds--size-xl#{$rds--size-xl}
Source:
assets/styles/01-core/_variables.scss, line 7
1.2 #Variables.Spacing Spacing
The following variables are available to define spacing:
Parameters:
-
$rds--space-1_4#{$rds--space-1_4} -
$rds--space-1_3#{$rds--space-1_3} -
$rds--space-1_2#{$rds--space-1_2} -
$rds--space-2_3#{$rds--space-2_3} -
$rds--space-3_4#{$rds--space-3_4} -
$rds--space-1#{$rds--space-1} -
$rds--space-4_3#{$rds--space-4_3} -
$rds--space-3_2#{$rds--space-3_2} -
$rds--space-2#{$rds--space-2} -
$rds--space-3#{$rds--space-3} -
$rds--space-4#{$rds--space-4}
Source:
assets/styles/01-core/_variables.scss, line 39
1.3 #Variables.Breakpoints Breakpoints
The following variables define the five breakpoints:
Parameters:
-
$rds--breakpoint-xs#{$rds--breakpoint-xs} -
$rds--breakpoint-sm#{$rds--breakpoint-sm} -
$rds--breakpoint-md#{$rds--breakpoint-md} -
$rds--breakpoint-lg#{$rds--breakpoint-lg} -
$rds--breakpoint-xl#{$rds--breakpoint-xl} -
$rds--breakpoint-desktop#{$rds--breakpoint-desktop}
Source:
assets/styles/01-core/_variables.scss, line 68
1.4 #Variables.Wrapper Wrapper
The following variables define the wrapping of the content:
Parameters:
-
$rds--scroll-wrapper#{$rds--scroll-wrapper}- Whether to scroll in wrapper or not -
$rds--wrap#{$rds--wrap}- Whether to wrap the content or not -
$rds--wrapper-width#{$rds--wrapper-width}- The wrapper max width -
$rds--wrapper-padding#{$rds--wrapper-padding}- Horizontal padding of wrapper -
$rds--wrapper-padding-sm#{$rds--wrapper-padding-sm}- Horizontal padding of wrapper for sm breakpoint -
$rds--wrapper-padding-md#{$rds--wrapper-padding-md}- Horizontal padding of wrapper for md breakpoint -
$rds--wrapper-padding-lg#{$rds--wrapper-padding-lg}- Horizontal padding of wrapper for lg breakpoint -
$rds--wrapper-padding-xl#{$rds--wrapper-padding-xl}- Horizontal padding of wrapper for xl breakpoint
Source:
assets/styles/01-core/_variables.scss, line 102
1.5 #Variables.Grid Grid
The following variables define the grid columns and spacing:
Parameters:
-
$rds--grid-columns#{$rds--grid-columns} -
$rds--grid-gutter-width#{$rds--grid-gutter-width}
Source:
assets/styles/01-core/_variables.scss, line 124
1.6 #Variables.Miscellaneous Miscellaneous
The following additional variables are available:
Parameters:
-
$rds--border-radius#{$rds--border-radius} -
$rds--transition-duration#{$rds--transition-duration} -
$rds--transition#{$rds--transition}
Source:
assets/styles/01-core/_variables.scss, line 141
1.7 #Variables.Colors Colors
The following variables define the available colors:
Parameters:
-
$rds--brand#{$rds--brand} -
$rds--brand-text#{$rds--brand-text} -
$rds--brand-weak#{$rds--brand-weak} -
$rds--brand-weak-text#{$rds--brand-weak-text} -
$rds--brand-strong#{$rds--brand-strong} -
$rds--brand-strong-text#{$rds--brand-strong-text} -
$rds--secondary#{$rds--secondary} -
$rds--secondary-text#{$rds--secondary-text} -
$rds--secondary-weak#{$rds--secondary-weak} -
$rds--secondary-weak-text#{$rds--secondary-weak-text} -
$rds--secondary-strong#{$rds--secondary-strong} -
$rds--secondary-strong-text#{$rds--secondary-strong-text} -
$rds--gray-900#{$rds--gray-900} -
$rds--gray-900-text#{$rds--gray-900-text} -
$rds--gray-800#{$rds--gray-800} -
$rds--gray-800-text#{$rds--gray-800-text} -
$rds--gray-700#{$rds--gray-700} -
$rds--gray-700-text#{$rds--gray-700-text} -
$rds--gray-600#{$rds--gray-600} -
$rds--gray-600-text#{$rds--gray-600-text} -
$rds--gray-500#{$rds--gray-500} -
$rds--gray-500-text#{$rds--gray-500-text} -
$rds--gray-400#{$rds--gray-400} -
$rds--gray-400-text#{$rds--gray-400-text} -
$rds--gray-300#{$rds--gray-300} -
$rds--gray-300-text#{$rds--gray-300-text} -
$rds--gray-200#{$rds--gray-200} -
$rds--gray-200-text#{$rds--gray-200-text} -
$rds--gray-100#{$rds--gray-100} -
$rds--gray-100-text#{$rds--gray-100-text} -
$rds--gray-50#{$rds--gray-50} -
$rds--gray-50-text#{$rds--gray-50-text} -
$rds--gray-0#{$rds--gray-0} -
$rds--gray-0-text#{$rds--gray-0-text} -
$rds--signal-success#{$rds--signal-success} -
$rds--signal-success-text#{$rds--signal-success-text} -
$rds--signal-warning#{$rds--signal-warning} -
$rds--signal-warning-text#{$rds--signal-warning-text} -
$rds--signal-danger#{$rds--signal-danger} -
$rds--signal-danger-text#{$rds--signal-danger-text} -
$rds--signal-info#{$rds--signal-info} -
$rds--signal-info-text#{$rds--signal-info-text} -
$rds--text-dark#{$rds--text-dark} -
$rds--text-light#{$rds--text-light} -
$rds--text-invert#{$rds--text-invert} -
$rds--text-alternative#{$rds--text-alternative}
Source:
assets/styles/01-core/_color.scss, line 83
1.8 #Variables.Typography Typography
The following variables define the typography:
Parameters:
-
$rds--font-family#{$rds--font-family} -
$rds--font-family--secondary#{$rds--font-family--secondary} -
$rds--line-height#{$rds--line-height} -
$rds--body-bg#{$rds--body-bg} -
$rds--font-weight--normal#{$rds--font-weight--normal} -
$rds--font-weight--bold#{$rds--font-weight--bold} -
$rds--font-weight--black#{$rds--font-weight--black}
Source:
assets/styles/01-core/_typography.scss, line 9
1.8.1 #Variables.Typography.Heading 1 Heading 1
The following variables define the heading 1 typography:
Parameters:
-
$rds--heading-1--font-size#{$rds--heading-1--font-size} -
$rds--heading-1--font-size--responsive#{$rds--heading-1--font-size--responsive} -
$rds--heading-1--font-family#{$rds--heading-1--font-family} -
$rds--heading-1--font-weight#{$rds--heading-1--font-weight} -
$rds--heading-1--line-height#{$rds--heading-1--line-height} -
$rds--heading-1--line-height--responsive#{$rds--heading-1--line-height--responsive} -
$rds--heading-1--color#{$rds--heading-1--color} -
$rds--heading-1--margin-top#{$rds--heading-1--margin-top} -
$rds--heading-1--margin-top--responsive#{$rds--heading-1--margin-top--responsive}
Source:
assets/styles/01-core/_typography.scss, line 147
1.8.2 #Variables.Typography.Heading 2 Heading 2
The following variables define the heading 2 typography:
Parameters:
-
$rds--heading-2--font-size#{$rds--heading-2--font-size} -
$rds--heading-2--font-size--responsive#{$rds--heading-2--font-size--responsive} -
$rds--heading-2--font-family#{$rds--heading-2--font-family} -
$rds--heading-2--font-weight#{$rds--heading-2--font-weight} -
$rds--heading-2--line-height#{$rds--heading-2--line-height} -
$rds--heading-2--line-height--responsive#{$rds--heading-2--line-height--responsive} -
$rds--heading-2--color#{$rds--heading-2--color} -
$rds--heading-2--margin-top#{$rds--heading-2--margin-top} -
$rds--heading-2--margin-top--responsive#{$rds--heading-2--margin-top--responsive}
Source:
assets/styles/01-core/_typography.scss, line 179
1.8.3 #Variables.Typography.Heading 3 Heading 3
The following variables define the heading 3 typography:
Parameters:
-
$rds--heading-3--font-size#{$rds--heading-3--font-size} -
$rds--heading-3--font-size--responsive#{$rds--heading-3--font-size--responsive} -
$rds--heading-3--font-family#{$rds--heading-3--font-family} -
$rds--heading-3--font-weight#{$rds--heading-3--font-weight} -
$rds--heading-3--line-height#{$rds--heading-3--line-height} -
$rds--heading-3--line-height--responsive#{$rds--heading-3--line-height--responsive} -
$rds--heading-3--color#{$rds--heading-3--color} -
$rds--heading-3--margin-top#{$rds--heading-3--margin-top} -
$rds--heading-3--margin-top--responsive#{$rds--heading-3--margin-top--responsive}
Source:
assets/styles/01-core/_typography.scss, line 211
1.8.4 #Variables.Typography.Heading 4 Heading 4
The following variables define the heading 4 typography:
Parameters:
-
$rds--heading-4--font-size#{$rds--heading-4--font-size} -
$rds--heading-4--font-size--responsive#{$rds--heading-4--font-size--responsive} -
$rds--heading-4--font-family#{$rds--heading-4--font-family} -
$rds--heading-4--font-weight#{$rds--heading-4--font-weight} -
$rds--heading-4--line-height#{$rds--heading-4--line-height} -
$rds--heading-4--line-height--responsive#{$rds--heading-4--line-height--responsive} -
$rds--heading-4--color#{$rds--heading-4--color} -
$rds--heading-4--margin-top#{$rds--heading-4--margin-top} -
$rds--heading-4--margin-top--responsive#{$rds--heading-4--margin-top--responsive}
Source:
assets/styles/01-core/_typography.scss, line 243
1.8.5 #Variables.Typography.Links Links
The following variables define link colors:
Parameters:
-
$rds--link--color#{$rds--link--color} -
$rds--link--color--hover#{$rds--link--color--hover}
Source:
assets/styles/01-core/_typography.scss, line 264
1.8.6 #Variables.Typography.Text Extra Small Text Extra Small
The following variables define the extra small typography:
Parameters:
-
$rds--text-xsmall--font-size#{$rds--text-xsmall--font-size} -
$rds--text-xsmall--font-size--responsive#{$rds--text-xsmall--font-size--responsive} -
$rds--text-xsmall--font-family#{$rds--text-xsmall--font-family} -
$rds--text-xsmall--font-weight#{$rds--text-xsmall--font-weight} -
$rds--text-xsmall--line-height#{$rds--text-xsmall--line-height} -
$rds--text-xsmall--line-height--responsive#{$rds--text-xsmall--line-height--responsive} -
$rds--text-xsmall--color#{$rds--text-xsmall--color}
Source:
assets/styles/01-core/_typography.scss, line 121
1.8.7 #Variables.Typography.Text Regular Text Regular
The following variables define the regular typography:
Parameters:
-
$rds--text-regular--font-size#{$rds--text-regular--font-size} -
$rds--text-regular--font-size--responsive#{$rds--text-regular--font-size--responsive} -
$rds--text-regular--font-family#{$rds--text-regular--font-family} -
$rds--text-regular--font-weight#{$rds--text-regular--font-weight} -
$rds--text-regular--line-height#{$rds--text-regular--line-height} -
$rds--text-regular--line-height--responsive#{$rds--text-regular--line-height--responsive} -
$rds--text-regular--color#{$rds--text-regular--color} -
$rds--text-regular--margin-top#{$rds--text-regular--margin-top} -
$rds--text-regular--margin-top--responsive#{$rds--text-regular--margin-top--responsive}
Source:
assets/styles/01-core/_typography.scss, line 41
1.8.8 #Variables.Typography.Text Regular Uppercase Text Regular Uppercase
The following variables define the regular uppercase typography:
Parameters:
-
$rds--text-regular-uppercase--font-size#{$rds--text-regular-uppercase--font-size} -
$rds--text-regular-uppercase--font-size--responsive#{$rds--text-regular-uppercase--font-size--responsive} -
$rds--text-regular-uppercase--line-height#{$rds--text-regular-uppercase--line-height} -
$rds--text-regular-uppercase--line-height--responsive#{$rds--text-regular-uppercase--line-height--responsive}
Source:
assets/styles/01-core/_typography.scss, line 68
1.8.9 #Variables.Typography.Text Small Text Small
The following variables define the small typography:
Parameters:
-
$rds--text-small--font-size#{$rds--text-small--font-size} -
$rds--text-small--font-size--responsive#{$rds--text-small--font-size--responsive} -
$rds--text-small--font-family#{$rds--text-small--font-family} -
$rds--text-small--font-weight#{$rds--text-small--font-weight} -
$rds--text-small--line-height#{$rds--text-small--line-height} -
$rds--text-small--line-height--responsive#{$rds--text-small--line-height--responsive} -
$rds--text-small--color#{$rds--text-small--color}
Source:
assets/styles/01-core/_typography.scss, line 93