Crowdfunding

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

Campaigns

canvas_cf_campaign

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

• Editor features: comments, editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Campaign Categories (canvas_cf_campaign_cat)
• Grouped by: Campaign Tags (canvas_cf_campaign_tag)

Each item carries these extra settings on its edit screen:

• Participants

• Contributions

• Campaign Creator

• Campaign Creator Bio

• Campaign Creator Img

• Campaign Deadline

• Campaign Gallery

• Campaign Goal

• Campaign Highlights

• Location

• Campaign Meter Speed

• Campaign Raised

• Campaign Tagline

• Campaign Updates

• Campaign Video

Blocks this design adds

Campaigns

canvas-core/crowdfund-campaigns

Display funding campaigns as a card grid, or render a campaign page funding meter, statistics sidebar, progress updates or highlights list. In the block inserter it is named Canvas Campaigns.

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

Layout

• LayoutDefaultCard Grid

  Which part of the design this block draws. Card Grid and the filter bar belong on a listing page; every choice beginning with Campaign draws one piece of a single campaign page and renders nothing anywhere else.

  ChoicesCard GridSearch & Filter BarCampaign - VideoCampaign - LocationCampaign - TaglineCampaign - GalleryCampaign - Funding MeterCampaign - Funding SidebarCampaign - Progress UpdatesCampaign - Highlights ListCampaign - ReviewsCampaign - Posted By Cardand 4 more

Query

• ItemsDefault0

  0 shows all campaigns.

• Order ByDefaultMenu Order

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

  ChoicesMenu OrderDateTitle

• OrderDefaultAscending

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

  ChoicesAscendingDescending

• Category SlugDefaultEmpty

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

• PaginateDefaultOff

  Follow the page number in the URL and print a pagination list under the grid.

  Shown when Layout is "Card Grid"

Display

• Row ClassesDefaultrow

  Classes on the row wrapping the cards. Enter "none" to emit the columns without a row.

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

• Column ClassesDefaultcol-lg-4 col-sm-6 mb-4

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

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

• Card ClassesDefaulti-products

  Style classes on each campaign card.

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

• Category Badge ClassesDefaultbadge

  Style classes on the little category tag over a card image.

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

• Show Category BadgeDefaultOn

  Shows which category a campaign belongs to on its card. Turn it off where every campaign in the grid is from the same category.

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

• Show DescriptionDefaultOn

  Shows a short summary of the campaign under its name on the card.

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

• Show Hover DetailsDefaultOn

  The location, statistics strip and creator row revealed when a card is hovered.

  Shown when Layout is "Card Grid" or "Campaign - Related Campaigns"

Meter

• Show Funding MeterDefaultOn

  Shows the progress bar and the readout of how far a campaign has got towards its goal.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Meter ClassesDefaultmb-3

  Style classes on the meter as a whole, which is what sets the gap under it.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Meter Readout Row ClassesDefaultd-flex justify-content-between mb-2

  Style classes on the line above the bar. The default puts the funded figure and the days left at opposite ends of it.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Meter Readout ClassesDefaultEmpty

  Style classes on each of the two counting figures in that line.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Meter HeightDefault0.25rem

  How thick the progress bar is drawn. Give it a length, such as 0.25rem or 4px.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Meter Fill ClassesDefaultbg-color

  Style classes on the filled part of the bar, which is what colours it.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Funded Count SpeedDefault1200

  Milliseconds the percentage takes to count up. A campaign can override this on its own edit screen to stagger a row of meters.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Days Left Count SpeedDefault1200

  How long the days left figure takes to count up, in thousandths of a second.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Funded LabelDefaultFunded

  Follows the percentage sign in the left-hand readout.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Days Left LabelDefaultDays Left

  Follows the days figure in the right-hand readout above the bar.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Show Days Left ReadoutDefaultOn

  Shows how long a campaign has left beside the funded figure. Turn it off for campaigns that run with no closing date.

  Shown when Layout is "Card Grid" or "Campaign - Funding Meter" or "Campaign - Funding Sidebar" or "Campaign - Related Campaigns"

• Currency SymbolDefault$

  The symbol placed in front of every money figure this block prints.

