OneTaskBy Tim King · Updated
As Seen In Strip
Muted Greyscale Logos, Heading Above or Beside, Swappable Publication Names
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the "As Seen In" Strip works
An as seen in strip is the short row of newspaper, magazine and podcast names that shows where your business has been featured, usually just under the hero. Enter the publications, choose the heading position and colours, and copy the HTML and CSS. Swap the names for logo images when you have them.
Press mentions borrow the trust readers already give to those outlets. A single quiet row is enough: it should be noticed in passing without pulling attention from your main call to action.
How the as seen in strip is built
The names sit in a list laid out with flexbox, which wraps onto more lines on narrow screens and keeps each name on one line. Every item is greyscale and partly transparent so a row of different brand colours reads as one calm band. With the heading beside the logos, the whole section becomes a single wrapping flex row.
Using real press logos
Replace each list item's text with an <img> of the outlet's logo and alt text naming the outlet.
The same greyscale and opacity rules apply to images, and the height limit keeps tall and wide
logos in proportion.
FAQ
Can I use a publication's logo without asking?
Showing a logo to say factually that you were featured is common, but outlets own their logos and some have rules on how they appear. Only list places that really covered you, and check the outlet's media guidelines if you are unsure.
Should the logos link to the articles?
Linking each logo to the actual article backs up the claim and lets curious visitors read it. Wrap each logo in a link and give the link a label such as "Read the feature in Market Weekly".
What is the difference between this and a client logo wall?
An "as seen in" strip lists media that wrote about you, in one short row. A client logo wall is a larger grid of customers who use your product. Many pages use both in different places.
Why are the logos grey?
Greyscale stops a row of bright brand colours competing with your own design and buttons. To show full colour logos, delete the filter and opacity lines from the CSS.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Client Logo Wall
Build a greyscale grid of customer logos that colour on hover.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.
Trust Badge Strip
Build a row of trust badges with inline SVG icons.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Review Stars
Make accessible partial star ratings with one CSS variable.