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.

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.

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

Deploy With Zero Disruption

Install with a single command. No sidecars, no proxies, no code changes.
Automatically Discover & Classify

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

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

Individual Step

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

Button Component

Button Variations

Default Button

Stroke Button

CTA Button

Disabled Button

Buttons with Icons

With Icon

Stroke with Icon

Loading Button

Processing...

Icon Component

Available Icons

logo

check

user

twitter-x

github

Icon Sizes

Input Component

Input Types

Text Input

Email Input

Number Input

Disabled Input

Form Component

Contact Form

Name

Message

Send Message

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.

Full Name Email Address Company Name Phone Number Role/Title Tell us more about your interests and requirements Submit

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

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

::ProseQuote

name: "Customer Name"

title: "Job Title"

company: "Company Name"

photo: "/images/customer.jpg" # optional

Your customer quote content goes here...