Statistics

• Pledged LabelDefaultPledged

  Names the amount raised so far in the statistics strip.

• Participants LabelDefaultParticipants

  Names the count of people who have given in the statistics strip.

• Contributions LabelDefaultContributions

  Names the count of individual gifts in the statistics strip.

• Days Remaining LabelDefaultdays remaining

  Follows the number of days in the statistics strip. It is written in lower case because it runs on from the figure.

• Creator PrefixDefaultBy

  Written in front of the name of whoever is running the campaign.

Sidebar

• Sidebar Meter ClassesDefaultmt-4 mb-3

  Style classes on the meter inside the funding sidebar, which is what sets the space above and below it there.

  Shown when Layout is "Campaign - Funding Sidebar"

• Sidebar Meter Readout Row ClassesDefaultd-flex justify-content-between mb-2 text-uppercase

  Style classes on the row of readouts above the sidebar meter.

  Shown when Layout is "Campaign - Funding Sidebar"

• Sidebar Meter Readout ClassesDefaultcounter-xs h6 mb-0

  Style classes on each counting readout in the sidebar meter, which is what sizes it beside the pledged total.

  Shown when Layout is "Campaign - Funding Sidebar"

• Pledged Heading ClassesDefaultfw-bold h2 mb-2 color

  Style classes on the amount raised at the top of the sidebar, which is what sets it large, bold and in the accent colour.

  Shown when Layout is "Campaign - Funding Sidebar"

• Statistic Heading ClassesDefaultfw-bold h1 mb-2

  Style classes on each figure under it, such as the number of backers and the days left.

  Shown when Layout is "Campaign - Funding Sidebar"

• Statistic Label ClassesDefaulttext-uppercase text-smaller op-07

  Style classes on the wording under each of those figures, which is what sets it small and quiet in capitals.

  Shown when Layout is "Campaign - Funding Sidebar"

• Goal LabelDefaultpledged of %s Goal

  The goal figure replaces %s.

  Shown when Layout is "Campaign - Funding Sidebar"

• Divider ClassesDefaultline line-sm

  Style classes on the rules that separate one figure from the next down the sidebar.

  Shown when Layout is "Campaign - Funding Sidebar"

Updates

• Update Card ClassesDefaultcard mb-4

  Style classes on each progress update, which is what boxes it and spaces it from the next.

  Shown when Layout is "Campaign - Progress Updates"

• Update Body ClassesDefaultcard-body bg-light

  Style classes on the padded area inside an update, which is what tints it.

  Shown when Layout is "Campaign - Progress Updates"

• Update Title ClassesDefaultmb-2

  Style classes on the heading of an update.

  Shown when Layout is "Campaign - Progress Updates"

• Update Text ClassesDefaultmb-0 mt-3

  Style classes on the body of an update, which is what sets the gap between it and the heading above.

  Shown when Layout is "Campaign - Progress Updates"

Highlights

• Highlights List ClassesDefaultlist-group col-5 mb-4

  Style classes on the list of campaign highlights, which is what sets its width and draws it as a joined list.

  Shown when Layout is "Campaign - Highlights List"

• Highlight Item ClassesDefaultlist-group-item

  Style classes on each line of that list.

  Shown when Layout is "Campaign - Highlights List"

Video

• Video Wrapper ClassesDefaultentry-image mt-2

  Style classes on the block around the campaign video.

  Shown when Layout is "Campaign - Video"

• Video Inner ClassesDefaultmb-2

  Style classes on the frame that holds the video itself, inside that block.

  Shown when Layout is "Campaign - Video"

• Video WidthDefault912

  The width of the video, in pixels. Together with the height it fixes the shape of the frame, so the page does not jump as the video loads.

  Shown when Layout is "Campaign - Video"

• Video HeightDefault513

  The height of the video, in pixels. Keep it in proportion with the width so the picture is not stretched.

  Shown when Layout is "Campaign - Video"

• Gallery ClassesDefaultmasonry-thumbs row row-cols-6 grid-container

  Style classes on the campaign gallery, which is what arranges the pictures into a packed grid and sets how many fit across it.

  Shown when Layout is "Campaign - Gallery"

