Welcome to our interactive component playground

Here, you'll find a collection of all the components and their diverse variations that power our digital platforms.

Think of this as a visual library—a space where design meets functionality, enabling you to witness firsthand the versatility and cohesiveness of our UI/UX elements. Whether you're a designer seeking inspiration, a developer referencing a component, or simply curious about our digital aesthetics, this page will guide you through our Fixico universe.

Discover our component playground

Navigating our component playground is a breeze, thanks to a structured approach tailored for clarity and in-depth exploration.

Here’s how we've laid it out for you:

1. Component Introduction: Each section kicks off with a brief introduction, announcing the specific component you're about to delve into.

2. Functionality & Features Overview: Beneath the header, you'll find a brief explanation of the component's primary functionality.

3. Meet the Component's: These will highlight the adaptability of each element, demonstrating how it can adjust to fit different contexts and requirements.

It is my hope that this breakdown ensures that you not only understand each component but see its purpose and full potential.

If you have any questions, I'm just a slack away.

Cheers,

Brian

Animated Content

What's Under the Hood?

From choosing the size of your image to selecting just the right kind of animation effect - fade-ins, slides from the left or right - it's all about giving your content the entrance it deserves.

Banner

A component from the careers site, feel free to use this to capture the attention of the user. This is normally placed at the bottom of the page, but could easily be used as a page/content divider.

This component however has a blue/purple filter with a blur effect layered on top of the image.

Big Card

Choose your image alignment, pick between a bold navy or muted grey backdrop, and craft your message or call-to-action just right.

Card Grid

Every card can house an image, accompanying it with a bit of information. Tailored for both mobiles and desktops, these cards ensure your audience can engage with your story, no matter the device.

Cards with icons and buttons

Similar to card grid, this component is prominently used on our business homepage. While the functionality is the same of the card grid, the difference here is that each card is more uniquely emphasised, instead of arrow we have pagination bubbles under the cards,

Cards with images and text

Useful to highlight important pieces of information. A good example of this component can be found on our homepage.

When viewed on mobile, instead of being like the previous cards above, each individual card is placed on top of one another. Each taking the full width of the screen.

Carousel

A new component introduced from the Careers page.

As the component name gives it away, its a carousel for images. Add a bunch of images, and it will go from left to right, and then back again.

For this to actually trigger, there must be a minimum amount of images. This being at least 4

FAQ List

The Gateway to Knowledge

With a sea of questions floating in the minds of your audience; the FAQ component is here to help you address these concerns.

Structured and organized, this component offers a user-friendly experience, ensuring that every question and answer can be provided

Grid + Form

Why not both?

This block can have two types of content - text and/or information sets.

• Text: This content is displayed centrally and can be used for headings or introductory text.

• Information sets: These are potentially image-based blocks of content, displayed side by side in two columns. Each of these sets can contain an image and a description.

• Form Block: This block is designed to display an embedded form. The form can be included or excluded based on the toggle state (toggle_form). If the toggle is set to true, then the embedded form script can be added in the provided text-area.

Insights

At its core, the 'Grid + Form' is an intuitive two-column layout component tailored for the demand for both textual/image-based content and user interactions via a form.

Whether you're introducing a new newsletter sign-up, a feedback module, or a quick survey, this component connects content with engagement in a responsive manner.

Header

The main component of each page.

The header. Immediately informs the user what the page is about, highlighting its content.

Can also be left blank as a fancy page break.

Horizontal text block

Want to put more emphasis on a certain subject? Consider using a horizontal text block.

By highlighting the topic on the left, and having the content placed on the right.

Image Button Grid

Currently only this page is using this

It essentially make an image function as a button to open a link

Image grid

Showcase a table or a row of images, this is the component you're looking for.

This is the main image grid that we use to highlight the plethora of partnerships Fixico has.

You can toggle how images you wish to display per row, whether this be one or all the way up to four.

Interactive cards

A new component introduced with the creation of the careers collection to statamic.

It has a specific use case, but could be used to highlight key figures, or companies briefly.

Large Image Block

When you want an image to be the main highlight.

This image takes up the full width of the page, and a good chunk of the visual height.

Comes with the background option of navy and grey

Market Insights Card

There is currently only one use case for this (Marketplace), but in theory it could be adapted dependent on your needs.

On desktop this is a image/video (gif is currently not supported). When scaled down on mobile, it becomes a fictional card about a repair shop.

Meet the team

A new component introduced with the creation of the careers collection to statamic.

Similar to interactive cards, the difference here is you can create fields for each cards, segmenting them into groups.

Numbers component

Whether it be a statistic, or a crucial piece of information. Showcase this with some flair with a full width banner.

One or more highlights? We got you covered.

Press & Media

A multi-use-case component. Whether it be to highlight a blog post or an informational piece about one of our partners. This component has your needs covered.

Quotes

A multi-use-case component. Whether it be to highlight a blog post or an informational piece about one of our partners. This component has your needs covered.

Team grid component

Used for our Meet the Team page, this component is used to highlight key figures.

However, it can also be used for alternative cases. An example could be to highlight businesses that we work with.

Text Block Component

The text component. The most versatile and adaptable component that can be used anywhere on our site.

It has various functionalities, demonstrating:

• Whether as a Paragraph of text

• Text with a CTA button

• With a block, to have pieces of information in columns or a bunch of CTA's to pages related to a subject

• Text and a single image

• Or simply just a video, with or without text

Standard text block, with the text and content set to the left

In 2014, Fixico was launched as a marketplace for drivers to find the best body repair shops. Today, Fixico has evolved into the digital car repair management platform on a mission to shape the future of car repair by creating a smarter, better and digitally connected marketplace for everyone. Fixico enables businesses to make data-driven repair decisions, and fully optimise, control and track their repairs, while offering exceptional driver journeys.

Text with CTA set to the left

With some text to go along with it, describing further about a subject.

Text with background image

A page break to contain an image and informational text. This can however just be some text, to add a visual break between content.

Text with numbers

Just like the previous component, this is also a page break to contain an image and informational pieces.

A good example of this in practice can be found on our Platform and OEM page.

Timeline

A unique component that as the name says it, creates a timeline to track and document events.

This is being done in a vertical timeline, with years (or milestones) and then the occurring events within that year. As you scroll down the timeline, events will fade into view from below.

A good practical example can be found on the Our Story page

Vacancies table

DISCLAIMER:

Please don't use this component. As this is solely needed and only will work on the Careers Vacancies page.

Adding this else where would be pointless, and would list a bunch of job openings.