Hero Block - Contento

The Hero Block is a simple layout to help communicate your key message above the fold on your website. It has title, text, button and image fields, with the title outputted as the h1 for the page.

Front End

Content Model

The content model for the Image and Text block is as follows:

title: Text Field - Required

text: Long Text Field - Required

button: Block - Required

image: Assets Field - Required

Code

The Hero block uses the BlockData type from the Contento JavaScript SDK, the Image component from Next.js and the Button block.

import { BlockData } from '@gocontento/client'
import Image from 'next/image'
import Button from './Button'

export default function Hero({ block }: { block: BlockData }) {
  return (
    <div className="pb-9 md:pb-16">
      <div className="grid items-center space-y-6 md:grid-cols-2 md:space-x-12">
        <div className="prose">
          <h1 className="text-4xl font-semibold md:text-5xl">
            {block.fields.title.text}
          </h1>
          <div
            dangerouslySetInnerHTML={{ __html: block.fields.text.text }}
            className="text-lg"
          />
          {block.fields.button.blocks.length > 0 &&
            block.fields.button.blocks.map((button: BlockData) => {
              return (
                <Button key={button.fields.button_text.text} button={button} />
              )
            })}
        </div>
        {block.fields.image.assets.length > 0 && (
          <div>
            <Image
              src={block.fields.image.assets[0].asset.url}
              alt={block.fields.image.assets[0].asset.description}
              className="h-full w-full object-cover"
              width={750}
              height={600}
            />
          </div>
        )}
      </div>
    </div>
  )
}