Every layout, and how the logos are sized

A Logo Showcase is a list of logos and a set of settings per screen. This guide walks the editor top to bottom: the four layouts and what each one does with motion, how a logo's size is decided, colour, hover, the header and button, and the rules the widget keeps so nothing is ever cut off.

The editor Layouts Sizing Colour Hover Header, button, width Per screen The rules it keeps

The editor, in three panels

Logos is the list: add artwork, name each logo, give it a link, and set a size of its own if one logo needs it. Design is how the widget looks: layout, sizing, colour, hover, header, button, background. Settings is the name, the embed code and the odd things (custom CSS, custom JS). Every card in Design has an Undo that puts back its last ten changes, and the preview follows every change at the size of the screen chosen above it.

Drafts survive a closed tab. Nothing reaches your site until you click Save; then every page embedding the widget updates within a minute.

The four layouts

Ticker (continuous)

One strip, moving without end, left or right. Set Scroll speed, Gap between logos and Edge fade width. Pause on hover stops the strip while the pointer is over it; visitors can also drag it. Bigger in the middle grows logos as they pass the centre.

Ticker Rows

Several strips, one above another, each travelling its own way. Choose the Number of rows and, with the row picker, which logos go on which row; every logo is on one row. Arch bends the rows into a curve, peak or dip in the middle. Rows nest into each other's curve on purpose, so tighten Space between rows as far as you like: only the logo answers the pointer, never the space around it.

Carousel

Steps one logo at a time. Logos to show at a time sets how many fit across; with arrows off, that width is spread over the logos and no room is left where the arrows were. Arrow size, Arrow position and the four arrow colours (shape, arrow, hover shape, hover arrow) style them; a transparent shape leaves just the arrow. Autoplay steps on its own with a pause you set. Smallest at the edges makes the middle logo the biggest.

Grid

A wall of even cells, Columns across, with three kinds of Movement:

Still. Nothing moves. Every logo is whole and inside the widget, always.
Columns scroll up and down. Each column is a vertical strip, alternate columns travelling opposite ways, set by Column height and Scroll speed. A logo slides through the top and bottom edges; it never pops.
Step along a path you draw. Click cells in the picker to draw a route; logos step from stop to stop, holding at each for Hold at each stop and moving for Travel time. A path may end in a cell outside the widget so the return to the start happens out of sight.

How a logo's size is decided

Logo height is the starting point, per screen: every logo is drawn this tall, as wide as its proportions make it.
All logos one size ignores proportions and gives every logo the same width or the same height, whichever you pick. Wide marks and tall marks then line up.
Scale them all multiplies whatever the two above produced, for every logo at once, and is also the ceiling for the next rule.
A size of its own, set on one logo in the Logos panel, takes over from Logo height for that logo alone. Apply to all of them gives the sizes set on this screen to tablet and phone as well, and Put them all back clears every own size so every logo returns to the shared one; both ask first and both can be undone.
Badge artwork lets a logo that arrives as a badge be shown whole, mark only, or with the mark cut out, for each logo or for all at once.

Colour

Original colors draws the artwork as it came. Custom color (uniform) paints every logo one shade, with a second shade for hover; a logo given a colour of its own in the Logos panel keeps it, under the pointer too, and a logo with no transparency (a JPG, a flat PNG) cannot be recoloured and keeps its own colours. Set the widget Background to a colour, or transparent to sit on your page's own.

Hover

One effect for every layout: Grow, Bounce, Slam, Slam settle or Pulse, with Effect strength for how far grow and pulse travel. Room is kept for the growth, so a hovered logo never lands on its neighbour and a still grid never pushes the row above. Visitors who have asked their system for less motion get the hover colour and no movement.

Header, button and width

A Header puts a title and subtitle above the logos, each with its own font, size, weight, letter spacing and colour, aligned left, centre or right. An Action Button below the logos carries text, a link, colours at rest and on hover, an outline, and its own width and height. Widget Width is full width by default; set a Max width to centre the widget in a wide page. Padding & Spacing is the room around everything.

Per screen

Every setting in Design is kept three times: desktop, tablet and phone. The switch above the preview chooses which you are editing and shows the widget at that size. Apply changes to lets one change land on all three at once. The logos themselves are shared.

The rules the widget keeps

A still grid never draws a logo outside the widget on any side. When the logos will not fit at the size asked, the gap gives way first, then one percentage comes off every logo, hand-sized ones included, and is given back as columns are removed.
Anything that moves passes through the edges in its direction of travel, and never crosses the other two: a strip keeps every logo inside the top and bottom, a scrolling column inside the left and right, growth included.
No logo is ever drawn over another, hovered at full strength or not.
Logos are drawn sharp at rest on every browser, Safari included.

On the free plan a Logo Showcase carries up to three logos and a small credit line. Paid plans lift both.