Display text with an image optionally styled like a card.
Grid options for title alignment
Title and Image Link Type
Item Link Type
Hot
Hot
Content Fields
Here is a list of common content fields for Card add-on.
| Setting | Description |
|---|---|
| TItle | Heading to define a card title. |
| Meta | A text field used for meta text like the author or publication date. |
| Content | A text field for the main text blocks. |
| Image | An image field with an image picker. |
| Use Custom Link | Enable button text with different styles |
| Button text | A text field used for button text. |
| Button Link | Enter or pick a link, an image or a video file. |
| Link opens | Choose whether or not your link opens in a new window. |
Card Settings
Card settings, The Card Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| Style | Select on of the boxed card styles or a blank card. |
| Size | Define the card's size by selecting the padding between the card and its content. |
| Hover | Select this option to add box shadow on hover. |
Image Settings
Image settings, The Image Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| Alignment | Align the image to the top,left,right or place it between the title and the content |
| Align image without padding | Top, left or right aligned images can be attached to the card's edge. If image is aligned to the left or right, it will also exten to cover the whole space |
| Image Border | Select the image's border style. |
| Box Shadow | Select the image's box shadow size. |
| Hover Box Shadow | Select the image's box shadow size on hover. |
| Blend Background Color | Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section. |
| Image Blend modes | Apply different blend modes to your backgrounds, for example when placing them on images. |
Content Settings
Content settings, The Content Settings contains all the specific settings for an add-on. Here is a short overview.
| Setting | Description |
|---|---|
| Heading Decoration | Decorate the heading with a divider, bullet or a line that is vertically centered to the heading |
| Title Color | Select the text color. If the background options is selected, styles that don't apply a background image use the primary color instead. |
| Meta Style | Select a predefined meta text style, including color, size and font-family. |
| Meta Margin | Set the margin between title and meta text. |
| Link Button Style | Set the button style. |
| Button Size | Set the button size. |
| Label | To position a badge inside a card. |
| Label Style | Indicate important notes and highlight parts of your content. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |