{"id":4130,"date":"2021-09-08T12:35:13","date_gmt":"2021-09-08T11:35:13","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=4130"},"modified":"2021-09-08T12:37:18","modified_gmt":"2021-09-08T11:37:18","slug":"updated-image-cards-block","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2021\/09\/08\/updated-image-cards-block\/","title":{"rendered":"Updated image cards block"},"content":{"rendered":"

We’ve updated the Image cards block.<\/p>\n

Previously we had two similar blocks (Featured cards with optional background image<\/em> and Image cards<\/em>) which we’ve now consolidated into one and added additional features.<\/p>\n

When you go to add a new card panel now, you’ll only find the Image cards<\/em> block. This block now includes the features from the deprecated Featured cards with optional background image<\/em>.<\/p>\n

You’ll need to swap out your old image cards panel in order to use the new version and add back your content.<\/p>\n

When added to a page, the new Image cards<\/em> panel defaults to the standard card layout of four cards on a white background.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Features<\/h2>\n

The cards are now slightly wider to align with the main page header and other feature panel content.<\/p>\n

You are now able to add a range of background colour options.<\/p>\n

\"\"<\/a><\/p>\n

You can also choose a background image and adjust its darkness to ensure the text has good contrast over the image.<\/p>\n

Cards can be oriented to have text the right of the image if preferred.<\/p>\n

\"\"<\/a><\/p>\n

You can also have cards fill the available space across the page. A background colour or frosted effect can be chosen for the card.<\/p>\n

There are also different heights available for the panel ranging from thin to full screen.<\/p>\n

\"\"<\/a><\/p>\n

Simple, uncluttered background images work best. Finding the right background often requires some trial and error to ensure the background image complements the content.<\/p>\n

The image needs to be dark or light enough to provide strong contrast for any overlaid text.<\/p>\n

There is an option to use dark text if you have a light background. We’ve chosen a few background images on Unsplash<\/a> that may be helpful.<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve updated the Image cards block. Previously we had two similar blocks (Featured cards with optional background image and Image cards) which we’ve now consolidated … Read more<\/a><\/p>\n","protected":false},"author":17235,"featured_media":4132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79486,79485,1],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/4130"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/17235"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=4130"}],"version-history":[{"count":13,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/4130\/revisions"}],"predecessor-version":[{"id":4148,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/4130\/revisions\/4148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/4132"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=4130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=4130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=4130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}