41 articles
Shortcodes
The full shortcode library: buttons, tabs, accordions, pricing, counters, carousels, modals, and more.
AnimationsAnimations Canvas ships scroll-triggered entrance animations powered by the Animate.css class set. Add a attribute to any element and the animation…Hover AnimationsHover Animations Hover animations let you animate an element in and out when the mouse enters and leaves a parent container. This is ideal for…Lazy LoadingLazy Loading Lazy loading defers image downloads until they are about to scroll into view, cutting initial page weight and speeding up first paint.…SectionsContent SectionsShape DividersShape Dividers Shape dividers place a decorative SVG shape at the top or bottom edge of a section, creating waves, slants, mountains, clouds, and…Item OverlaysItem Overlays Item overlays layer content on top of an image that reveals on hover, perfect for portfolio thumbnails, product cards, and gallery…Pricing BoxesPricing Boxes Pricing boxes lay out a plan's title, price, feature list, and call-to-action in a single card. The wrapper stacks four sections in…ButtonsButtons Canvas ships its own button shortcode built on the class, separate from Bootstrap's . It gives you a base pill/square button with size,…Flip BoxesFlip Cards Flip cards reveal extra content on hover with a 3D flip. The front shows an image or icon; the back slides in with text and an action. By…Video BackgroundsVideo Backgrounds Video backgrounds play a muted, looping HTML5 video behind section content for an immersive hero. Canvas wraps the video in and…Youtube BackgroundsYoutube Background VideoTabsTabs Canvas tabs are built on Bootstrap's tab component with a themed wrapper. They organise content into switchable panels with clean, responsive…TogglesToggles A toggle is a single collapsible block: a clickable header that slides its content open and shut. Toggles are independent (unlike accordions,…AccordionsAccordions An accordion is a group of collapsible panels where opening one item closes the others. It is the go-to pattern for FAQs, feature…Responsive SliderResponsive Slider The FlexSlider-based responsive slider ( ) is Canvas's lightweight image and content slider. It fits any container width, supports…CarouselCarousel The Canvas carousel is an Owl Carousel wrapper for horizontally scrolling any content: images, portfolio items, blog posts, products, or…LightboxLightbox The lightbox opens images, galleries, videos, and inline content in a focused overlay using Magnific Popup. Add a attribute to a link and…Modal on LoadModal on Load The Modal on Load shortcode opens a Magnific Popup automatically when the page finishes loading. It is ideal for welcome offers,…ChartsCharts Canvas integrates Chart.js for responsive, animated data visualisations: bar, line, area, pie, doughnut, radar, polar area, bubble, and…Google MapsGoogle Maps The Google Maps shortcode embeds an interactive map using the Google Maps JavaScript API. Add the class to any container, size it with…DividersDividers Dividers draw a thin horizontal rule with a centered icon to break up sections of content. The wrapper renders lines on either side of an…IconsIcons Canvas bundles several icon fonts through a single file, which imports Font Awesome, Bootstrap Icons, and Unicons (Line Icons). You reference…CountdownCountdown The Countdown shortcode renders a live countdown (or count-up) timer. Add the class to an element and set the target date with attributes.…NotificationsNotifications The Notifications shortcode shows Bootstrap toast messages triggered by a click. Configure the message, type, position, and behavior…Text RotatorsText Rotators The Text Rotator cycles through a list of words in place, either with an animated swap (Morphext) or a typewriter effect (Typed.js). It…Conditional FormsConditional Form Fields The Conditional shortcode shows, hides, enables, or disables a form field based on the value or validity of another field. It…Scroll DetectRequires licenseScroll Detect Scroll Detect exposes an element's scroll progress as CSS custom properties and state classes, which you can wire into transforms and…Viewport DetectRequires licenseViewport Detect Viewport Detect toggles CSS classes on an element (or a separate target) when it enters or leaves the viewport, using an…Custom CursorsCustom Cursors The Custom Cursor shortcode replaces the default pointer with an animated follower dot, adding a modern, tactile feel to creative and…Read MoreRead More The Read More element collapses long content to a comfortable preview height with a soft gradient fade, then expands it on demand via a…Feature BoxesFeature Boxes Feature boxes present an icon (or number/image) alongside a heading and short description, ideal for service lists, benefit grids, and…Process StepsProcess Steps Process steps show a numbered, multi-stage flow such as a checkout, onboarding, or how-it-works sequence. The list holds one per step,…CountersCounters Counters animate a number from a starting value up to a target when they scroll into view, great for stats like customers served, projects…Team MembersTeam Members Showcase your team with the shortcode. Each member combines a photo, name, role, an optional description, and social icons. Works in a…TestimonialsTestimonials Display customer reviews and social proof with the testimonial shortcodes. Canvas ships a carousel-based testimonial ( ) with an author…ClientsClients Display partner and client logos in a responsive grid with the shortcode. Logos sit in a Bootstrap grid and fade until hovered, keeping the…Promo BoxesPromo Boxes Promo boxes are call-to-action banners that pair a headline with a button. Use the shortcode for a highlighted strip, then layer…Styled IconsStyled Icons Styled icons turn a single icon glyph into a decorated shape: bordered, dark, light, or plain, in several sizes. Add the base class to…Social IconsSocial Icons Social icons are branded, hover-animated links, one per network. Each holds the glyph twice (the second copy slides in on hover). Brand…Fancy HeadingsFancy Headings Canvas gives headings extra structure and emphasis with several title shortcodes. Use for bordered/underlined section titles, for a…FAQsFAQs Canvas builds FAQ sections from the toggle shortcode wrapped in a container. Each question is a panel that expands on click, and an optional…