Focus Cards Documentation

Focus Cards functionality comes in the form of a Thesis Box that can be added to your Focus-powered WordPress website.

Installation and Settings

After installing and activating the Focus Cards Box, you’ll need to visit the settings page, which you can access two different ways.

First, from the Boxes menu in your Thesis Admin…

And second, from the Focus Cards → Settings item in the WP Admin menu:

Once you’re on the settings page, you can set the basic options for your Focus Cards, and then you’ll be ready to go!

We’ll walk through each option below.

Important! Even if you don’t change any settings, you still need to click the green Save Focus Cards button one time—this will add the necessary CSS to your stylesheet to support Focus Card output.

Card Style

The Focus Cards Box supports 4 basic display styles, and you can see each of these styles in action below:

• Standard: Simple box shadow
• Soft: Larger box shadow for a softening effect
• Subtle: “Barely there” box shadow
• Flat: No box shadow

Card Behavior on Hover

By default, your Cards do not react when a visitor mouses over them.

However, if you’d like to add some kinetics to your presentation, you can select the slightly raised option for an attention-grabbing scaling effect when a visitor interacts with your Cards!

Card Grid Display

You can specify 2, 3, or 4-column grids when you output Card groups, and you can use the following option to determine how Cards behave within your grids:

• Equal heights: Cards in each row display with equal heights
• Natural heights: Cards in each row display with their natural heights

Card Corners and Corner Radius

By default, your Cards will have rounded corners to set them apart from other, more basic display items in Focus.

If you’d like your Cards to have squared-off corners instead, simply select the square option.

Also, you can change the corner radius by selecting a spatial value from Focus that will determine the degree of rounding:

• x6 — smallest
• x5* — default value
• x4 — more rounded
• x3 — very rounded
• x2 — cartoonishly rounded

Interior Card Spacing

This option determines how much whitespace surrounds the text portion of your Cards, which includes the title and the accompanying text that appear beneath the Card image.

To keep spacing proportional with the rest of your design, you must select a spatial value from Focus to determine the amount of whitespace in your Cards:

• x2* — one full unit of whitespace (default)
• x3 — moderate whitespace
• x4 — less whitespace

Card Background Color

Use this option if you want your Cards to have a different background color from the content area of your site.

Depending on your color selection, it may also be necessary to select a Card Text Color to ensure your Cards are easy to read.

Card Text Color

If you want to complement your Card background color or if you simply want to make your Cards stand out from the rest of your design, you can use this option to change the Card text color.

Card Title Font

To add some visual distinction to your Cards, you might wish to present your titles in a different font.

Simply select Font 1, Font 2, or Font 3¹ from the available dropdown, and BOOM—instant font gratification!

Card Title Weight

Your Card titles will display in bold by default, but if you want to use a normal font weight instead, simply select the normal option here.

Displaying Your Cards with Shortcodes

Focus Cards functionality includes two shortcodes you can use to display your Cards:

• [card] — output a single Card
• [card_group] — output multiple Cards (with presentation options)

I’ll show you how to use each of these shortcodes in the following video. Beneath the video, you’ll find additional details about the parameters you can use to refine your Card output.

Use the built-in shortcodes to create the perfect presentation!

Card Shortcode

The basic Card shortcode accepts 3 parameters you can use to affect the resulting output:

• id — (required) the ID of the Card you wish to display
• class — (optional) add an HTML class to the Card output
• depth — (optional) for OCD HTML source indentation

Note: Whenever you use the [card] shortcode, you’ll need to include an id parameter, or else nothing will display!

The other two parameters are optional, though you may find the class parameter useful if you want to apply special CSS styles to a Card in a specific context (like on your home page, for example).

Here’s what that might look like:

[card id="1234" class="card-big"]

This shortcode will output the Card with an ID of 1234, and the resulting HTML will include the card-big class on the Card container.

Card Group Shortcode

The Card Group shortcode is the easiest way to output multiple Cards in a grid. You can use the following 7 parameters to create the presentation you want:

• group — (optional) a group slug name; all Cards in the specified group will be displayed
• ids — (optional) a comma-separated list of Card IDs to display in the specified order
• grid — (optional, only 2-4 are allowed) the number of columns in your grid
• class — (optional) add an HTML class to the group container
• card_class — (optional) add an HTML class to each individual Card
• constrain — (optional) set to 1 while using a grid to confine output to the content column
• depth — (optional) OCD HTML source indentation

Pro tip: While all parameters are optional, the [card_group] shortcode will only produce output if you include either the group or ids parameter.

Card Group Shortcode Examples

// Display all Cards from the 'products' group
[card_group group="products"]

// Display all 'products' in a 3-column grid
[card_group group="products" grid=3]

// Display Card 1234 followed by Card 5678
[card_group ids="1234,5678"]

// Display Card 1234 followed by Card 5678 in a 2-column grid that’s confined to the content column
[card_group ids="1234,5678" grid=2 constrain=1]