Text Link

Component Guide

Lumos | v2.0.8
Style Guide
Framework Guide
Table of Contents
Note: The Table of contents only works on the published site, not in the designer.

Intro to Components

Components allow you to maintain a consistent, efficient, and scalable website by creating customizable blocks from elements and child elements. Reuse those blocks across your site, and modify them in a single place to avoid individually revising each recurring layout. Throughout Lumos components are used for Navbars, Footers, Buttons, and specific sections or layouts like a CTA section. This page should get you up to speed on how to edit components and also includes a list of the components used in this site below. For a full guide on using components check out the Webflow University page.

How to Edit a Component

To make the same changes across all instances of a component, you’ll need to edit the main component. You can edit the main component on any component instance by:

  • Double-clicking the component instance
  • Right-clicking the instance and choosing Edit component
  • Selecting the instance and clicking the “pencil” icon in the label
  • Selecting the instance and clicking the Edit component button in the Style, Element settings, or Interactions panels
  • Selecting the instance and using the keyboard shortcut Enter

When you do this all other elements on the page will get a dark overlay to show that you are updating the main component and that any changes to it will affect all other instances of that component.

Understanding component properties

Component properties let you define specific elements within a component that can be modified with unique values on a component instance. For example you could make a CTA section that has an editable title and button. In more advanced use cases component properties can also show and hide specific elements, or even change visual styles (like button style, spacing amounts, or section color).

To edit a content property (eg a heading or image) you should:

  1. Locate the component instance that contains the element whose values you want to modify
  2. Select the element on the canvas
  3. On the right side of the designer you will see a properties panel - most section components will have a large amount of properties sorted into different dropdowns, you can open and close these to just look at the specific type of property you are wanting to update (eg Heading properties)
  4. Modify the element’s property values (e.g., update the text, replace an image, set the visibility, etc.)

Note: Some components (like a Navbar) might not have any properties set up because instead of having the component include different content on each page it needs to be consistent across the site without any parts of it changing.

Updating styles within a component

Lumos allows you to update visual styles within some components by using component properties. Since each component property is given a name (and often a placeholder) use this to understand what modifying that property will do to the visual style. For example, if you click on a button component below you'll notice it has a property called Small — which is set to false by default, but if type in true instead the button gets smaller. The same thing applies to the property color mode, by default it is set to 1 but if you change it to 2 the style of the button changes.

Most of the custom style properties are allowing you to select a CSS class for a specific use case (eg changing a color theme, or a border radius). To view all the possible classes for each of these use-cases checkout the style guide.

Feel free to play around with these properties when modified a component to see what visual changes are available. That being said it is recommended to clear out any overrides of a property if it is not having any effect. Eg. don't write something the doesn't work into a Color Mode property like dark or 10 if those options don't do anything, just leave the property blank (you can click on the blue text in the property to reset it).

Updating Interactions within a component

Some components will allow you to enable or disable interactions by using true or false (eg Scroll In Interactions = true). Or may give you more detailed options like allowing you to choose between a few different animation types, or giving you options for duration. For more details on how to customize these interactions check out the documentation.

Component Slots

Some components allow you to put other components inside of them for even more flexibility (like putting a bunch of cards into a section). to do this you can simply drag a component from the sidebase into the canvas and re-arrange them how you want, or even copy and paste another component to create more of them.

It's important to note that while Webflow will allow you to put any component inside a component slot, not all slots are meant for all components, (eg, sections should not be put inside other sections) to solve this components are divided in the sidebar based on their role. As a general rule, only Cards/Slot elements should go inside of a slot within a section. More on component naming is explained below.

Component Naming Conventions

One other thing you'll notice is that components have different types of names related to how they are used. Often this will include several words or phrases separated by a slash. This is to help you quickly search through and add components. The most common keywords are explained below:

  • Global - These are components that are used structurally throughout the whole site. They may be used in other components or in component slots throughout the site.
  • Section - These are pre-built sections that you can drop onto a page and have specific style controls for, when creating new pages they will help you quickly fill out the pages with prebuilt responsive designs
  • Card - These are elements that are used inside of a component slot, giving you more flexibility on the amount of content inside each component
  • Slide - This is a card-like element specifically for a slider section. This has specific CSS classes to make sure the slider functionality works correctly. Make sure to only put slide components inside a slider section of the same type.
  • Icon - These are icon elements

Lumos Chrome Extension

If you are using components a lot I would highly recommend installing the lumos chrome extension - It will pull out values from the custom code to make it easier to see what your options are when modifying a components styles. Chrome extension is linked here.

Components in this site

