Logos Block - Contento

The Logos block is ideal for showcasing logos of companies you have worked with. It allows you to showcase 6 images with an optional subtitle above. It has subtitle and logos fields.

Front End

Each logo can also be a link to the company page.

Content Model

The content model for the Logos block is as follows:

subtitle: Text Field - Optional

logos: Block - Required

The logos block contains a nested logo block with the following content model:

logo: Assets Field - Required

url: Text Field - Optional

Code

The Logos block uses the BlockData type from the Contento JavaScript SDK and the Image and Link components from Next.js

import { BlockData } from '@gocontento/client'
import Image from 'next/image'
import Link from 'next/link'

export default function Logos({ block }: { block: BlockData }) {
  return (
    <div className="py-9 md:py-16">
      {block.fields.subtitle.text && (
        <h3 className="text-lg md:text-center">{block.fields.subtitle.text}</h3>
      )}
      <div className="mx-auto my-9 grid max-w-[1000px] grid-cols-2 gap-x-6 gap-y-4 md:grid-cols-3 md:gap-x-12 md:gap-y-6 lg:grid-cols-6">
        {block.fields.logos.blocks.map((block: BlockData) => (
          <Link href={block.fields.url.text}>
            <Image
              src={block.fields.logo.assets[0].asset.url}
              alt={block.fields.logo.assets[0].asset.description}
              className="h-full w-full object-cover"
              width={120}
              height={50}
            />
          </Link>
        ))}
      </div>
    </div>
  )
}