Layout and styling
Columns, items, theme, layout, spacing, corners, what each card shows and the New highlight. Every control, with its range.
Everything here is free on every plan, including the carousel, masonry, bento, the lightbox and both highlights, New and the rotating Spotlight. Changes show in the live preview at once and apply to every page after you press Save.
To see the layouts on real content first, the live examples show real widgets, and a few bento variations side by side.
Controls
| Control | What it does | Range |
|---|---|---|
| Columns | Columns in the grid or wall. On a wall it is a maximum: cards need about 220 px each, so a narrow screen shows fewer | 1 to 6 |
| Items | How many posts or reviews to show. A source keeps its newest 24 (a Google source up to 72 after its photo pass), and a widget never shows more than is cached | 1 to 24 |
| Theme | Auto follows each visitor’s device setting, Light and Dark are fixed | |
| Layout | Grid, Carousel, Masonry or Bento | |
| Gap | Space between tiles | 0 to 32 px |
| Corner radius | Rounded corners | 0 to 24 px |
| Max text lines | Review and posts walls only: longer text folds behind Show more | 2 to 12 |
Bento
Bento lays the items out like the TileSet logo: a big square (2 by 2), a tall one (1 by 2), a small one and a wide one (2 by 1), repeating, on square cells with no gaps left in the middle. Only the last row can be short.
- It uses 3 to 6 columns. A setting of 1 or 2 shows as 3, and more than 6 (possible through an agent) as 6.
- In a space narrower than 520 px, such as a phone, it shows 2 columns, and the big squares stay 2 by 2.
- On a feed grid, a post or review without a photo becomes a text card in its cell instead of being left out. On a review or posts wall every item is a card.
- A card’s text fills its cell and fades where the cell ends, so there is no Show more. The big cells use larger text.
- Big cells (Google and WordPress.org reviews): Newest keeps the newest items in the big cells, Top rated puts the highest-rated ones there, the newest first among equal ratings. The same items show either way, only their places change.
What each card shows
Toggles, depending on the template:
- Feed grid: Likes & comments, Header (avatar, handle and follow link), Lightbox, Platform icon. On a Twitch or Kick source, Live stream picks where a live stream plays: Lightbox or Inline in a live card (see Twitch and Kick).
- Review wall: Avatar (on testimonials, the photo or the person’s initials), Rating, Date, Owner response, Lightbox, Platform icon.
- YouTube also has All videos / Hide Shorts / Only Shorts.
Lightbox opens a picture or video on your page when a visitor clicks it, with a link to the original post or review. With it off, a click opens the post or review itself on its platform in a new tab (the Google review, the post on X, the video on YouTube), or the picture when the item has no link.
Platform icon puts a small Google or YouTube mark on each photo (top left) and card (bottom right). It is on by default in a mixed feed, so visitors can see where each post came from, and off otherwise. A testimonials widget has no platform to mark, so it does not offer it.
A toggle a source can never back is not shown. A small “+n” marker at the end of a section says how many are hidden and why on hover.
Captions on photos
On a feed grid, Captions chooses what a photo tile shows over the picture:
- Off: the photo only.
- On hover: the post’s text appears when a visitor points at the tile or tabs to it.
- Always: the account name and up to three lines of the text, all the time, like the example on our home page. With Likes & comments on, the counts become the caption’s last line instead of sitting under it.
Overlay (on by default) darkens the bottom of the photo under the caption so the text stays readable on a light picture. Turn it off for a cleaner photo.
Highlight
A small chip with a live dot, like the one on our home page, on any layout:
| Highlight | What it does | Plan |
|---|---|---|
| Off | No chip | Every plan |
| New | The chip on every post from the last few days. New for sets how many | 1 to 30 days, every plan |
| Spotlight | A ring and the chip pass between your newest four posts, one at a time. Each for sets how long each one keeps it | 3 to 30 seconds |
Chip text is what the chip says, “New” unless you change it, up to 12 characters. For visitors who have reduced motion turned on, nothing moves: only the newest post keeps the chip.
Review header and “Leave a review”
On a widget with Google reviews, Review header has two toggles, both off until you turn them on and both free:
- Rating summary puts a row above the reviews with the average, the stars and the count: “4.9 … from 24 recent reviews”. The stars fill to the average, so a 4.9 shows almost five and a 4.5 four and a half; the stars on each review stay whole. The figure is worked out from the reviews TileSet has stored for the widget (the newest 24, up to 72 for a Google source after its photo pass). It is not the rating on the platform, which Google does not pass along, so on Google the line says “recent reviews” and never claims more than it counted. On other sources it reads “average of 12 reviews”. In a mixed widget it covers the review sources only. It shows nothing when none of the stored reviews has a rating.
- Leave a review button adds a button to the platform’s own page for writing a review: Google’s review form for the business. Button text changes the words, “Leave a review” unless you change it, up to 24 characters. The button opens in a new tab. TileSet sends no review requests by email or text; the visitor goes to the platform themselves. A source that has no business to link to (a demo source, say) shows no button.
In the builder preview the button is shown but goes nowhere; on your page it opens the real form.
Describe the look
Type something like “dark, 4 columns, 12 items” into Describe the look you want and the matching controls are set for you.
Beyond the controls
The widget’s markup is a stable set of sbe- classes and --sbe- custom properties, so a developer or an agent can restyle it with a small stylesheet on your page. The full reference is the embed guide. The widget uses a system font of its own; set font-family on .sbe in your stylesheet to match your site.
The API accepts wider ranges than the dashboard controls (up to 12 columns and 100 items); items beyond the cache still show only what is cached.