The components used in this site are displayed below, feel free to copy and paste them onto new pages or modify them to familiarize yourself with each of their options. Note: The navbar is not included on this page but you can find it on almost any other page throughout the site.

Components

Buttons

Button Style = Base Mode
Schedule a Demo
Play
Button Style = Secondary
Schedule a Demo
Play

Icons

Cards

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

01

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

10

%

Increase in profits

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Heading

250+

$10M

View Case Study
Heading
Category

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

John Doe

CEO & Co-founder

First Item

Text subtitle with a description

Second Item

Text subtitle with a description

Third Item

Text subtitle with a description

Lightbox

Lightbox
Modal

Video Player

Global & Starter

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

Form

Select all that apply
Select an option
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select all that apply
Select an option
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sections

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

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

Button Text

How it Works

Real Results

4.5

%

Over 4.5 Stars on Google

300

k+

New Listings per Month:

50

%

Available in 50 states

24

%

Higher Gross

19

%

Less Recon

How it Works

Real Results

The auction is broken

  1. Auction costs up 36% from 2019
  2. Waste time doom scrolling Facebook
  3. 81% of dealers cite acquisition as their biggest challenge
  4. 33% reduction in lease returns vs. pre-COVID levels

Unlock 40% of your market with VETTX

  1. AI-Powered consolidation/communication
  2. More customers through your doors
Learn More

“VETTX has helped us in many ways. When inventory was tight, and most of our competitors had no inventory to speak of, our lot was full. We were able to maintain over 100 used cars at all times.”

Chuck Patterson

View Case Study

35%

Vehicle Average Per Month

24%

Higher Gross 

Heading

35%

Vehicle Average Per Month

View Case Study
Heading

29%

Vehicle Average Per Month

View Case Study

Why we're better

Best in class Software

Get a Demo

Competitors

Territory restrictions and requires serious expertise

VETTX

Any dealer can use it and be onboarded in under a week

Technology
DMS, Email, & SMS Integrations
Bi-weekly updates/upgrades
Flagging dealer listings
AI & Machine Learning Enrichment
Custom Market Radius
Service
Unlimited Purchases
Unlimited Users
Unlimited Markets
Automation with every subscription
RV Exposure
Experience
Ease of use 
User-friendly Interface
Streamlined Buying Funnel
Customization
Success management 

Lorem ipsum dolor sit amet elit

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

Button Text

Eyebrow Text Here

Our Features

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

How it Works

The Process

Eyebrow Text Here

Lorem ipsum dolor sit

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

Learn More

Eyebrow Text Here

Lorem ipsum dolor sit

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

Learn More

Eyebrow Text Here

Lorem ipsum dolor sit

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

Learn More

Eyebrow Text Here

Lorem ipsum dolor sit

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

Learn More

Eyebrow Text Here

Lorem ipsum dolor sit

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

Learn More

Eyebrow Text Here

Header text

10

%

Increase in profits

2

M

Active Users

12

h

Response time

Trusted by Dealers nationwide

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

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

Schedule a Demo
Button Text

A Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Trusted by the Best

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

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

Button Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. elementum tristique. Duis cursus erat."

John Doe

CEO & Co-founder

Testimonials

“I love VETTX because it gives me better vehicles to sell, better deals on them, and the opportunity to pass those savings on to my customers.”

Brenna Stansbury

Co-owner of Park Marina Motors

“VETTX is the acquisition tool we've been looking for. It has everything we need to buy cars off the street, consistently, and at scale.”

Scott Robert

E-commerce Marketing Manager Lithia Hyundai of Reno

"In the first 30 days, doubling the amount of good looking, clean titled vehicles at prices you would pay at the auction houses"

Nick Markosian

Owner, Markosian Auto

Eyebrow Text Here

Lorem ipsum dolor sit amet elit

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Tag Text

Heading

Lorem ipsum dolor sitipiscing elit. Suspendisse  in eros elementum tristique.

Wall of Love

“VETTX is private party acquisition reinvented properly. There has never been a better tool that helps dealers effectively buy off the street.”

Tony Harb

CEO, Just Better Cars

“VETTX is private party acquisition reinvented properly. There has never been a better tool that helps dealers effectively buy off the street.”

Tony Harb

CEO, Just Better Cars

“VETTX is private party acquisition reinvented properly. There has never been a better tool that helps dealers effectively buy off the street.”

Tony Harb

CEO, Just Better Cars

“VettX has been a great tool for our dealership to get more inventory. The VettX platform streamlines the process of buying inventory from our local pool. Myles and the team are responsive, helpful, and knowledgeable!”

Jill Yechout

Schrier Automotive

