You can create modular cards to display posts or events by using the White Coat Modular Card shortcode. There are multiple attributes that can be added to this shortcode to change the way your cards look. You can copy the shortcodes from this page and embed them into a new page on your site to create the modular cards. This shortcode is continuing to be developed, so check back for more attributes and options in the future.

Basic View

The default short code is [wc_cards]
This will create a grid view with 4 cards across. The most recent posts will show at the top of the page.

To specify which category you would like to include in the cards, add the category attribute like this: [wc_cards category="categoryname"]

You can also use tags instead of categories by using [tags="tagname"]

By default the shortcode only shows 4 cards. In order to specify how many cards you want to show on your page, use [count="number"]

Events

If you want to display events rather than posts, use this code. If you do not include a featured image, the card will automatically display the date of the event. [type="event"]

Customize Cards

You can change the way your cards look using short code attributes. You will add these attributes inside the brackets like this: [wc_cards category="categoryname" date_format="relative" title_lines="3"]

Images

If you want to use an image on your card, make sure to set a featured image in the post. The card will show the featured image as the default. If you do not want the image to show use the following attribute:
[image="none"]

To change the size of the image use the following attribute and use one of the dimensions listed. The default is 3×2:
[crop="3x2"|"2x1"|"1x1"|"2x3"]

Date and Time

To add a line that notes when the article was posted use the following attribute:

    • To note how long ago the article was posted (i.e. “4 months ago”) use [date_format="relative"] This is the default setting.

    • To note the date the article was posted (i.e. October 24th, 2019) use [date_format="settings"]

To have no date or time listed, use [date_format="none"]

Title Space

Some post titles are longer than others, so you can chose how many lines of the title can show by using the following attribute:
[title_lines="number"]

The default is to show 3 title lines.

This is helpful if you want to make sure all your cards are the same length.

If you want every card to include the entire title, use [title_lines="all"]

Excerpt Lines

You can also chose how much of the post sows up as a excerpt on the card. To change this use [excerpt_lines="number"] The default is to show 5 lines.

If you want the entire post to show on the card, use [excerpt_lines="all"], but this is not recommended for long posts.

Category Lines

The default is to not show the category a post belongs to, but if you want the cards to display the post category, use [category_lines="all"]

You can also specify how many categories you want to show by using [category_lines="number"]

Tag Lines

The default is to not show the tags a post belongs to, but if you want the cards to display the tags, use [tag_lines="all"]

You can also specify how many tags you want to show by using [tag_lines="number"]

Hover State

The default hover state is to zoom into the photo. To change this to no hover state, use [hover="none"]