Component Library — Elements

Built as a primary, all-purpose call-to-action button. Includes its own label, link, and visual style suitable for most actions across the site.

Built as a low-emphasis tertiary button for secondary or supporting actions. Visually lighter than the primary Button, suitable for inline links and de-emphasised CTAs.

Built as a play icon button for triggering video or media playback. Includes its own icon and click interaction.

Built as a small arrow used to indicate movement or direction within other elements. Often paired with links, swipers, or list items to signal navigation.

Built to display a single blog post preview as a card. Includes a thumbnail image, category, title, and a short summary.

Built to summarise one product capability in a compact card. Includes an icon or visual, title, and short description of the capability.

Trade and service businesses

Tradespeople and service providers use van tracking to streamline their operations. The system helps increase job completion rates and enhance customer service.
With accurate location data, dispatchers can respond quickly to urgent service calls and keep customers informed about arrival times.

Built to feature a single case study as a card with branding and metrics. Includes a customer logo, headline, short quote, and a link to read more.

""RAM Tracking has given us a lot of confidence in tracking and traceability of the fleet.""

John Greening

Director

Built to display a case study entry within a larger catalogue or grid. Includes a thumbnail, customer name, industry tag, and a link to the full story.

This is some text inside of a div block.

Built as a modal pop-up that surfaces a case study with detailed copy and visuals. Includes a quote, supporting content, and a close action.

Built to display a single contact method or office location in card form. Includes contact details, an optional image or icon, and a call-to-action.

Built as a single slide within a features swiper carousel. Includes a visual, title, and short description for one feature.

Built to display a single resource link such as a guide, article, or tool. Includes a thumbnail, title, short description, and a link to the resource.

Blog

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

See more

Built to display a single industry within an industries catalogue. Includes a representative image, industry name, and a link to the industry page.

Construction

3,000+

Construction companies trusted us

Built to introduce a single team member with photo and role. Includes a portrait, name, job title, and optional short bio.

Nick McClellan

Managing Director

Joined RAM in 2008

With an in-depth knowledge of SalesForce (CRM) and related cloud-based applications Scottmanages RAM's internal business processes and operations.With an in-depth knowledge of SalesForce (CRM) and related cloud-based applications Scottmanages RAM's internal business processes and operations.With an in-depth knowledge of SalesForce (CRM) and related cloud-based applications Scottmanages RAM's internal business processes and operations.With an in-depth knowledge of SalesForce (CRM) and related cloud-based applications Scottmanages RAM's internal business processes and operations.

Interests: Tech,Football

Built to display a single pricing tier with its features and call-to-action. Includes a plan name, price, feature list, and a primary button.

Built as the updated pricing card variant with refreshed styling. Includes the plan name, price, feature list, and a primary call-to-action button.

Built to articulate a single problem or pain point in card form. Includes an icon, problem title, and supporting copy explaining the issue.

Heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Built to highlight a single reason to choose the product or company. Includes a visual or icon, headline, and short supporting copy.

Heading

Built as a reusable icon wrapper for any list or grid item. Provides consistent sizing, alignment, and styling for icons across the site.

Built as a logo or icon used inside tab triggers. Identifies the tab visually alongside its label.

Built as an inline promo block driving visitors to relevant guide content. Includes a heading, short copy, and a link to the guide library.

Useful Guides

Practical guides designed to help you manage your fleet more efficiently.

Built as an inline promo block surfacing the pricing or fleet calculator. Includes a heading, short copy, and a link to launch the calculator.

Built as a single benefit row inside a benefits list. Includes an icon, title, and short supporting copy.

Built as a bullet point paired with an icon for use in feature or benefit lists. Includes the icon and a short line of supporting text.

Built as a single question and answer pair inside an FAQ list. The question is visible by default and the answer expands on click.

Built as a compact feature row used inside larger feature sections. Includes an icon, title, and a short description of the feature.

Local support when you need it

Speak to real people who understand your industry

Built as a single industry entry inside an industries section or list. Includes a visual, industry name, and a short description.

Built as a single statistic entry styled with the pink stats variant. Includes a prominent number, supporting label, and styling matching the pink stats layout.

Built as a single line item inside a pricing card's feature list. Includes an icon (such as a checkmark) and the feature description.

Built as a single row inside a detailed pricing table. Includes the feature label and its availability or value across pricing tiers.

Built as a structured row inside a pricing comparison list. Includes columns for the feature label and per-tier values or indicators.

Built as a single step inside a process or how-it-works section. Includes a step number, title, and short description of that step.

01

Choose your tracking solution

Select the right tracking option for your vehicles, equipment or fleet based on what you need to monitor.

Built as a single statistic entry inside a stats section. Includes a prominent number and a short supporting label.

Built as a reusable text block for use inside structured layouts. Includes space for a heading and supporting body copy.

Built as a centred section header used to introduce a section. Includes space for an optional eyebrow, headline, and supporting copy aligned to the centre.

Built as a left-aligned section header used to introduce a section. Includes space for an optional eyebrow, headline, and supporting copy aligned to the left.

Built as a single solution entry inside a solutions list or grid. Includes a visual, title, and short description for one solution.

Built as a single tracking solution entry used inside the tracking solutions section. Includes a visual, title, and short description.

Built as the container layout for the pink stats variant. Holds multiple pink stats items in a structured arrangement.

Built as the prominent number display inside the pink stats layout. Used to show a single headline figure with the pink styling.

Built as a single content slide inside a feature swiper or carousel. Includes a heading, supporting copy, and an optional CTA.

Track Every Vehicle in Real-Time

Get 24/7 access to your entire fleet with our live vehicle tracking app. Instantly see where your vehicles are, monitor routes, and stay in full control of daily operations from one simple mobile app.

• Live vehicle location with real-time updates
• Better route planning and faster response times
• Full visibility over drivers and vehicles

Built as a single image slide inside a feature swiper or carousel. Displays a single feature visual with consistent sizing and styling.