Logo Clouds

Tailwind

Provides a grid for presenting a set of logos, brands, or sponsors.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Twitch YouTube Vimeo
HR Solutions
Acme Theaters
Cruisin' Cuisine
Arcane Security
Stark Industries
Gekko & Co.
Acme Corp.
Wonka Inc.

Getting Started

Logo clouds provide a styled grid element. Use the Tailwind column and gap classes to adjust column amount and gap spacing.

html 
<div class="logo-cloud grid-cols-1 lg:grid-cols-4 gap-1">
	<div class="logo-item">HR Solutions</div>
	<div class="logo-item">Acme Theaters</div>
	<div class="logo-item">Cruisin' Cuisine</div>
	<div class="logo-item">Arcane Security</div>
	<div class="logo-item">Stark Industries</div>
	<div class="logo-item">Gekko & Co.</div>
	<div class="logo-item">Acme Corp.</div>
	<div class="logo-item">Wonka Inc.</div>
</div>

Using Icons

See the example below for implementing icons. Note how each element is wrapped in a span tag.

html 
<div class="logo-item">
	<span>(icon)</span>
	<span>Skeleton</span>
</div>

Creating Links

Usings support anchor tags for links.

html 
<a class="logo-item" href="/">Skeleton</a>

Using Icons

Wrap child elements in span tags and they will space as expected.

html 
<div class="logo-item">
	<span>💀</span>
	<span>Skeleton</span>
</div>

Styling

Use the Tailwind's abitrary variant syntax customize the .logo-item styles. Tailwind classes and variant styles are supported.

html 
<div class="logo-cloud [&>.logo-item]:bg-red-500">...</div>
html 
<div class="logo-cloud [&>.logo-item]:variant-filled-secondary">...</div>
Twitch YouTube Vimeo