• Gallery Item ClassesDefaultgrid-item

  Style classes on each picture in that gallery.

  Shown when Layout is "Campaign - Gallery"

• Enlarged Every Nth ImageDefault3

  0 leaves every image the same size.

  Shown when Layout is "Campaign - Gallery"

• Tagline ClassesDefaulttext-muted mb-1

  Style classes on the one-line summary under a campaign title.

  Shown when Layout is "Campaign - Tagline"

• Location IconDefaultbi-geo-alt-fill

  The icon shown in front of the place a campaign is based, named as a class.

  Shown when Layout is "Campaign - Location"

Reviews

• Reviews ShownDefault0

  0 shows every approved review left on the campaign.

  Shown when Layout is "Campaign - Reviews"

• Reviews Row ClassesDefaultrow

  Style classes on the row that holds the reviews.

  Shown when Layout is "Campaign - Reviews"

• Review ClassesDefaultcol-12 mb-5 pb-4 border-bottom

  Style classes on each review, including the rule the design draws under it.

  Shown when Layout is "Campaign - Reviews"

• Last Review ClassesDefaultcol-12 mb-5

  Style classes on the final review, which the design leaves without the closing rule.

  Shown when Layout is "Campaign - Reviews"

• Review Header ClassesDefaultd-flex align-items-center mb-3

  Style classes on the line holding the portrait, the name and the rating.

  Shown when Layout is "Campaign - Reviews"

• Reviewer Portrait ClassesDefaultrounded-circle me-3

  Style classes on the reviewer's portrait.

  Shown when Layout is "Campaign - Reviews"

• Reviewer Portrait SizeDefault40

  How wide and tall the portrait is drawn, in pixels.

  Shown when Layout is "Campaign - Reviews"

• Reviewer Name ClassesDefaultmb-1 h6

  Style classes on the reviewer's name.

  Shown when Layout is "Campaign - Reviews"

• Review Date ClassesDefaulttext-muted mb-0 fw-normal

  Style classes on the date under the reviewer's name.

  Shown when Layout is "Campaign - Reviews"

• Review Date FormatDefaultF j, Y

  How the date is written. Leave it as it is to follow the site's own date setting.

  Shown when Layout is "Campaign - Reviews"

• Rating ClassesDefaultms-auto mb-auto

  Style classes on the star rating, which is what pushes it to the end of the line.

  Shown when Layout is "Campaign - Reviews"

• Full Star IconDefaultbi-star-fill color text-smaller

  The icon used for a whole star, named as a class.

  Shown when Layout is "Campaign - Reviews"

• Half Star IconDefaultbi-star-half color text-smaller

  The icon used when a rating lands on a half star.

  Shown when Layout is "Campaign - Reviews"

• Empty Star IconDefaultbi-star color text-smaller

  The icon used for the stars a rating does not reach.

  Shown when Layout is "Campaign - Reviews"

Posted By

• Card ClassesDefaultcard mt-4

  Style classes on the card that introduces whoever posted the campaign.

  Shown when Layout is "Campaign - Posted By Card"

• Card Header ClassesDefaultcard-header

  Style classes on that card's top strip.

  Shown when Layout is "Campaign - Posted By Card"

• Card Body ClassesDefaultcard-body

  Style classes on the part of the card holding the portrait and the biography.

  Shown when Layout is "Campaign - Posted By Card"

• Posted By WordingDefaultPosted by

  The words in front of the name at the top of the card.

  Shown when Layout is "Campaign - Posted By Card"

• Portrait Wrapper ClassesDefaultauthor-image

  Style classes on the box around the portrait, which is what floats it beside the biography.

  Shown when Layout is "Campaign - Posted By Card"

• Portrait SizeDefaultMedium

  Which stored size of the portrait is served. The card draws it at the size the file arrives in, so a larger choice makes a larger portrait.

  ChoicesThumbnailMediumLargeFull SizeShown when Layout is "Campaign - Posted By Card"

• Portrait ClassesDefaultrounded-circle

  Style classes on the portrait itself.

  Shown when Layout is "Campaign - Posted By Card"

