Cards add-on

Create layout boxes with different styles.

Display text with an image optionally styled like a card.

Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Grid options for title alignment

Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Title and Image Link Type

Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Item Link Type

Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Title

Meta
Image ALT
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Title

Meta
Image ALT
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Title

Meta
Image ALT
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT

Left Alignment

Image ALTImage ALT

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.

Right Alignment

Image ALTImage ALT

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Image ALT
Hot

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT
Hot

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALT
Hot

Title

Meta
Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore.
Image ALTImage ALT
Hot

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.
Image ALTImage ALT
Hot

Title

Meta
Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr.

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.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project