Info Cards

The Info Cards shortcode for WordPress can be used to display CSS styled cards with various info on them like services / products, reviews and testimonials and any other info, with a beautiful style inside content, in posts or pages. Check below for example implementations and shortcode documentation:

Info Cards Examples

Card Title

Card content here

Info Cards Shortcodes

Info Cards Shortcode
[x3m-card width="300px" img="https://x3mmedia.com/wp-content/uploads/highlight.jpg" imgratio="16:9" align="top" border="1px" bordercolor="grey" radius="20px" url="https://x3mmedia.com/wordpress-plugins/x3m-shortcodes/"]<strong>Card Title</strong>

Card content here
[/x3m-card]
The shortcode can be used to display info cards in content which can include images and content, as well as set a link over the entire card. Cards can be used for service/product listings, testimonials, personal reviews, team listing and more. Above example displays a card with image and hyperlink over the entire card.

Info Cards Documentation

Here are the shortcode option settings available for Info Cards:

Shortcode Settings Details
width=”300px”

optional

 This is used to set the card container width, in pixels (ex “300px”) or percentage (ex “100%”).
height=”300px”

optional

 This is used to set the card container height, in pixels (ex “300px”) or percentage (ex “100%”).
img=”img link”

optional

 This is used to set the link image tp be displayed for the info card. If the settings is not used, it will not display any image inside the card. Also, if image is not set, you should also not set imgratio or align values.
imgratio=”16:9″ This is used to define the cropping aspect ratio: 16:9, 1:1 etc.
align=”top” This is used to set the image alignment in the card. Possible options: “top”, “left”, “right”, “bottom”.
border=”1px” This is used to set the info card border width, in pixels. Border “0px” also accepted.
bordercolor=”grey” This is used to set the color of the border and hover-shadow effect.

Color names or HEX color codes can be used to set the desired color.
backgroundcolor=”yellow” This is used to set the info card background color.

Color names or HEX color codes can be used to set the desired color.
radius=”20px” This is used to set corners’ radius of the info card container, making them rounder or sharper.
url=”link here” This is used to set the link for the info card.
target=”_blank” This is used to define the target of the card link. Accepted options: _blank (in new window), _self (same window).