Card Background
Design → Card → Card Background sets what sits behind your name and links. Panel offers Match layout, None, Subtle, Glass, Solid and Image, and all of them are free.
- Match layout: whatever the layout above asks for. It is the default
- None: no panel at all, your content straight on your background, with small shades so it stays readable
- Subtle: the lightest panel that keeps your text readable, with a soft blur, your background still showing through
- Glass: a heavier frost, darker and more blurred, so your content sits forward of the background
- Solid: a color of your own, with an Opacity for the card itself from 0 to 100%. Opacity at 0 is the same as None
- Image: your own picture inside the card, with Picture opacity and a crop. PNG, JPG or JPEG, up to 15MB
Card Shape needs a card to shape, so it does nothing while the panel is None.
Card Border
Card Border draws a line around the card, free, and can animate it:
- Colors: Add a border starts it, and Add color adds more, up to four
- Effect: None, Flow, Comet, Sweep or Pulse
- Thickness, 0 to 8 pixels
- Speed, in seconds per cycle: lower is faster, and 0 holds it still
- Glow, 0 to 100%, lighting the border only
One color draws a plain ring; add a second to unlock the effects. The border is hidden while the panel is None, and your colors are kept for when you bring a panel back.
Entrance Animation
How the card arrives when your page opens: Fade, rise, pop, unfold, drift, drop, swing, blinds or zoom, or None for a card that is simply there. The dashboard describes each one as you pick it.
Visitors who have asked their device for reduced motion see the border still and the card already in place. That is their setting, and it wins.