← back to the module index

Test: core

breakpoints

XS

SM

MD

LG

XL


font families

au font: The quick brown fox jumps over the lazy dog

monospace: The quick brown fox jumps over the lazy dog


max width

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium at voluptas voluptate, minus accusamus doloremque repellat molestias id, iusto cum adipisci distinctio tempore blanditiis dolor hic vero omnis laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta distinctio fuga adipisci aliquid ut rerum mollitia commodi eligendi, asperiores nostrum unde blanditiis eveniet impedit labore, temporibus exercitationem, provident ab fugit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur est vitae repudiandae sequi illum, odio officiis? Quo nesciunt ipsam recusandae odit, dolores fuga incidunt repudiandae reprehenderit, amet numquam necessitatibus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, labore sapiente natus iste facilis eaque harum fuga recusandae dolores laborum iusto perspiciatis, numquam dignissimos blanditiis alias impedit ipsa. Unde?


border radius


mixin: AU-media


mixin: AU-sronly

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.


mixin: AU-outline

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.


mixin: AU-focus

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt, enim sint. Quibusdam consequatur, quo recusandae quidem amet. Est tempora recusandae cupiditate esse sunt dolore iusto officiis sed ea unde.


mixin: AU-fontgrid

AU-fontgrid( xxxl )
AU-fontgrid( xxl )
AU-fontgrid( xl )
AU-fontgrid( lg )
AU-fontgrid( md )
AU-fontgrid( sm )
AU-fontgrid( xs )


AU-fontgrid( xxxl, heading )
AU-fontgrid( xxl, heading )
AU-fontgrid( xl, heading )
AU-fontgrid( lg, heading )
AU-fontgrid( md, heading )
AU-fontgrid( sm, heading )
AU-fontgrid( xs, heading )


AU-fontgrid( xxxl, nospace )
AU-fontgrid( xxl, nospace )
AU-fontgrid( xl, nospace )
AU-fontgrid( lg, nospace )
AU-fontgrid( md, nospace )
AU-fontgrid( sm, nospace )
AU-fontgrid( xs, nospace )

mixin: AU-space

AU-space( 0.25unit )
AU-space( 0.5unit )
AU-space( 0.75unit )
AU-space( 1unit )
AU-space( 1.5unit )
AU-space( 2unit )

mixin: AU-space without pixel fallback

AU-space( 0.25unit )

function: AU-replace

au-replace('We love spaces for indentation', 'spaces', 'tabs'):

function: AU-svguri


function: AU-factorial

1! = 1:
2! = 2:
3! = 6:
4! = 24:
5! = 120:
6! = 720:

function: AU-pow

53 = 125:
42 = 16:
40.2 = 1.31950791:

function: AU-color-luminance

Luminance of #000000 = 0:
Luminance of #663399 = 0.07492341:
Luminance of #ff69b4 = 0.34658438:
Luminance of #ffffff = 1:

function: AU-color-contrast

#fff on #000 = 21:
#fff on #f00 = 4.0:
#000 on #f00 = 5.3:
#000 on #ff0 = 19.6:
#fff on #ff0 = 1.1:

function: AU-color-a11y

red on blue = #ffa3a3:
green on blue = #00da00:
pink on blue = pink:
blue on blue = #b5b5ff:
#c0c0c0 on #c0c0c0 = #4f4f4f:
#231284 on #cccccc = #231284:
#ffffff on #ffffff = #777:

colours main palette


colour contrast main palette

The contrast of the main colors
Background Action Focus Text Muted Border
Background
Action
Focus
Text
Muted
Border
Background shade
Action
Focus
Text
Muted
Border
Background alt
Action
Focus
Text
Muted
Border
Background alt shade
Action
Focus
Text
Muted
Border

colours dark palette


colour contrast dark palette

The contrast of the dark colors
Background Action Focus Text Muted Border
Background
Action
Focus
Text
Muted
Border
Background shade
Action
Focus
Text
Muted
Border
Background alt
Action
Focus
Text
Muted
Border
Background alt shade
Action
Focus
Text
Muted
Border

colours notification palette