This project is still a work in progress.

payload bricks
Fields

Headline

Used for headlines

Installation

npx shadcn@latest add https://payload-bricks.bblank.dev/r/headline-field.json

Usage

example-config.ts
import { headlineField } from "@/fields/headline"
import { Block } from "payload"

export const ExampleBlock: Block = {
    slug: "example",
    interfaceName: "Example",
    fields: [
        // your other fields
        headlineField,
        // ...
    ]
}
example-block.tsx
import { Headline } from "@/components/headline"
import { Example } from "@/payload-types"

export function ExampleBlock(props: Example) {
  return <Headline {...props.headline} />
}

Field structure

nametype
texttext
levelselecth1, h2, h3, h4, h5, h6
sizeselecth1, h2, h3, h4, h5, h6

Customization

The headline component uses a major third typescale per default. The sizes of the different heading levels can be customized inside of globals.css.

On this page