Three Column Image + Text
modules/Three Col Image Text.module
Renders a section heading above a grid of image-plus-text cards, each card showing an image, an H4 card heading and rich text copy. Cards come from an unlimited add_card repeater defaulting to three items, and a global add_shadow boolean toggles a drop shadow on the card images. The style group controls background color and background image for the section, section heading color, a shared card heading color, card content alignment (left, center, right) and responsive spacing at four breakpoints. There is no JavaScript. A custom ID field supports anchor links.
Example: On a zonar.com solutions page, an editor would add three cards such as Track, Inspect and Comply, each with a product photo, a short heading and two sentences of supporting copy.
Where we work
Offices
Complete with stunning views of Mt. Rainier, our Pacific Northwest location in Seattle, Washington offers plenty of space to work in the office or drop in from working at home. We also have an office located in Lakeland, Florida.
Offices
Complete with stunning views of Mt. Rainier, our Pacific Northwest location in Seattle, Washington offers plenty of space to work in the office or drop in from working at home. We also have an office located in Lakeland, Florida.
Offices
Complete with stunning views of Mt. Rainier, our Pacific Northwest location in Seattle, Washington offers plenty of space to work in the office or drop in from working at home. We also have an office located in Lakeland, Florida.
Three Column Image Text Card
modules/Three Col Image Text Card.module
Renders a section heading above a repeatable grid of cards very similar to Three Col Image Text, but with per-card styling: each card in the unlimited add_card repeater (default three) has its own background image, background color and card heading color in addition to the image, heading and rich text fields. Section-level style options include background image and color, section heading color, card content alignment and four-breakpoint spacing, and a global add_shadow boolean puts a shadow on card images. JavaScript uses matchHeight to equalize the heights of the cards, their text areas and their description blocks across the row.
Example: On a zonar.com industries overview page, an editor would build three visually distinct cards for Trucking, Pupil Transportation and Vocational fleets, giving each card its own brand-tinted background color.
Where we work
Offices
Complete with stunning views of Mt. Rainier, our Pacific Northwest location in Seattle, Washington offers plenty of space to work in the office or drop in from working at home. We also have an office located in Lakeland, Florida.
Offices
Complete with stunning views of Mt. Rainier, our Pacific Northwest location in Seattle, Washington offers plenty of space to work in the office or drop in from working at home. We also have an office located in Lakeland, Florida.
Offices
Complete with stunning views of Mt. Rainier, our Pacific Northwest location in Seattle, Washington offers plenty of space to work in the office or drop in from working at home. We also have an office located in Lakeland, Florida.
Three Column Card With Heading + Text
modules/Three Column Card With Heading Text.module
Renders an optional H2 section heading above a grid of simple cards, each with an image, a paragraph-styled card heading and rich text body, sourced from an unlimited card_group repeater. A card_content_position choice aligns card content left, center (default) or right, and the style group covers section background image and color, heading text color, card heading color, and desktop/laptop/tablet/mobile spacing. JavaScript uses matchHeight to keep the card images, headings and paragraph blocks equal height across the row. A custom ID enables anchor linking.
Example: On a zonar.com resources or benefits section, an editor would add three centered cards like Reduce Downtime, Improve Safety and Simplify Compliance, each with an illustrative icon image and a short blurb.
How it works
1. Integrate Zonar into X
text supporting this section. text supporint this section. text supporint this section. text supporint this section
1. Integrate Zonar into X
text supporting this section. text supporint this section. text supporint this section. text supporint this section
1. Integrate Zonar into X
text supporting this section. text supporint this section. text supporint this section. text supporint this section
Three Column Text With Title
modules/Three Column Text With Title Module.module
Renders an intro block with an optional H2 heading and rich text, followed by a grid of text-only cards from an unlimited card_group repeater. Each card has an H6 heading, rich text body and an optional button with six style variants (primary through quinary plus simple), three sizes defaulting to small, and its own alignment. Section options include card content alignment (left, center, right; default center), a content max width, background image and color, heading color, four-breakpoint spacing and a custom ID. JavaScript matchHeights the card headings and bodies, and also adds smooth animated scrolling for any on-page anchor links.
Example: On a zonar.com pricing or support page, an editor would show three columns like For Small Fleets, For Enterprise and For Government, each with a short description and a Contact Sales button.
We go the extra mile to get you up and running.
Installing smart fleet management technology is complicated, especially for those unfamiliar with the solution and overall process. We set you up for success—literally. Start to finish, our field service professionals work with you to ensure your Zonar installation goes smoothly and that you’re comfortable using the solution.
1. Integrate Zonar into X
text supporting this section. text supporint this section. text supporint this section. text supporint this section
1. Integrate Zonar into X
text supporting this section. text supporint this section. text supporint this section. text supporint this section
1. Integrate Zonar into X
text supporting this section. text supporint this section. text supporint this section. text supporint this section
Four Column Icon
modules/Four Col Icon Module.module
A simple four-column icon section with a heading, a rich-text intro description, and a repeater of up to four cards each containing an icon image and a rich-text description (no per-card title field). Style options cover heading color, background color and responsive spacing for desktop, laptop, tablet and mobile, plus a custom anchor ID. There is no JavaScript.
Example: Used on the smart fleet technology overview page to show four icons for visibility, safety, compliance and efficiency, each with a one-sentence supporting blurb.
Four Column Icon With Image + Text
modules/Four Col Icon With Image Text Module.module
A two-part section: first a heading, rich-text description and an unbounded repeater of icon cards each with an icon image, title and rich-text description; below that, a two-column content block with its own title, a full Zonar button group (text, link, three sizes, six styles from primary to simple, alignment) and an image, plus a separate decorative circle image field. Style controls include section background, heading color, icon title color, a distinct content background color for the two-column block, and responsive spacing at four breakpoints. A one-line script applies jQuery matchHeight to the card icons so rows align, and a custom anchor ID is available.
Example: On the pupil transportation industry page, an editor lists four icon cards for GPS bus tracking, student ridership, inspections and driver coaching, then uses the lower block to promote the full solution brochure with a download button and product image.
Smart solutions for safety, efficiency and reliability.
GPS bus tracking
Log on to Zonar Ignition™ to track each school bus online, in real time, and in detail.
GPS bus tracking
Log on to Zonar Ignition™ to track each school bus online, in real time, and in detail.
GPS bus tracking
Log on to Zonar Ignition™ to track each school bus online, in real time, and in detail.
GPS bus tracking
Log on to Zonar Ignition™ to track each school bus online, in real time, and in detail.
See the whole suite of modern fleet tech.
Four Column Text Icon Card
modules/Four Col Text Icon Card.module
A minimal card grid section with an unbounded repeater of cards, each holding an icon image, a short heading like Track, and a rich-text description. Styling is limited to section background color, heading color and responsive spacing for desktop, laptop, tablet and mobile, plus a custom anchor ID. There is no section-level heading field and no JavaScript.
Example: Used on the homepage or a telematics solution page to summarize the platform in four steps such as Track, Inspect, Comply and Optimize, each with an icon and a sentence.
Six Column Icon With Text and Link
modules/Six Col Icon With Text And Link.module
Renders a section heading above a six-column strip of linked icons with short rich text labels, built from an unlimited add_icon repeater where each item has a link, an image and rich text. Style options include a background image, background color, section heading color and responsive spacing for four breakpoints, plus a custom ID. The JavaScript initializes a Slick carousel on the row: six static slides on desktop, collapsing to a swipeable 4-slide carousel with arrows below 767px and 2 slides below 580px.
Example: On the zonar.com homepage, an editor would add six industry icons such as School Bus, Trucking, Vocational, Transit, Construction and Agriculture, each linking to its industry solutions page and scrollable on phones.
We know what’s on the line. We work late and push hard for small to mid-sized businesses, enterprise fleets, and public sector organizations across the Americas. To us, you’re the one in a million.
Industry Cards Grid
modules/Industry Cards Grid.module
A card grid for showcasing industries, with an eyebrow, heading (h2, h3 or h4), rich-text subheading, and a cards repeater (min 1, max 12). Each card can use a solid color or image style and has a title, rich-text description, icon, image, background color with an optional two-color gradient, individual text, title, description and CTA colors, a link and an editable link label. Layout controls include auto, 2, 3 or 4 columns, gap, minimum card height, corner radius, padding and vertical content alignment, while an effects group toggles hover lift, image hover zoom and four shadow levels; section-level colors and left or center text alignment plus responsive spacing round it out. There is no client-side JavaScript, hover effects are pure CSS.
Example: On the homepage an editor builds a three-column grid of six cards for trucking, pupil transportation, vocational fleets, transit, construction and food distribution, each with a background photo and a Learn more link to its industry page.
Pain Points Cards
modules/Pain Points Cards.module
A vertical side-nav tabbed section with a heading, rich text subheading, and 1 to 7 tabs, each showing a card layout of customer pain points and solutions. Each tab chooses between a Single layout (one large card) or Double layout (two stacked cards), and contains a main card, a bottom card, and 1 to 6 solution cards; every card offers a dark or light overlay theme, background image, overlay opacity, kicker text, title or product image, rich text description and a link. Style fields control heading, subheading, kicker, background, active tab and tab text colors plus card border radius, grid gap and responsive spacing. The JavaScript implements accessible ARIA tabs with click activation and arrow-key, Home and End keyboard navigation, showing only the active tab panel.
Example: On a solutions overview page, an editor would create tabs for pain points like Rising fuel costs, Compliance risk and Driver safety, each revealing photo cards that pair the problem with the Zonar products that solve it.
Brand Features (Feature Cards)
modules/Brand Features.module
Renders a card grid section with an eyebrow, a heading with selectable tag (h2, h3 or h4), a richtext subheading, and a cards repeater (min 1, max 12, default 3) where each card has a brand name, richtext description, logo image, and an optional link with label. Extensive style controls include section background and text colors, left or center text alignment, a card variant choice (bordered, filled or plain), border color/width/style (solid, dashed, dotted, double), title/text/link colors, an accent bar toggle, and a shadow choice (none, sm, md, lg). Layout options set columns (auto, 2, 3 or 4), gap, corner radius and card padding, plus responsive spacing at three breakpoints and a custom ID. No JavaScript is required.
Example: On a Zonar partners or platform overview page, an editor would create a three-column grid of cards for OEM partners like Daimler or Peterbilt, or for product families like EVIR, ZFuel and Ground Traffic Control, each with a logo, blurb and Learn more link.
Value Prop Icon Cards
modules/value-prop-icon-cards.module
A simple value proposition grid with a section heading and subheading (heading levels selectable from h2 to h4 for both section and cards) and a cards repeater of 1 to 8 items, each with an icon, title, description and optional link that makes the card clickable. Styles include 2, 3 or 4 columns, padding presets, header and card content alignment, three icon sizes, icon shape (none, circle, square), card style (flat, card, bordered), and colors for background, headings, icons, icon backgrounds, card titles, text, card backgrounds and borders. The module is static with no JavaScript.
Example: On the company homepage or a solutions overview page, a 3-column row of cards like 'GPS Tracking', 'ELD Compliance' and 'Fleet Maintenance', each with an icon and a short blurb linking to the product page.
Landing Page Benefits Grid
modules/lp-benefits-grid.module
A highly configurable benefits section that renders a repeater of benefit cards (2 to 12) in one of seven layouts: 3-column, 2-column, 4-column, bento grid, icon list, numbered step flow, or feature cards. Each benefit offers a preset icon chosen from ten fleet-themed SVGs (truck, shield, chart-up, clock, dollar, wrench, route, fuel, eye, alert) or a custom uploaded icon, plus a stat callout, step number, badge label, bento card size (1x1 up to 3x2), a light-text toggle, per-card background override, headline and rich text description. The extensive styles group controls background, text, icon and stat colors, card style (flat, bordered, shadowed), padding and gap presets, icon size and shape, card radius, badge and step-number styling including step shape and border, and text and vertical alignment. There is no JavaScript; all layouts are pure CSS.
Example: On a GPS fleet tracking landing page, an editor builds a 3-column grid of six benefits like 'Cut fuel costs', 'Improve driver safety' and 'Simplify ELD compliance', each with a preset icon and a stat callout such as '15% fewer idle hours'.
Landing Page Product Card Row
modules/lp-product-card.module
A product showcase section with eyebrow, rich text heading and subheading, and a cards repeater (up to 4 products). Each card takes a product name, tagline, priority value, an image gallery repeater (up to 8 images with captions), a features list and a best-for list (each icon plus text repeaters), a CTA label and link, and a per-card toggle to emit Product schema markup. Styles control padding presets, card radius and shadow depth (none to deep), gallery aspect ratio, header alignment, button style and size from the theme system, background, card background, text and accent colors, and card heading level (h3 or h4). JavaScript enhances each gallery's native scroll-snap track with prev/next buttons, clickable dot pagination with roving tabindex and arrow/Home/End keyboard support, and respects prefers-reduced-motion.
Example: A hardware landing page presenting the Zonar V4 telematics control unit and the tablet, each card with a swipeable photo gallery, feature bullets like 'Automatic ELD logging', a 'Best for' list by fleet type, and a 'Talk to sales' button.
