Nonprofit

Import the Nonprofit 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 Nonprofit 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

Causes

canvas_ngo_cause

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

• Editor features: comments, custom-fields, editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Cause Categories (canvas_ngo_cause_cat)

Each item carries these extra settings on its edit screen:

• Cause Goal

• Cause Image

• Cause Raised

Blocks this design adds

Causes

canvas-core/ngo-causes

Display fundraising causes as a carousel or a card grid, each with a live donation meter, or render a cause page donation panel. In the block inserter it is named Canvas Causes.

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

Layout

• LayoutDefaultCards Grid

  Choose between the card grid, the overlay carousel, the donation panel that sits on a single cause page, and the row of related causes for that page.

  ChoicesCards GridOverlay CarouselSingle Cause - Donation PanelSingle Cause - Related Causes

Query

• ItemsDefault0

  0 shows all causes.

• Order ByDefaultMenu Order

  Sort the causes by the order you set on each one, by publish date, or alphabetically by title.

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

• Category SlugDefaultEmpty

  Show only causes in this category. Empty shows every category.

Display

• Row ClassesDefaultrow col-mb-30

  Classes on the row wrapping the cards. Enter "none" to emit the columns without a row, so they can sit in a row of your own.

  Shown when Layout is "Cards Grid" or "Single Cause - Related Causes"

• Column ClassesDefaultcol-lg-4 col-md-6

  Classes on each column, which is where the number of cards per row is set.

  Shown when Layout is "Cards Grid" or "Single Cause - Related Causes"

• Card ClassesDefaultcharity-card h-shadow shadow-ts card rounded-5

  Classes on the card that wraps one cause.

  Shown when Layout is "Cards Grid" or "Single Cause - Related Causes"

• Carousel Item ClassesDefaultoc-item text-start

  Classes on each carousel slide.

  Shown when Layout is "Overlay Carousel"

• Carousel Overlay ClassesDefaultoc-desc d-flex flex-column justify-content-center shadow-lg

  Classes on the panel floated over the slide image, which holds the category, title, meter and button.

  Shown when Layout is "Overlay Carousel"

• Image ClassesDefaultEmpty

  Extra classes on the cause image.

• Category ClassesDefaulttext-uppercase fw-normal ls-1 mb-2 d-block

  Classes on the small category line above the title.

• Title ClassesDefaultmb-3

  Classes on the cause title.

• Card Body ClassesDefaultpx-4 py-3 charity-card-title

  Wrapper around the category, title and meter on a grid card.

  Shown when Layout is "Cards Grid" or "Single Cause - Related Causes"

• Description Wrapper ClassesDefaultp-4

  Classes on the box holding the description and the button at the foot of a card.

  Shown when Layout is "Cards Grid" or "Single Cause - Related Causes"

• Description ClassesDefaultmb-0 text-black-50

  Classes on the description paragraph.

• Show DescriptionDefaultOn

  Show the short description under each cause title.

• Card Button TextDefaultEmpty

  Empty renders no button.

• Card Button ClassesDefaultbutton button-rounded button-border text-transform-none ls-0 fw-medium m-0 d-flex align-self-start

  Classes on the card button.

• Causes Page SlugDefaultcauses

  Slug of the causes landing page. Resolved to a portable permalink for the category eyebrow and the related row.

• Related HeadingDefaultRelated Causes

  Heading printed above the row of related causes.

  Shown when Layout is "Single Cause - Related Causes"

Meter

• Show Donation MeterDefaultOn

  Show the progress bar comparing the amount raised with the target. A cause with no target set hides it either way.

• Meter ClassesDefaultmb-3

  Classes on the meter wrapper.

  Shown when Show Donation Meter is on

• Meter HeightDefault0.25rem

  Thickness of the meter bar, as a length such as 0.25rem or 4px.

  Shown when Show Donation Meter is on

• Meter Fill ClassesDefaultbg-color

  Classes on the filled part of the meter, which is where its colour comes from.

  Shown when Show Donation Meter is on

• Meter Count SpeedDefault1100

  How long the raised figure takes to count up, in milliseconds.

  Shown when Show Donation Meter is on

• Meter LabelDefaultDonated of

  Sits between the raised figure and the goal figure.

  Shown when Show Donation Meter is on

• Currency SymbolDefault$

  Symbol printed in front of every money figure.

• Meter Text Inline StyleDefaultfont-size: 15px

  Inline style for the raised and target figures beside the meter, for example a font size.

  Shown when Show Donation Meter is on

Single

• Panel ClassesDefaultcard bg-color-light rounded-1 my-4

  Classes on the donation panel box.

  Shown when Layout is "Single Cause - Donation Panel"

• Panel Body ClassesDefaultcard-body py-4 px-5

  Classes on the inner padding of the donation panel.

  Shown when Layout is "Single Cause - Donation Panel"

• Raised LabelDefaultDonated:

  Wording in front of the amount raised so far.

  Shown when Layout is "Single Cause - Donation Panel"

• Goal LabelDefaultTarget:

  Wording in front of the fundraising target.

  Shown when Layout is "Single Cause - Donation Panel"

• Panel Meter HeightDefault0.5rem

  Thickness of the meter inside the donation panel, as a length such as 0.5rem.

  Shown when Layout is "Single Cause - Donation Panel"

• Panel Track ColourDefault#FFF

  Colour of the unfilled part of the panel meter.

  Shown when Layout is "Single Cause - Donation Panel"

• Percentage Badge ClassesDefaultbadge bg-white text-dark ms-4

  Classes on the percentage badge shown beside the panel meter.

  Shown when Layout is "Single Cause - Donation Panel"

Carousel

• Carousel ClassesDefaultcharity-card

  Added to the owl carousel root, after its own engine classes.

  Shown when Layout is "Overlay Carousel"

• Items (base)Default0

  Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

  Shown when Layout is "Overlay Carousel"

• Items (XS)Default1

  Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

  Shown when Layout is "Overlay Carousel"

• Items (SM)Default2

  Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Overlay Carousel"

• Items (MD)Default2

  Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Overlay Carousel"

• Items (LG)Default3

  Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Overlay Carousel"

• Items (XL)Default4

  Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

  Shown when Layout is "Overlay Carousel"

• Item Gap (px)Default10

  Space between one slide and the next, in pixels.

  Shown when Layout is "Overlay Carousel"

• Show ArrowsDefaultOn

  Show the previous and next arrows beside the slides.

  Shown when Layout is "Overlay Carousel"

• Arrows Always VisibleDefaultOff

  Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

  Shown when Layout is "Overlay Carousel"

• Show DotsDefaultOn

  Show the row of dots below the slides, one per page.

  Shown when Layout is "Overlay Carousel"

• Autoplay (ms)Default0

  Milliseconds between slides. 0 disables autoplay.

  Shown when Layout is "Overlay Carousel"

• LoopDefaultOff

  Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

  Shown when Layout is "Overlay Carousel"

• Transition SpeedDefault250

  Milliseconds per slide transition.

  Shown when Layout is "Overlay Carousel"

• Centre Active SlideDefaultOff

  Keeps the active slide in the middle of the stage.

  Shown when Layout is "Overlay Carousel"

• Stage PaddingDefault0

  Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

  Shown when Layout is "Overlay Carousel"

• Animate InDefaultEmpty

  Animation class applied to the incoming slide. Empty uses a plain slide.

  Shown when Layout is "Overlay Carousel"

• Animate OutDefaultEmpty

  Animation class applied to the outgoing slide. Empty uses a plain slide.

  Shown when Layout is "Overlay Carousel"