Logospopular

apps/www/src/sections/Logos.astro · 29 lines · group Dividers

Logos — a row of <Logo>: clients, partners, trust marks, on a muted band. columns 3|4|5|6

In the fleet

Used on 2 sites built with this engine.

Samples 2

sample

TRUSTED BY GROWERS ACROSS THE REGION

MDX of this sample

<Logos title="TRUSTED BY GROWERS ACROSS THE REGION" columns={5}>
  <Logo image="logo-01.png" title="Nordvind" />
  <Logo image="logo-02.png" title="Almara" />
  <Logo image="logo-03.png" title="Kestrel" />
  <Logo image="logo-04.png" title="Vinland" />
  <Logo image="logo-05.png" title="Orsa" />
</Logos>

sample

PART OF THE OPEN WEATHER DATA NETWORK

MDX of this sample

<Logos theme="dark" title="PART OF THE OPEN WEATHER DATA NETWORK" columns={3}>
  <Logo image="logo-06.png" title="Björk" href="https://example.com/" />
  <Logo image="logo-07.png" title="Havsbris" href="https://example.com/" />
  <Logo image="logo-08.png" title="Tyra" href="https://example.com/" />
</Logos>

Props

Name	Type	Default
id	string
title	string
description	string
columns	3 \| 4 \| 5 \| 6	5
theme	Theme	'muted'

Source apps/www/src/sections/Logos.astro @ gitt.one

---
/**
 * Logos — a row of <Logo>: clients, partners, trust marks, on a muted band.
 * columns 3|4|5|6
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  columns?: 3 | 4 | 5 | 6;
  theme?: Theme;
}
const { id, title, description, columns = 5, theme = 'muted' } = Astro.props;
const cols = { 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 5: 'md:grid-cols-3 lg:grid-cols-5', 6: 'md:grid-cols-3 lg:grid-cols-6' }[columns];
---

<Section id={id} theme={theme} class="!py-10">
  {title && (
    <p class="text-center text-sm font-semibold uppercase tracking-wide text-gray-600 [.bg-stone-800_&]:text-primary-100">{title}</p>
  )}
  {description && <p class="mx-auto mt-2 max-w-2xl text-center text-gray-500">{description}</p>}
  <ul class:list={['mt-6 grid list-none grid-cols-2 gap-8', cols]} data-variant="row">
    <slot />
  </ul>
</Section>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.