type

You can adjust the look and feel of the type by adjusting the type scss variables.

h1 - Heading 1

h2 - Heading 2

h2 - Heading 2 with .rwxt-light class modifier

h3 - Heading 3

h3 - Heading 3 with .rwxt-underline modifier

h4 - Heading 4

h5 - Heading 5
h6 - Heading 6

p - This is a paragraph. Lorem ipsum dolor sit amet, mei appareat qualisque repudiandae ne, esse putent accommodare vix no. Ad consul saperet vim. Diam nihil suscipiantur id eum, ius labore legimus cu, ex per ubique scribentur. Ne vix modo alienum, pri ad dolorum mediocrem conclusionemque. Vel accumsan officiis tincidunt ex, ad modus ceteros quaerendum sea.

p strong - This is bold paragraph. Lorem ipsum dolor sit amet, mei appareat qualisque repudiandae ne, esse putent accommodare vix no. Ad consul saperet vim. Diam nihil suscipiantur id eum, ius labore legimus cu, ex per ubique scribentur. Ne vix modo alienum, pri ad dolorum mediocrem conclusionemque. Vel accumsan officiis tincidunt ex, ad modus ceteros quaerendum sea.

p.small - This is small paragraph. Lorem ipsum dolor sit amet, mei appareat qualisque repudiandae ne, esse putent accommodare vix no. Ad consul saperet vim. Diam nihil suscipiantur id eum, ius labore legimus cu, ex per ubique scribentur. Ne vix modo alienum, pri ad dolorum mediocrem conclusionemque. Vel accumsan officiis tincidunt ex, ad modus ceteros quaerendum sea.

p sup - This is a paragraph with a sup in it.

p a - This paragraph has a link in it.

p a - This paragraph has a big long link name in it.

p a - This paragraph has a link with modifer class .inverted.

To change the color of a link, you will need to use the change-link-color mixin.

  • ul li - List Item 1 with some really long text to demonstrate that when a list item goes onto an additional line, the text stays inline with the first sentence.
  • ul li - List Item 2
  • ul li - List Item 3
  • ul li - List Item 4
  • ul li - This ul has the .numbered class modifier added.
  • ul li - List item 2
  • ul li - List item 3
  • ul.no-decoration li - This ul element has the .no-decoration class modifier added.
  • ul.no-decoration li - This modifier removes the dash and padding before list items
  • ul.inline li - This ul element has the .inline class modifier added.
  • ul.inline li - This modifier
  • ul.inline li - makes all
  • ul.inline li - list items
  • ul.inline li - display inline
  • ul.inline li - Instead of
  • ul.inline li - each one wrapping
  • ul.inline li - onto a new line

section - This is a section

section section - This is a sub section

section section section - This is a sub sub section

section.sub-section.no-indent
section.sub-sub-section.no-indent
section.no-bar

Cards

p.help - turns a p tag into a help card. You can use any rwxc-background-{color} to change the background.

p.note - turns a p tag into a note card. You can use any rwxc-background-{color} to change the background.

p.warning - turns a p tag into a warning card. You can use any rwxc-background-{color} to change the background.

p.hint - turns a p tag into a hint card. You can use any rwxc-background-{color} to change the background.

p.feature - turns a p tag into a feature card. You can use any rwxc-background-{color} to change the background.

Icons

You can switch off icons if you dont need them to reduce compiled file size.

You can use any color modifier, fill modifier and size modifier to achieve the style you want. .--{color} .--{color}--fill, .--{size}.

<i class="rwxi-{iconname} --{size} --{color} --{color}-fill"></i>

Size modifier classes include; (providing the $allowSizedIcons icon scss variables is set to true).

  • --xs
  • --sm
  • --lg
  • --xl

Color and fill modifier classes include; (providing the $allowColoredIcons icon scss variables is set to true).

  • black
  • grey
  • dark-grey
  • white
  • orange
  • red
  • blue
  • light-blue
  • turquoise
  • green
  • light-green
  • yellow
  • purple
  • pink
  • brown

You can manually give the icon a specific width and height and becuase it uses scalable vector graphics, it will scale to the size you specify.

i.rwxi-tick.--xs.--light-green-fill

i.rwxi-tick.--sm

i.rwxi-tick.--light-green

i.rwxi-tick.--lg

i.rwxi-tick.--xl.--light-green-fill

i.rwxi-copy.--xs.--orange-fill

i.rwxi-copy.--sm

i.rwxi-copy.--orange

i.rwxi-copy.--lg

i.rwxi-copy.--xl.--orange-fill

i.rwxi-select-list.--xs.--green-fill

i.rwxi-select-list.--sm

i.rwxi-select-list.--green

i.rwxi-select-list.--lg

i.rwxi-select-list.--xl.--green-fill

i.rwxi-help.--xs.--blue-fill

i.rwxi-help.--sm

i.rwxi-help.--blue

i.rwxi-help.--lg

i.rwxi-help.--xl.--blue-fill

i.rwxi-note.--xs.--light-blue-fill

i.rwxi-note.--sm

i.rwxi-note.--light-blue

i.rwxi-note.--lg

i.rwxi-note.--xl.--light-blue-fill

i.rwxi-warning.--xs.--red-fill

i.rwxi-warning.--sm

i.rwxi-warning.--red

i.rwxi-warning.--lg

i.rwxi-warning.--xl.--red-fill

i.rwxi-hint.--xs.--yellow-fill

i.rwxi-hint.--sm

i.rwxi-hint.--yellow

i.rwxi-hint.--lg

i.rwxi-hint.--xl.--yellow-fill

i.rwxi-feature.--xs.--brown-fill

i.rwxi-feature.--sm

i.rwxi-feature.--brown

i.rwxi-feature.--lg

i.rwxi-feature.--xl.--brown-fill

i.rwxi-rchev.--xs.--pink-fill

i.rwxi-rchev.--sm

i.rwxi-rchev.--pink

i.rwxi-rchev.--lg

i.rwxi-rchev.--xl.--pink-fill

i.rwxi-lchev.--xs.--purple-fill

i.rwxi-lchev.--sm

i.rwxi-lchev.--purple

i.rwxi-lchev.--lg

i.rwxi-lchev.--xl.--purple-fill

i.rwxi-uchev.--xs.--turquoise-fill

i.rwxi-uchev.--sm

i.rwxi-uchev.--turquoise

i.rwxi-uchev.--lg

i.rwxi-uchev.--xl.--turquoise-fill

i.rwxi-dchev.--xs.--dark-grey-fill

i.rwxi-dchev.--sm

i.rwxi-dchev.--dark-grey

i.rwxi-dchev.--lg

i.rwxi-dchev.--xl.--dark-grey-fill