Card Widget
This card widget uses the image top template and two image fade modifier.
Image Style
Transparent cards can use any background color you want.
Gradient Style
Transparent cards can use any background color you want.
SiteOrigin Card Widget
The SiteOrigin Card widget is a beautiful way to add interactive sections to your web pages. With options for multiple images and dynamic global styling the Card widget is flexible and versatile. The standard Card contains a title and some content, but the Cards can be enhanced with images, custom background and gradients.
Card Styles
Card are available in 4 styles, transparent, default, primary and secondary. Default, primary and secondary styles take their background color from your global background settings.
Default Style
The default card uses your default global background color.
Primary Style
The primary card style uses your primary global background color.
Secondary Style
The secondary card style uses your secondary global background color.
Transparent Style
Transparent cards can use any background color you want.
Gradient Style
Transparent cards can use any background color you want.
Image Style
Transparent cards can use any background color you want.
Sub Titles
Sub titles can be added to the top of cards by setting the Sub Title Template. The color of the sub title text is taken from your global muted color for both standard and inverse cards.
Default Style
Sub Title
The default card uses your default global background color.
Primary Style
Sub Title
The primary card style uses your primary global background color.
Secondary Style
Sub Title
The secondary card style uses your secondary global background color.
Image Top
Adding an image to the top of the card is handled by the Image Top Template. When setting an image you should also set the appropriate image size.
Default Style
The default card uses your default global background color.
Primary Style
The primary card style uses your primary global background color.
Secondary Style
The secondary card style uses your secondary global background color.
Image Bottom
Adding an image to the bottom of the card is handled by the Image Bottom Template. When setting an image you should also set the appropriate image size. The image bottom template has no inherent link support, as such consider using the Linked Widgets Feature.
Default Style
The default card uses your default global background color.
Primary Style
The primary card style uses your primary global background color.
Secondary Style
The secondary card style uses your secondary global background color.
Image Minimal
The Image Minimal Template is similar to the image top template with the internal card padding removed.
Default Style
The default card uses your default global background color.
Default Style
The default card uses your default global background color.
Default Style
The default card uses your default global background color.
Image Border Radius
The Image Border Radius Modifier is used to round the corners of card images for all templates.
Default Style
The default card uses your default global background color.
Default Style
The default card uses your default global background color.
Default Style
The default card uses your default global background color.
Image Transition
The Image Transition Modifier is used to add hover transitions to all image based card templates. The scale up modifier uses a single image while two image modifiers require an additional image to be set.
Scale Up
The default card uses your default global background color.
Two Image Fade
The primary card uses your primary global background color.
Two Image Scale
The secondary card uses your secondary global background color.