The Shadow Card component creates a shadowed card that you can use as a background for a displaying text or graphics. Its a HTML text input using the HTML shadow box parameters. The shadow card contains a Shadow Table I have populated that has the height, offset and opacity values based on the height off the screen in card thickness that you want your shadow. The values are based on Google Design's shadow recommendations.
The component inputs are:
ShadowTable: I would not change this as I have included a table extrapolated from Google Design for the necessary shadow values.
Shadow Height: Choose 0, 0.5 or an integer from 1-24. Generally I use 1-8.
RoundedCornerRadius: For a square card choose 0, I typically use 15.
HeightMargin: The height needs to be high enough to accommodate the shadow height, so you may need to increase the margin if you see scroll bars.
WidthMargin: The width needs to be wide enough to accommodate the shadow height, so you may need to increase the margin if you see scroll bars
Margin: You need some margin to ensure that you can see the shadow
BackgroundColorHexNo: the card is set to #ffffff which is White. You need to include the # with the 6 digit color number.
CardTitle: If you leave it blank you can have a blank card.
CardTitleFontSize: The font size for the card title.
TitleColorNo: The hex no for the title color. I have set it to black #000
I have shown a few samples below. The first uses a ShadowHeight of 1 and the rest indicate the ShadowHeight values used.
Enjoy,
CYoung