Share

• Share Button IDDefaultnotifylink

  The name the share menu uses to attach itself to its button. Change it only if another element on the page already answers to it.

  Shown when Layout is "Campaign - Share Menu"

• Share Button IconDefaultbi-share btn btn-secondary

  The icon that opens the share menu, named as a class.

  Shown when Layout is "Campaign - Share Menu"

• Share Button TooltipDefaultShare

  The wording shown when a visitor rests on the share button, and the name a screen reader announces.

  Shown when Layout is "Campaign - Share Menu"

• Share Menu ClassesDefaultdropdown-menu dropdown-menu-end

  Style classes on the menu that drops open, including which edge it lines up with.

  Shown when Layout is "Campaign - Share Menu"

• Share Link ClassesDefaultdropdown-item

  Style classes on each row of the share menu.

  Shown when Layout is "Campaign - Share Menu"

• Share OptionsDefaulta preset list of 4 rows

  The ways a visitor can pass this campaign on, in the order they are listed.

  Shown when Layout is "Campaign - Share Menu"

  Each row of Share Options takes:

  • DestinationDefaultFacebook

    Where this row sends the campaign.

    ChoicesFacebookTwitterWhatsAppLinkedInEmailEmbed code

  • LabelDefaultEmpty

    Wording of this row.

  • IconDefaultEmpty

    The icon in front of the wording, named as a class.

Filters

• Filter Bar ClassesDefaultinput-group input-group-lg mb-4

  Style classes on the search and filter bar, which is what joins the field, the category picker and the button into one large control.

  Shown when Layout is "Search & Filter Bar"

• Search Field ClassesDefaultform-control w-auto

  Style classes on the box a visitor types into.

  Shown when Layout is "Search & Filter Bar"

• Search PlaceholderDefaultSearch..

  The faint prompt inside the empty search box. It disappears as soon as the visitor types.

  Shown when Layout is "Search & Filter Bar"

• Search Field Accessible NameDefaultText input with dropdown button

  Read out by assistive technology in place of a visible label.

  Shown when Layout is "Search & Filter Bar"

• Category Select ClassesDefaultform-select col col-4

  Style classes on the category picker, which is what sets how much of the bar it takes.

  Shown when Layout is "Search & Filter Bar"

• Category Select Accessible NameDefaultFilter campaigns by category

  Read out by assistive technology in place of a visible label, since the picker carries none.

  Shown when Layout is "Search & Filter Bar"

• All Categories LabelDefaultAll

  The first option. Every other option is a live campaign category.

  Shown when Layout is "Search & Filter Bar"

• Search Button ClassesDefaultbtn bg-color text-white border-0

  Style classes on the search button, which is what fills it with the accent colour.

  Shown when Layout is "Search & Filter Bar"

• Search Button IconDefaultuil uil-search

  The icon on the search button, named as a class. The button carries no wording, so the icon is all a visitor sees.

  Shown when Layout is "Search & Filter Bar"

• Search Button Accessible NameDefaultSearch campaigns

  The button shows an icon only, so it needs a name of its own.

  Shown when Layout is "Search & Filter Bar"

• Show Sort LinksDefaultOn

  Shows the two shortcuts beside the bar that reorder the grid by popularity or by how recent a campaign is.

  Shown when Layout is "Search & Filter Bar"

• Popular Link TextDefaultPopular

  Wording on the shortcut that puts the best supported campaigns first.

  Shown when Layout is "Search & Filter Bar"

• Popular Link ClassesDefaultbutton button-rounded

  Style classes on that shortcut.

  Shown when Layout is "Search & Filter Bar"

• Newest Link TextDefaultNewest

  Wording on the shortcut that puts the most recently launched campaigns first.

  Shown when Layout is "Search & Filter Bar"

• Newest Link ClassesDefaultbutton button-rounded button-dark button-black

  Style classes on that shortcut. The design gives it the darker treatment so the two shortcuts can be told apart.

  Shown when Layout is "Search & Filter Bar"

Links

• Campaigns Page SlugDefaultexplore

  The page a campaign links back to. Resolved to a permalink at render, so it survives import.