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 wrapper element. Ensure you provided the desired column and gap classes.

html 
<div class="logo-cloud grid-cols-1 lg:grid-cols-4 gap-1">
	<div class="logo-item">
		<span>(icon)</span>
		<span>HR Solutions</span>
	</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>

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>