topic Re: Add drop shadow-box to card? in ArcGIS Hub Questions

Add drop shadow-box to card?

DavidBooth — Wed, 01 Jul 2020 11:57:43 GMT

The example below is from Calcite Bootstrap . I'd like to add a drop shadow-box to cards like this on my site. Can anyone please paste the line of code that would allow me to place a drop shadow around each or all of these cards? Thanks!

Re: Add drop shadow-box to card?

Anonymous User — Thu, 02 Jul 2020 12:47:33 GMT

Apply your own class name to your card ( `<div class="myclass">...</div>`)

Then apply `box-shadow` CSS to that class like

```

.myclass {

box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 0 16px 0 rgba(0,0,0,.05);

}

```

You can use a browser inspect mode to adjust the amount of shadow visually. Chrome and "new edge" have a nice tool for this

Similarly, if you see things you like the best tool at your disposal is the browser's HTML / CSS inspector!

Re: Add drop shadow-box to card?

wcozzens — Mon, 06 Jul 2020 19:34:55 GMT

Thanks Graham, that got me started. I found that adding your code above worked in the preview, but did not "stick" when viewing the actual page. Must be something with the embedded CSS code over-riding the style settings?

Anyways, I did get it to work by simply adding <div style="box-shadow: 5px 5px 20px gray;">...</div> to the card html.

Example:

....

</div>