Palette🎨

Palette is a bundle of fancy components for Canvas, so site builders can assemble rich pages visually.

Live Demo Documentation

Every component is a plain SDC (Single Directory Component). Interactive components ship with lightweight, mostly dependency-free JavaScript and stay fully editable inside the Page preview.

Components

Design & layout

• Section — the design wrapper described above (margins, paddings, backgrounds, borders).
• Columns — a responsive multi-column layout.
• Text — a title and a rich-text body.

Buttons & calls to action

• Basic button — a call-to-action button with link, colours, hover colours, shape, size and alignment.
• CTA — a call-to-action block with an image and up to two fully styled buttons.
• Hero — a hero banner with title prefix, image, overlay and up to two buttons.
• Modal Dialog — a button that opens an accessible modal dialog (custom, no-library behaviour). The trigger button reuses all Basic button styling options.
• Webform Popup — a button that opens an existing webform in a popup dialog, with the full Basic button styling.

Media

• Image — a single image with caption, link and optional lightbox.
• Images — a simple grid of images (each an Images item).
• Image Gallery — a grid of images that open in a GLightbox popup (each an Image Gallery item).
• Video — a single video with an uploadable poster image.
• Video Gallery — a grid of videos and images with a play-button overlay, opening in GLightbox. Supports remote (YouTube/Vimeo/MP4) and local media videos (each a Video Gallery item).

Interactive & sliders

• Accordion — collapsible sections (each an Accordion section).
• Tabs — tabbed content with several styles and custom, no-jQuery switching (each a Tabs item).
• Carousel — a slider built on tiny-slider (each a Carousel item).
• Slider — a slider built on Splide, no jQuery required (each a Slider item).
• Sticky menu — an on-page sticky navigation with links and sublinks.

Content & data

• Quote — a pull quote with author and optional image, in several styles.
• Stats — a row of statistics (each a Stats item).
• Counter — numbers that count up when scrolled into view, powered by countUp.js (each a Counter item).
• Countdown — an animated countdown to a date.
• Tiles — a grid of linked tiles (each a Tiles item).
• Timeline — a vertical timeline of milestones (each a Timeline item).

Site integrations

• Webform — embed an existing webform by choosing it from a list.
• Views — embed an existing view and display, with optional arguments.

Section — the design wrapper at the heart of the palette

The star of Palette is the Section component. Rather than
bolting spacing and background options onto every single component, Palette keeps each component focused on its own content and lets Section wrap it
(or a whole group of components) to control the surrounding design. It is the same
separation of concerns you get from EPT Core's design options — but visual, reusable and built for page builder.

Wrap any component in a Section to add:

• Margins and paddings via a visual DOM Box — the four margins,
  borders and paddings are edited on an inspector-style box model, exactly like the
  box diagram in your browser's element inspector. Each field sits on the edge it
  controls, so spacing is self-explanatory instead of a wall of identical inputs.
• Background images — upload an image and control its position,
  size and repeat, with an optional colour overlay and adjustable opacity.
• Background video — a looping, muted background video with cover
  image, mobile fallback, overlay and playback options.
• Background color, gradients and overlays — solid colours chosen with an
  inline colour picker, plus overlay tints over images and video.
• Borders and radius — border width per edge (drawn in the DOM
  box), style, colour and corner radius.

Because Section is a pure wrapper, you can nest it around a single button or an
entire multi-component layout, giving every other component in this palette full
spacing and background control without carrying those options itself.

Similar projects

Palette brings the spirit of Extra Paragraph Types (EPT) and Extra Block Types (EBT)
to Drupal page builder as native Single Directory Components.