Logo Clouds

Automatically included in all.css and elements.css. This stylesheet provides logos for presenting a set of logos, brands, or sponsors.

ts 
import '@brainandbones/skeleton/styles/elements/logo-clouds.css';

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>

Global Styles

Use your global stylesheet to update all instances of this element.

css 
.logo-cloud {
    @apply rounded-none;
}
.logo-item {
    @apply !bg-surface-500;
}

Classes

Class Description
.logo-cloudApply to a wrapping block element around a set of logos.
.logo-itemApply to each logo child element.