LogoCards

apps/www/src/sections/LogoCards.astro · 28 lines · group Dividers

LogoCards — logos as cards with a name and contacts under them (<Logo image title email phone />): distributors, partners, resellers — where the reader is meant to get in touch, not just recognise a brand.

In the fleet

Not used by any site yet.

Samples 1

sample

DISTRIBUTORS

Almara Agri
hello@almara.example +46 8 123 45 67
Kestrel Supply
sales@kestrel.example +47 22 12 34 56
Vinland Tools
post@vinland.example +45 33 11 22 33

MDX of this sample

<LogoCards title="DISTRIBUTORS" columns={3}>
  <Logo image="logo-02.png" title="Almara Agri" email="hello@almara.example" phone="+46 8 123 45 67" />
  <Logo image="logo-03.png" title="Kestrel Supply" email="sales@kestrel.example" phone="+47 22 12 34 56" />
  <Logo image="logo-04.png" title="Vinland Tools" email="post@vinland.example" phone="+45 33 11 22 33" />
</LogoCards>

Props

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

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

---
/**
 * LogoCards — logos as cards with a name and contacts under them
 * (<Logo image title email phone />): distributors, partners, resellers —
 * where the reader is meant to get in touch, not just recognise a brand.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

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

<Section id={id} theme={theme}>
  {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-1 gap-5', cols]} data-variant="cards">
    <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.