Theme:
SCSS TypeScript

Shadow

Applies a drop shadow effect to an element.

The structure of the class names are:

  • .shadow-{DIRECTION}-{SIZE}
  • .shadow-{DIRECTION}-{SIZE}-{SCREEN_SIZE} until the screen size
  • .shadow-blur-{SIZE}
  • .shadow-blur-{SIZE}-{SCREEN_SIZE} until the screen size
  • .shadow-color-{CLASS}
  • .shadow-color-{CLASS}-{SCREEN_SIZE} until the screen size

The values are:

  • DIRECTION top, right, bottom, left
  • SIZE small, medium, large
  • CLASS primary, secondary, success, danger, warning, info, light, dark, white, black
  • SCREEN_SIZE lg, md, sm, xs

Basic Example:

.shadow-top-{DIRECTION}

.shadow-right-{DIRECTION}

.shadow-bottom-{DIRECTION}

.shadow-left-{DIRECTION}

.shadow-blur-{SIZE}

.shadow-color-{COLOR}

Fancy

html