"In the first 30 days, doubling the amount of good looking, clean titled vehicles at prices you would pay at the auction houses"

Nick Markosian

Owner, Markosian Auto

“VettX has been a great tool for our dealership to get more inventory. The VettX platform streamlines the process of buying inventory from our local pool. Myles and the team are responsive, helpful, and knowledgeable!”

Jill Yechout

Schrier Automotive

"In the first 30 days, doubling the amount of good looking, clean titled vehicles at prices you would pay at the auction houses"

Nick Markosian

Owner, Markosian Auto

“VettX has been a great tool for our dealership to get more inventory. The VettX platform streamlines the process of buying inventory from our local pool. Myles and the team are responsive, helpful, and knowledgeable!”

Jill Yechout

Schrier Automotive

"In the first 30 days, doubling the amount of good looking, clean titled vehicles at prices you would pay at the auction houses"

Nick Markosian

Owner, Markosian Auto

“It’s like having a used car factory”

Brad Marr

GM, Chuck Patterson Toyota

“I love VETTX because it gives me better vehicles to sell, better deals on them, and the opportunity to pass those savings on to my customers.”

Brenna Stansbury

Co-owner of Park Marina Motors

“VETTX is the acquisition tool we've been looking for. It has everything we need to buy cars off the street, consistently, and at scale.”

Scott Robert

E-commerce Marketing Manager Lithia Hyundai of Reno

“It’s like having a used car factory”

Brad Marr

GM, Chuck Patterson Toyota

“I love VETTX because it gives me better vehicles to sell, better deals on them, and the opportunity to pass those savings on to my customers.”

Brenna Stansbury

Co-owner of Park Marina Motors

“VETTX is the acquisition tool we've been looking for. It has everything we need to buy cars off the street, consistently, and at scale.”

Scott Robert

E-commerce Marketing Manager Lithia Hyundai of Reno

“It’s like having a used car factory”

Brad Marr

GM, Chuck Patterson Toyota

“I love VETTX because it gives me better vehicles to sell, better deals on them, and the opportunity to pass those savings on to my customers.”

Brenna Stansbury

Co-owner of Park Marina Motors

“VETTX is the acquisition tool we've been looking for. It has everything we need to buy cars off the street, consistently, and at scale.”

Scott Robert

E-commerce Marketing Manager Lithia Hyundai of Reno

We'd love to chat

Get in Touch

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

Lorem ipsum dolor sit amet elit

Button Text

See it in Action

Discover how VETTX can supercharge your vehicle buying center. Schedule a free strategy call with our experts today and take the first step towards dominating your market.

Schedule a Demo

FAQ's

Still got questions?

Get in Touch
What is VETTX?

VETTX is a disruptive software platform designed to transform the way dealerships acquire used vehicles. It empowers dealers to source and purchase cars directly from private sellers, tapping into a lucrative market. With VETTX, you can scale your inventory acquisition efforts and boost profitability.

How does it work?

VETTX utilizes cutting-edge technology, including AI-driven data enrichment, automation, and machine learning to streamline the vehicle acquisition process. It aggregates listings from multiple online marketplaces, identifies potential leads, enriches data, and allows you to connect with sellers efficiently. Our platform guides you through each step, making it easy to source vehicles directly from private sellers.

How much does it cost?

VETTX offers custom pricing options tailored to your dealership's needs. We understand every dealership is built differently and our pricing plans align with that. All you have to do is enter your email HERE for a free market quote.

Does VETTX do the actual seller outreach?

No, over the years we found that the most successful dealerships typically have at least one in-house buyer that is dedicated to buying cars from private sellers. VETTX maximizes buying efforts and multiplies results.

How does VETTX compare to other methods?

HERE is a good breakdown of our tool vs. our competition. If you take a look you’ll notice that almost everything we offer in terms of features, technology, resources, and support, our competition doesn't.

What if i'm already using a different tool?

It’s actually a really good thing. A few of our top-performing dealers are very aggressive and use multiple tools such as KBB ICO. VETTX and private party acquisition should be a large part of your vehicle acquisition strategy, but not the entire thing.

How many cars can I expect to buy?

Every dealership is different if you WATCH OUR VIDEOS you can see some of our clients are buying upwards of 600 cars per year. Can we guarantee that for you? No, but what we can guarantee is that whatever time, energy, and resources you are currently deploying the results will be multiplied.

What if i’ve never bought cars off the street before?

You’ve come to the right place because we have some of the best-used car buyers in the country on our customer success team that will give you our step by step blueprint on how to turn your dealership into a car-buying machine. 

Eyebrow Text Here

FAQ's

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

Question text goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Question text goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Question text goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.