Shadows

Add depth and realism to designs by directing attention to specific sections or experiences.

Shadows can be used to add depth and provide a light source to interfaces, making them engaging and overall more realistic. SDS Core contains three base shadow styles to allow for a variety of depth and dimension in projects.

Shadow Name	Shadow Properties
0	box-shadow: none
sm	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
md	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04), 0px 12px 16px -2px rgba(0, 0, 0, 0.12);
lg	box-shadow: 0px 24px 48px 0px rgba(0, 0, 0, 0.24)

---

Applying Shadows

Applying shadows is fairly straightforward in both design and development.

Design: Figma Library

Shadows are available in the SDS Core Figma library as Effect styles. Simply select the layer/group etc and apply as needed.

Development: SCSS Shadow Mixin

To streamline adding shadow styles for developers, Sipster provides a custom mixin: @include sds-shadow().

This mixin accepts a $value (shadow name) and returns the preformatted properties for each shadow variant listed above.

@include sds-shadow($value);

Because this is a custom mixin, it needs to be implemented at the same level as other properties for a CSS selector using @include.

Example:

.sds_Card {
  @include sds-shadow(sm);
}

.sds_Tooltip {
  @include sds-typeset(md);
}

.sds_Alert {
  @include sds-typeset(lg);
}

Compiled CSS:

.sds_Card {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
}

.sds_Tooltip {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04), 0px 12px 16px -2px rgba(0, 0, 0, 0.12);
}

.sds_Alert {
  box-shadow: 0px 24px 48px 0px rgba(0, 0, 0, 0.24)
}