Shadows

The shadow utility applies a shadow to a tag element. Elements with a shadow may appear to pop off the page. The material design set of components, used on Android and for Google applications, commonly uses shadowing. Although "none" is an allowed size, most elements do not have a shadow by default.

shadow(tag, size = "regular")

Arguments

tag	A tag element.
size	One of "none", "small", "regular", or "large" specifying the amount of shadow added, defaults to "regular".

See also

Other design utilities: active(), affix(), background(), border(), display(), float(), font(), height(), padding(), scroll(), width()

Examples

### Styling a navbar

div(
  navbar(brand = "Navbar") %>%
    background("cyan") %>%
    shadow("small") %>%
    margin(bottom = 3),
  p(
    "Cras mattis consectetur purus sit amet fermentum. Donec sed ",
    "odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing ",
    "elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam ",
    "venenatis vestibulum."
  )
)
#> <div>
#>   <nav class="navbar navbar-expand navbar-light bg-cyan shadow-sm mb-3">
#>     <a class="navbar-brand" href="#">Navbar</a>
#>     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content-833-537" aria-controls="nav-content-833-537" aria-expanded="false" aria-label="Toggle navigation">
#>       <span class="navbar-toggler-icon"></span>
#>     </button>
#>     <div class="collapse navbar-collapse" id="nav-content-833-537"></div>
#>   </nav>
#>   <p>
#>     Cras mattis consectetur purus sit amet fermentum. Donec sed 
#>     odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing 
#>     elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam 
#>     venenatis vestibulum.
#>   </p>
#> </div>

### Different shadows

div(
  lapply(
    c("small", "regular", "large"),
    shadow,
    tag = div() %>%
      padding(5) %>%
      margin(2)
  )
) %>%
  display("flex")
#> <div class="d-flex">
#>   <div class="p-5 m-2 shadow-sm"></div>
#>   <div class="p-5 m-2 shadow"></div>
#>   <div class="p-5 m-2 shadow-lg"></div>
#> </div>