Cards

Function: To provide a synopsis or snippet of information on a topic, typically with a button provided to link it to a site or page with more information. Creates a visual appeal that varies the external user’s experience.

Number of options: 27

Note: Content-width cards can be used on pages with sidebars. Because we are showing both content-width and fullwidth cards here, we’ve chosen a template without a sidebar. Content-width cards will fit to the width of the area they are in unless you use the grid shortcode with them for layout (as we’ve done here). Please see the grid shortcode recipe for more information on how to use it.

Step 1: Browse your card options

Skip to Step 2: Copy and paste the shortcode

 

Step 2: Copy and paste the shortcode

After choosing your desired card, copy the shortcode of whichever card you want to use into the WordPress editor where you wish the card to appear.

*Copy all of the code, including the [ ] on either end.

 

[uw_card style="large" align="left" color="gold" title="Add a title!" image="http://cmsdev.uw.edu/cms/docs/wp-content/uploads/sites/32/2022/09/w-day-cupcakes-300x200-1.jpeg"
alt="cupcakes" button="Go now" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation[/uw_card]

 

[uw_card style="large" align="left" color="purple" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg"
alt="cupcakes" title="Purple card" button="read more" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation[/uw_card]

 

[uw_card style="large" align="left" color="white" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" title="White card" button="enter" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation[/uw_card]

 

[uw_card style="half-block-large" align="left" color="gold" title="Add a title!" image="http://cmsdev.uw.edu/cms/docs/wp-content/uploads/sites/32/2022/09/w-day-cupcakes-300x200-1.jpeg"
alt="cupcakes" button="Go now" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation[/uw_card]

 

[uw_card style="half-block-large" align="left" color="purple" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg"
alt="cupcakes" title="Purple card" button="read more" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation[/uw_card]

 

[uw_card style="half-block-large" align="left" color="white" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" title="White card" button="enter" link="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation[/uw_card]

 

[uw_card style="full-width" color="gold" align="left" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#" button="Do your thing!" title="Really full width card"]Something goes here…[/uw_card]

 

[uw_card style="full-width" color="gold" align="right" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#" button="Do your thing!" title="Really full width card"]Something goes here…[/uw_card]

 

[uw_card style="half-block-full" color="gold" align="left" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#" button="Do your thing!" title="Really full width card"]Something goes here…[/uw_card]

 

[uw_card style="half-block-full" color="gold" align="right" image="https://uw-s3-cdn.s3.us-west-2.amazonaws.com/wp-content/uploads/sites/207/2022/11/07105209/w-day-cupcakes-300x200-1.jpeg" alt="cupcakes" link="#" button="Do your thing!" title="Really full width card"]Something goes here…[/uw_card]

 

 

Step 3: Customize your card(s)

There are a ton of options when customizing your card(s). Remember, if you want to put your cards in a row, use the grid shortcode for layout purposes. Go to the grid shortcode for more information on how to use it.

Within each shortcode there are attributes associated with those cards. It is within these attributes that you can adjust and customize the content you wish to present on the card. Below is a list of all the attributes along with what/how you can change for each attribute. Not every style of card supports every attribute.

*Remember, when changing an attribute to keep the quotation marks. For instance, if you are wanting to change the title to Go Huskies, make sure the code appears as follows: title=”Go Huskies”

Attributes:

• style: This dictates the style of card you are using. The currently available options are inset, no-image, image-top, block, text-link, step, large, and full-width
• align: This is how you would move the image to the left or the right of certain cards. Currently only used for large and full-width cards.
• color: This is where you can change the color scheme of the card quickly. Not all cards have all color options. The currently available color options are gold, white, and purple.
• image: Insert the URL of the image you want to be on the card, replacing the current placeholder image of cupcakes.
• alt: This is where you change the alt text for the image you use. Make sure to change this for accessibility purposes.
• icon: Only used with step cards. Check out our web icons page to browse what is available. Use without the period at the beginning. Ex. .ic-check should be ic-check
• title: Title or heading for the card. Required for all cards.
• titletag: Heading tag used for the title. Supported tags are h2, h3, h4
• subtitle: Only used with step cards
• button: This is where you would change the button text
• link: This is where you would change the button link. Simply insert the link to whatever site or page you want the button to take your external user to. *If for some reason you don’t want a button on a card that already contains one, simply delete link=”#” and button=”Add a title!”
• id: IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.
• image_and_title_link: Allows a visitor of the site to click anywhere on the card to follow the link. Options are true and false, with the default as false.

To change the copy on your card, simply replace the current filler text found directly before [/uw_card] with your desired copy.

*Cards are not necessarily meant to contain ALL of the information you are wanting to present to the external user, but a synopsis. The more copy you insert, the bigger and longer the card will get. Be wary of this.

Back to top