Good to the last link

The homepage is the most-shared link Chamberlain has, and today it carries no share image at all, so it comes up blank. The card builds one from the page itself: the arched wordmark lifted straight from the header, set in the brand’s rounded display type on that powder-blue ground with the green organic mark, so the front door finally arrives looking like Chamberlain instead of nothing at all.

A Chamberlain collection page is a little gallery of product photography, so the card brews itself from that same shelf. It reaches into the live page, grabs the real product shots off the grid, and lays them up as a mosaic, with a short editorial header on the left: collection name in navy, one green rule, a line of description, all on that powder blue. Because the photos come straight off the page, the card always shows what’s on the shelf right now rather than last season’s lineup. It takes up to four, lets an odd one stretch to fill the row, and if a collection ever runs empty it falls back to the plain brand card instead of an awkward blank grid.

On a product page the bag is the whole pitch, so the card reads the product’s own photo straight off the page and builds around it. Chamberlain already shares that shot, just as a raw 2048-pixel square that weighs 1.7 MB and loses its edges to the social crop. Our card sets the same photo into the frame properly, the full product never cut tight, on a pale card the way Chamberlain lays things out, with the name, rating, and price beside it in navy so the photo keeps the light. The price rides in a little navy pill, the stars turn up only when the page actually carries a rating, and a genuine sale shows the old price struck through beside the new one. Lose the photo to a sell-out and the card falls back to a clean wordmark rather than a hole where the bag should be.

The card takes its headline straight from the page’s own heading and a lead photo from the body, never a generic banner, so it shows whatever the blog is actually pouring over that week: photo on the left, title on the right in navy, brand name up top, domain below, all on powder blue. It’s cut to the same shape as the product card on purpose, so the whole set reads like one family, and it’s the card any single post leans on too, keeping things tidy from the index down to the article. Without a usable lead image it falls back to a clean wordmark rather than an empty frame. The blog index carries no share image at all today, so this is the first one it has ever had; the live demo renders once the origin is seeded.

This card reads the headline and deck right off the article and sets them like a magazine cover: the brand nameplate small up top over a fine hairline, the headline big in Chamberlain’s rounded display sans, a short italic deck riding underneath, and a single green rule anchoring the footer by the domain. The ground warms to a paper cream so an article stands apart from the powder-blue product and collection cards at a glance. This is the dedicated single-article treatment, and it really sings once a post calls itself an article in its page data, the one thing Chamberlain’s blog doesn’t ship just yet. For now those posts carry no share image at all, so the card hands them their very first one; the live demo renders once the origin is seeded.