Text Block - Contento

The Text block supports rich text and has an optional button. It's a simple and flexible option for text on your website. It has text and button fields.

Front End

Content Model

The content model for the Text block is as follows:

text: Long Text Field - Required

button: Block - Optional

Code

The Text block uses the BlockData type from the Contento JavaScript SDK and also and uses the Button block.

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

export default function Text({ block }: { block: BlockData }) {
  return (
    <div className="py-9 md:py-16">
      <div className="prose mx-auto">
        <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>
    </div>
  )
}