Brine: Show one Summary Block tag

Squarespace Summary Blocks are great for displaying blog posts, but if you’ve added a series of tags to a post, they can look a bit of a mess, because they’ll all be shown.

Here’s a snippet that I’ve written to show just the first tag. It is also useful to hide the commas between tags. You can install it by pasting the code below into Design > Custom CSS:

/* Summary Blocks: Show only the first tag */
/* Copyright Soundfocus Digital Media      */
/* Use freely as CSS. Do not republish     */

/* Hide the comma separators between the tags */
.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--tags {
font-size: 0;
}
/* but not the tags themselves */
.sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--tags a {
font-size: 13px;
}
/* Show the first tag only; hide the others */
.sqs-block-summary-v2 .summary-metadata-item a:not(:first-child) {
display: none;
}