Stats Block - Contento

The Stats blocks is a great way to showcase impressive statistics about your business on your website. It has an optional title and a set of 3 stat_blocks.

Front End

Content Model

The content model for the Stats block is as follows:

title: Text Field - Optional

stat_blocks: Block - Required

The stat_blocks has a nested stat_block that contains the following content model:

subtitle: Text Field - Required

stat: Text Field - Required

Code

The Stats block uses the BlockData type from the Contento JavaScript SDK.

import { BlockData } from '@gocontento/client'

export default function Stats({ block }: { block: BlockData }) {
  return (
    <div className="py-9 md:py-16">
      {block.fields.title.text && (
        <h2 className="text-lg md:text-center">{block.fields.title.text}</h2>
      )}
      <div className="mx-auto my-9 grid max-w-[1000px] gap-y-12 bg-zinc-100 py-9 md:grid-cols-3">
        {block.fields.stat_blocks.blocks.map((block: BlockData) => (
          <div className="flex flex-col items-center gap-y-3">
            <p>{block.fields.subtitle.text}</p>
            <h3 className="text-5xl font-semibold">{block.fields.stat.text}</h3>
          </div>
        ))}
      </div>
    </div>
  )
}