Bricks

Bricks are a reusable way of defining groups of custom fields. In other systems, you may call these blocks or components.

To create a brick, simply import the BrickBuilder class and create a new instance of it. Using the builder pattern, you can chain custom field methods on the brick to define its structure.

Example

bricks/banner-brick.ts

import { BrickBuilder } from "@lucidcms/core/builders";

const Banner = new BrickBuilder("banner", {
  title: {
    en: "Banner",
  },
  description: "A banner with a title and intro text",
  preview: {
    image: "https://placehold.co/600x400",
  },
})
  .addTab("contentTab", {
    labels: {
      title: "Content",
    },
  })
  .addText("title", {
    labels: {
      description: "The title of the banner. This is displayed as an H1 tag.",
    },
    validation: {
      required: true,
    },
  })
  .addWysiwyg("intro")
  .addRepeater("callToActions", {
    labels: {
      title: "Call to Actions",
    },
    validation: {
      maxGroups: 3,
    },
  })
  .addText("ctaTitle", {
    labels: {
      title: "Title",
    },
  })
  .addText("ctaUrl", {
    labels: {
      title: "URL",
    },
  })
  .endRepeater()
  .addTab("configTab", {
    labels: {
      title: "Config",
    },
  })
  .addCheckbox("fullWidth", {
    labels: {
      description: "Make the banner full-width",
    },
  });

export default Banner;

Available Custom Field methods

• addFields
• addTab
• addRepeater & endRepeater
• addText
• addWysiwyg
• addMedia
• addNumber
• addCheckbox
• addSelect
• addTextarea
• addJSON
• addColour
• addDateTime
• addLink
• addUser