Content cards are a popular feature on many school websites (see an example on our demo site here). The combination of photos and text presented together in a horizontal grid is hard to resist. Visitors are naturally attracted to the images, and once you’ve got their attention, they become focused on the messaging, helping to elongate their time on page. The effectiveness and versatility of these features make content cards a great match for home pages, landing pages, or individual program pages.
Best of all, Blackbaud School Website SystemTM has the built-in functionality that enables schools to create and manage their own content cards. There is some CSS styling required, but—fear not—you don’t have to be a programming wizard to get creative with content cards. In the video above and the blog post below, we’ve broken down a simple step-by-step process for creating content cards. When finished, we’ll have content cards that look like this:
To get started, go into the School website menu, select the website that you want to edit, and then choose Styles.
After creating a new style, click on the drop-down menu above the style preview and select Content Types. Then click on the various content icons to choose the content type that you'd like to style; please note that only Affinity, Announcements, Audio, Downloads, Events, FAQ, Links, List, News, Photo, and Video work with content cards.
Start to edit the style by selecting the Group, either by clicking in the style preview or using the style selector drop-down on the left. The Group is the container for each individual item in that content type such as a news story or an event. Once the Group is selected, open the CSS Advanced tab at the top of the left styling column.
Now add the following into the CSS box to make the individual items appear in a horizontal line:
The CSS declaration “display: inline-block;” makes each individual item display as a box that’s only as wide as the content within it. The CSS declaration “vertical-align: top;” makes all the items align to the top of the row.
A CSS declaration is a single command that tells browsers how to display the selected HTML element. Every CSS declaration is comprised of a property such as “vertical-align,” a colon, a value such as “top”, and a closing semicolon. If the colon or semi-colon are missing, or an invalid property or value is used, the entire declaration will be ignored, and it may also cause subsequent declarations to get ignored. You can find more information on CSS Syntax and Selectors and CSS Properties and their available values at these links.
Now we want to set the width of the Group items to control how many items can appear in a row. We could set the width in pixels and allow as many items that will fit display in the row, or for consistency, we can use percentages to better control the number of items that display. To do this, we calculate the width of the item based on the total available width. So, 25% for four items; 33% for three, and so forth.
In this example, we’re going to set the Group to display four items, so let's add the following to our Advanced CSS box:
If you look at the preview in the image above, you may think, "Wasn't that supposed to display four items in a row?" It was. So what went wrong? The items in the row have natural space between them similar to words in a sentence that wasn't taken into consideration. To keep our items from exceeding the 100% width, we can drop our width setting to 24%, and we now have four items displaying in a row.
But we're not done yet...what will these items look like on a mobile device?
That's obviously not what we want. How do we prevent the items from getting too skinny? By putting a minimum width on the group. Your minimum width may vary based on the content and desired results, but for this example, we’re going to use 215px, which will allow four items to display on the desktop and laptop views of the full 24-grid-line column. So let’s add the following to our Advanced CSS box:
For our next step, we want to increase the amount of space between items to keep them from looking squished together. To even the spacing between all items, the left and right margins should equal the bottom margin. When writing out the margin shorthand declaration in CSS, the order starts with the margin at the top and is set clockwise (top, right, bottom, left), which looks like:
margin: 0 1% 2% 1%;
Before we move on, let’s also adjust our width value to account for the added margin between items (remember, the total width can’t exceed 100%). We had previously entered 24%, so let’s now subtract another 2% to account for the left and right margins:
Are we done? Well, that depends on what you want your content cards to look like. Do you want your content cards to have borders and/or a background-color? If so, we need to add padding to prevent the background/borders from touching on the sides of each item. On the Group, add:
This has added 15px of padding all the way around each content card, and the declaration “box-sizing: border-box;” tells the browser to calculate the width of the item from border edge to border edge. A border can be added on the Basic CSS tab, or by entering CSS such as the following into the Advanced tab:
If we wanted to add a background color, such as the gray shown in the example below (shown without the border), we would use the following CSS:
Altogether, the CSS in the Group's Advanced CSS tab for everything we've covered should appear as:
margin: 0 1% 2% 1%;
You can continue to play with the Basic CSS editor to adjust the styling on the text, headlines, background, etc. For content cards that are all the same height, have text over the photo, or hover effects, these treatments require advanced CSS knowledge. We’d love to help with this, simply ask your account executive for more details.
About the AuthorMore Content by Christine Caprio