Beauty Kit

Import the Beauty Kit design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Beauty Kit and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Content types this design adds

Beauty Kits

canvas_beauty_kit

One item is called a Beauty Kit. You will find them in their own admin menu once the design is installed.

• Editor features: editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Beauty Kit Categories (canvas_beauty_kit_cat)

Each item carries these extra settings on its edit screen:

• Price

• Size

• Skin Type

• How to Use

Blocks this design adds

Beauty Kits

canvas-core/beauty-kits

Display beauty kits from the Beauty Kits post type as priced catalogue cards, or render a single kit page (attributes, CTA, related kits). In the block inserter it is named Canvas Beauty Kits.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Layout

• LayoutDefaultCatalogue Grid

  Which part of the design this block draws: the catalogue grid, or one of the three pieces that build a single kit page. The single pieces render nothing anywhere else.

  ChoicesCatalogue GridSingle Kit - AttributesSingle Kit - CTASingle Kit - Back + Related

Query

• CategoryDefaultEmpty

  Beauty Kit Category slug to show (e.g. the kits, or the single products). Empty shows every item.

• ItemsDefault0

  0 shows all kits.

• Order ByDefaultMenu Order

  What decides the sequence kits appear in: the order you arranged them in, when each was published, or the kit name.

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Whether that sequence runs forwards or backwards. With Order By set to Date, Descending puts the newest kit first.

  ChoicesAscendingDescending

Display

• Row ClassesDefaultrow justify-content-center col-mb-50

  Style classes on the row that holds the cards. The default centres a part-filled row and spaces the cards apart when they stack.

• Column ClassesDefaultcol-9 col-md-4 text-center px-md-3 px-xl-5

  Style classes on the column each card sits in. This is what decides how many cards fit across the row at each screen width.

• Card ClassesDefaultgrid-inner

  Style classes on the card inside its column. Leave it empty and the card is drawn without that inner wrapper at all.

• Card Image ClassesDefaultproduct-image

  Style classes on the picture area at the top of a card.

• Card Image SizeDefaultFull

  Which stored size of the picture the cards load. A smaller size makes a long catalogue quicker to arrive, at the cost of sharpness on large screens.

  ChoicesFullLargeMedium LargeMedium

• Card Body ClassesDefaultproduct-desc

  Style classes on the block of text under the picture, which holds the title and the price.

• Card Title Wrapper ClassesDefaultproduct-title mb-1

  Style classes on the wrapper around a card title, which is what sets the gap between the title and the price under it.

• Card Title TagDefaultH3

  Which heading level a card title uses, so the catalogue fits the outline of the page around it. The look is unchanged.

  ChoicesH2H3H4

• Card Title ClassesDefaultEmpty

  Style classes on the card title itself, alongside those on its wrapper above.

• Price Wrapper ClassesDefaultproduct-price

  Style classes on the line that holds the price.

• Price TagDefaultins

  The design marks a current price with .

  Choicesinsspanstrong

• Price ClassesDefaultcolor

  Style classes on the price figure itself. The default picks up the accent colour of your palette.

• Record Identity ClassesDefaultOn

  Add WordPress's own per-record classes (post id, type, status) to each column.

• Kits Page SlugDefaultkits

  Slug of the catalogue landing page. The single layouts resolve it to a portable permalink for the category eyebrow and the "Back" button. Empty = no link.

• CTA Page SlugDefaultEmpty

  Slug of the page the single-cta button links to. Resolved to a portable permalink so the link is correct on any install / import. Empty = no button.

• CTA Button TextDefaultAsk About This Kit

  Wording on the enquiry button at the foot of a kit page. Leave it empty and no button appears.

• Back Button TextDefaultBack to Kits

  Wording on the button that returns a visitor from a kit page to the catalogue. Leave it empty and no button appears.

• Related HeadingDefaultMore from the range

  Heading above the row of other kits at the foot of a kit page. Leave it empty to show them with no heading.

Overlay

• Image Hover OverlayDefaultOn

  Reveal a button over the card image on hover.

• Overlay Content ClassesDefaultbg-overlay-content align-items-center justify-content-center

  Style classes on the panel that appears over the picture. The default centres the button inside it.

  Shown when Image Hover Overlay is on

• Overlay AnimationDefaultfadeIn

  The name of the movement the overlay makes as it appears, such as fadeIn. Leave it empty for an overlay that arrives without any movement.

  Shown when Image Hover Overlay is on

• Overlay Animation Speed (ms)Default400

  How long that movement takes, in thousandths of a second. Set it to 0 to leave the timing to the design.

  Shown when Image Hover Overlay is on

• Overlay Button TextDefaultBuy

  Wording on the button inside the overlay. Clearing both this and the icon leaves no overlay at all.

  Shown when Image Hover Overlay is on

• Overlay Button IconDefaultbi-bag

  An icon shown before the wording on the overlay button.

  Shown when Image Hover Overlay is on

• Overlay Button ClassesDefaultbutton button-xlarge bg-color2 text-light h-text-light h-op-09 ls-1 text-uppercase

  Style classes on the overlay button, which is what gives it its size, colour and spaced capitals.

  Shown when Image Hover Overlay is on