Logo Clouds

Tailwind

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

@skeletonlabs/skeleton
View Source
Doc Source

Examples

Svelte Tailwind Github
HR Solutions
Acme Theaters
Cruisin' Cuisine
Arcane Security
Stark Industries
Gekko & Co.
Acme Corp.
Wonka Inc.

Usage

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>&hearts;</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>

Logo Item Links

Logo Items support anchor tags for links.

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

Logo Item Icons

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

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