Box Shadow

Apply Skyline's box shadow to an element in your HTML

• How to
  • HTML Example:
• HTML
  • u-box-shadow--100
  • u-box-shadow--200
• SCSS
  • SCSS Example:

How to

To use these styles in a Vue component SCSS, you'll need:

@import '~@skyline/scss/src/core/UI.required';
@import '~@skyline/scss/src/utilities/utilities.box-shadow';

HTML Example:

<div class="u-box-shadow--100">Example of box shadow</div>

HTML

u-box-shadow--100

u-box-shadow--200

SCSS

SCSS Example:

@import '~@skyline/scss/src/core/UI.required';
.element-to-apply-box-shadow-100-to {
  box-shadow: skyline-get-box-shadow($variant: 100);
}

.element-to-apply-box-shadow-200-to {
  box-shadow: skyline-get-box-shadow($variant: 200);
}

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

skyline-get-box-shadow($variant);

Parameters

$variant: <Number>

Default value:100