Component Examples

A showcase of all the core components and their variations.

Hero Component

Basic Hero with Image

Example Hero Title

This is an example hero component with an image. It demonstrates the props-based approach for structured content management.

Example hero image

Hero without Image

Hero Without Image

This hero component doesn't include an image, showing how the layout adapts when the image prop is not provided.

Hero without CTA

Hero Without CTA Button

This hero component shows how it looks without a call-to-action button, demonstrating the optional nature of the ctaText prop.

Example hero image

MiniUseCase Components

MiniUseCaseWrapper with MiniUseCases

Example Use Cases

Showcasing the MiniUseCase component variations

Third-Party Data Risk

See exactly what sensitive data you're sending to vendors.

Learn More

AI Data Exposure

Gain visibility into what your teams are sending to external AI APIs.

Learn More

Compliance Evidence

Pass audits with push-button simplicity by generating definitive proof of data residency.

Learn More

Individual MiniUseCase

Single Use Case Example

This shows how an individual MiniUseCase component looks when used standalone.

MiniUseCase without Icon

Use Case Without Icon

This MiniUseCase component doesn't include an icon, showing how the layout adapts.

Get Started

Step Components

StepWrapper with Steps

How It Works: From Zero to Full Visibility in Minutes

1.

Deploy With Zero Disruption

Install with a single command. No sidecars, no proxies, no code changes.

2.

Automatically Discover & Classify

Instantly discover every connection and use ML to classify sensitive data (PII, secrets) in the payload.

3.

Illuminate Your Entire Network

Get a real-time, searchable inventory of every data flow—source, destination, and data classification.

Individual Step

1.

Single Step Example

This shows how an individual step component looks when used standalone.

Button Component

Button Variations

Buttons with Icons

Loading Button

Icon Component

Available Icons

logo
check
user
twitter-x
linkedin
github

Icon Sizes

Input Component

Input Types

Form Component

Contact Form

Blog Components

Blog Card

Getting Started with QPoint

Learn how to deploy QPoint in minutes and start monitoring your encrypted traffic.

QPoint Team
January 15, 2024

Blog Author

John Doe

Request Demo Component Example

Request a Demo

Ready to see QPoint in action? Schedule a personalized demo to explore how our platform can help you gain visibility into your encrypted traffic and automate compliance evidence collection.

Quote Component

Quote with Photo

QPoint transformed how we handle third-party integrations. We went from having zero visibility into our encrypted traffic to complete transparency in just minutes.
Sarah Johnson
Sarah Johnson
VP of Engineering / TechCorp

Quote without Photo

The compliance evidence QPoint provides has streamlined our audit process from weeks to days. It's been a game-changer for our security posture.
Michael Chen
CISO / SecureFinance Inc

Usage in Markdown

::Quote
---
name: "Customer Name"
title: "Job Title"
company: "Company Name"
photo: "/images/customer.jpg" # optional
---
Your customer quote content goes here...
::

Pricing Components

Pricing Table (Desktop)

Pricing Table (Mobile)