SDC: Tailwind Logo Cloud

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: logo-cloud-opc
status: experimental
description: 'The logo-cloud-opc component auto-generated by drupal-radix-cli'
props:
  type: object
  required:
    - title
    - logos
  properties:
    title:
      type: string
      description: 'The title of the logo cloud'
    logos:
      type: array
      description: 'The logos to display in the logo cloud'
      items:
        type: object
        properties:
          image:
            type: string
            description: 'The image of the logo'
          url:
            type: string
            description: 'The url of the logo'
          alt:
            type: string
            description: 'The alt text of the logo'
          width:
            type: integer
            description: 'The width of the logo'
          height:
            type: integer
            description: 'The height of the logo'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{% set logo_duplicated = logos|merge(logos)|merge(logos) %}
<div class="opc:bg-white opc:py-24 opc:sm:py-32 opc:overflow-hidden -container-with-gutter">
  <div class="opc:mx-auto opc:max-w-7xl opc:px-6 opc:lg:px-8">
    <h2 class="opc:text-center opc:text-lg/8 opc:font-semibold opc:text-gray-900">{{ title }}</h2>
    <div class="opc:mx-auto opc:mt-10 opc:items-center opc:gap-y-10 opc:sm:max-w-xl opc:lg:mx-0 opc:lg:max-w-none opc:lg:gap-x-10 opc:flex opc:animate-loop-scroll-fastest opc:md:animate-loop-scroll-faster opc:lg:animate-loop-scroll opc:hover:[animation-play-state:paused]">
      {% for logo in logo_duplicated %}
        <a href="{{ logo.url }}" class="opc:block! opc:h-fit opc:w-50 opc:shrink-0 opc:mr-0! opc:border-2 opc:border-transparent opc:hover:border-primary opc:py-2 opc:rounded opc:transition-colors"><img class="opc:max-h-12 opc:w-full opc:object-contain" src="{{ logo.image }}" alt="{{ logo.alt }}" width="{{ logo.width }}" height="{{ logo.height }}" /></a>
      {% endfor %}
    </div>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{{ include('radix_opc:logo-cloud-opc',{
    title: 'Trusted by the world’s most innovative teams',
    logos: [
        {   'image': 'https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg',
            'url': '#', 'alt': 'Statamic', 'width': 158, 'height': 48                                     },
        {   'image': 'https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg',
            'url': '#', 'alt': 'Transistor', 'width': 158, 'height': 48                                   },
        {   'image': 'https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg',
            'url': '#', 'alt': 'Reform', 'width': 158, 'height': 48                                       },
        {   'image': 'https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg',
            'url': '#', 'alt': 'Tuple', 'width': 158, 'height': 48                                        },
        {   'image': 'https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg',
            'url': '#', 'alt': 'SavvyCal', 'width': 158, 'height': 48                                     },
    ]
  })
}}