Skip to main content

Style Guide & Component Reference

warning

Development Only This page is for development reference only and will be removed before publishing. It demonstrates all available styling components and layouts inspired by the Codehooks design system.

Screenshot Workflow​

Follow this workflow to capture consistent, production-ready UI screenshots:

Expand the browser window to full screen so the entire interface is visible. Adjust the browser zoom level until the full layout fits cleanly within the viewport. Capture a full-screen screenshot to include all visible UI elements. Open the image in Figma and place it inside the standard 1280×720 px “TV” frame. Hold Shift while resizing to keep the aspect ratio intact. Export the framed screenshot as a PNG for inclusion in the documentation. This framing ensures every screenshot aligns with our visual guidelines and renders crisply in the docs site.

Typography Examples​

Heading 1 * Main Page Title

Heading 2 * Section Title​

Heading 3 * Subsection Title​

Heading 4 * Component Title​

Bold text for emphasis and italic text for subtle emphasis.

How to Create Typography​

# Heading 1 * Main Page Title
## Heading 2 * Section Title  
### Heading 3 * Subsection Title
#### Heading 4 * Component Title

**Bold text** for emphasis and *italic text* for subtle emphasis.

Alerts and Callouts​

info

Information This is an informational alert with the primary green accent color.

warning

Warning This is a warning alert for important notices.

Critical

Critical Use this for high-importance notices that need attention.

tip

Pro Tip This is a tip alert for helpful suggestions.

Nested Note

Some text here

tip

Pro Tip This is a tip alert for helpful suggestions.

Some more text here

Use :::procedure when you need the feature-card look for step-by-step setups (white panel, top/bottom borders, copy button).

Okta configuration steps

  1. Log in to Okta.
  2. Create the SAML app. :::info NOTE This is a note.
  3. Copy the issuer, SSO URL, and certificate into Cyberhaven.

How to Create Alerts​

:::info Information
This is an informational alert with the primary green accent color.
:::

:::warning Warning
This is a warning alert for important notices.
:::

:::critical Critical
Use this for high-importance notices that need attention.
:::

:::tip Pro Tip
This is a tip alert for helpful suggestions.
:::

:::procedure Okta configuration steps
1. Log in to Okta.
2. Create the SAML app.
3. Copy the issuer, SSO URL, and certificate into Cyberhaven.
:::

Tables​

FeatureDescriptionStatus
Dark HeadingsAnthracite colored headings✅ Implemented
Grey PanelsCodehooks-style panels✅ Implemented
Text + CodeCombined text and code layouts✅ Implemented
Green AccentsPrimary green color scheme✅ Implemented

How to Create Tables​

| Feature | Description | Status |
|---------|-------------|--------|
| Dark Headings | Anthracite colored headings | ✅ Implemented |
| Grey Panels | Codehooks-style panels | ✅ Implemented |
| Text + Code | Combined text and code layouts | ✅ Implemented |
| Green Accents | Primary green color scheme | ✅ Implemented |

Code Blocks​

Example API Call
/ Cyberhaven API example
const response = await fetch('/api/sensors', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  }
});

const sensors = await response.json();
console.log('Active sensors:', sensors.filter(s => s.status === 'active'));

How to Create Code Blocks​

```javascript title="Example API Call"
/ Cyberhaven API example
const response = await fetch('/api/sensors', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  }
});

const sensors = await response.json();
console.log('Active sensors:', sensors.filter(s => s.status === 'active'));
```

Preformatted Text Blocks​

Use a preformatted block when you need to preserve exact spacing and line breaks—especially for step-by-step instructions that users might copy. The feature-card-steps utility keeps the typography consistent with the rest of the documentation while allowing wrapped lines.

    

  1. Prepare the endpoint.

      

    • Verify the sensor is running.
      • 

    

    2. 

  2. Open System Settings.

      

    • Navigate to Security & Privacy → General.
      • 

    

    3. 

  3. Approve the latest Cyberhaven extension.
    4.

How to Create Preformatted Text Blocks​

<pre className="feature-card-steps">
1. Prepare the endpoint.
   * Verify the sensor is running.
2. Open System Settings.
   * Navigate to **Security &amp; Privacy → General**.
3. Approve the latest Cyberhaven extension.
</pre>

Tabs Component​

import { CyberhavenSDK } from '@cyberhaven/sdk';

const client = new CyberhavenSDK({
  apiKey: 'your-api-key'
});

How to Create Tabs​

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="javascript" label="JavaScript" default>
  Your JavaScript code here
</TabItem>
<TabItem value="python" label="Python">
  Your Python code here  
</TabItem>
</Tabs>

Lists​

Ordered Lists​

  1. First item with bold text

  2. Second item with italic text

  3. Third item with inline code

  4. Fourth item with link

Unordered Lists​

  • Bullet point with bold text
  • Bullet point with italic text
  • Bullet point with inline code
  • Bullet point with link

How to Create Lists​

### Ordered Lists

<ol>
  <li>
    First item with **bold text**
  </li>
  <li>
    Second item with *italic text*
  </li>
  <li>
    Third item with `inline code`
  </li>
  <li>
    Fourth item with [link](https://example.com)
  </li>
</ol>

### Unordered Lists

* Bullet point with **bold text**
* Bullet point with *italic text*
* Bullet point with `inline code`
* Bullet point with [link](https://example.com)

N.B.

Ordered lists are done with HTML tags to support indentation and multi level lists, by inserting nexted lists in HTML we can show more than one level that is harder to do in the right order with markdow

* [External link](https://cyberhaven.com) to external website
* [Internal link](/Admin/Overview) to internal documentation
* [Internal link With Spaces](</Admin/Content Matching/Overview>) to internal documentation. with the path including spaces
* [Internal link With Spaces](/Admin/Content Matching/Overview) to internal documentation. with the path with encoded space
* [Relative link](/Admin/Overview) to relative path
* [Section link](#alerts-and-callouts) to section on same page
* [Email link](mailto:support@cyberhaven.com) for contact

Images​

Cyberhaven Logo

How to Add Images​

![Cyberhaven Logo](/img/cyberhaven-logo-light.png)

Blockquotes​

This is a blockquote with important information.

It can span multiple lines and contain formatting.

This is a nested blockquote within the main quote.

How to Create Blockquotes​

> This is a blockquote with important information.
> 
> It can span multiple lines and contain **formatting**.
> 
> > This is a nested blockquote within the main quote.

Horizontal Rules​

Use horizontal rules to separate sections:

How to Create Horizontal Rules​

---

Inline Code and Formatting​

Use inline code for commands, variables like API_KEY, file names like config.json, and technical terms.

Combine formatting: bold with code, italic with code, and bold italic text.

How to Create Inline Formatting​

Use `inline code` for commands, variables like `API_KEY`, file names like `config.json`, and technical terms.

Combine formatting: **bold with `code`**, *italic with `code`*, and ***bold italic text***.

Card Grid Layout​

Deployment Guide

Start with requirements and rollout

Admin Guide

Configure and manage your deployment

User Guide

Train your end-users and troubleshoot

Release Notes

Cyberhaven platform and software release notes

How to Create Card Grid​

import Card from '@site/src/components/Card';

<div className="card-grid">
  <Card title="Deployment Guide" description="Start with requirements and rollout" link="/Deployment/Overview" headerType="jobs" />
  <Card title="Admin Guide" description="Configure and manage your deployment" link="/Admin/Overview" headerType="auth" />
  <Card title="User Guide" description="Train your end-users and troubleshoot" link="/Users/Overview" headerType="files" />
  <Card title="Release Notes" description="Platform and software release notes" link="/release-notes" headerType="analytics" linkType="root" />
</div>

Available Header Types​

The headerType prop determines the icon displayed in the card header. Available options:

Authentication

Use for security, permissions, access control

API Integration

Use for API documentation, web services

Database

Use for data management, storage topics

Jobs & Scheduling

Use for automated tasks, scheduling

Files & Documents

Use for file management, documentation

Analytics & Reports

Use for reporting, metrics, dashboards

Search & Discovery

Use for search functionality, finding content

Configuration

Use for settings, configuration management

Header Type Usage​

/ Examples of different header types
<Card title="User Management" headerType="auth" />
<Card title="REST API Guide" headerType="api" />
<Card title="Data Storage" headerType="database" />
<Card title="Scheduled Tasks" headerType="jobs" />
<Card title="File Upload" headerType="files" />
<Card title="Usage Reports" headerType="analytics" />
<Card title="Content Search" headerType="search" />
<Card title="System Settings" headerType="config" />

Content Indentation​

Nested Lists for Indentation​

  1. Main topic
    • Subtopic with indentation
    • Another subtopic
      • Deeper nested item
      • Another deep item
  2. Second main topic
    • Indented explanation
    • Additional details

Blockquote Indentation​

This content is indented using a blockquote.

This is further indented with a nested blockquote. You can use this for emphasis or to show hierarchy.

Manual Indentation with HTML​

This content is indented using CSS margin. This is useful when you need precise control over indentation that can't be achieved with markdown.

This content has even more indentation (4rem). You can adjust the margin value to control the indentation level.

How to Create Indented Content​

# Using nested lists
1. Main topic
   * Subtopic with indentation
   * Another subtopic
     * Deeper nested item

# Using blockquotes
> This content is indented using a blockquote.
> 
> > This is further indented with a nested blockquote.

# Using HTML for precise control
<div style={{marginLeft: '2rem'}}>
  This content is indented using CSS margin.
</div>

Spacing Between Sections​

Small Spacing​

This is regular text with normal spacing.


This text has a small break above it using a single <br /> tag.

Medium Spacing​

This is some content.

This content has medium spacing above it using a div with height.

Large Spacing​

This section has normal spacing.

This section has large spacing above it for clear visual separation.

Using Horizontal Rules for Section Breaks​

Content in the first section.

Content in the second section, separated by a horizontal rule.

How to Add Spacing Between Sections​

<!-* Small spacing -->
<br />

<!-* Medium spacing -->
<div style={{height: '2rem'}}></div>

<!-* Large spacing -->
<div style={{height: '4rem'}}></div>

<!-* Visual separator with horizontal rule -->
---
# Multiple line breaks for spacing



Content with extra spacing above using multiple line breaks.

# Combining techniques
Regular content here.

<div style={{height: '3rem'}}></div>

---

Content with both spacing and a visual separator.

HTML Elements in Markdown​

Simple Buttons​

How to Create Buttons​

<div style={{display: 'flex', gap: '1rem', margin: '1rem 0'}}>
  <button className="button button--primary">Primary Button</button>
  <button className="button button--secondary">Secondary Button</button>
</div>

Remember: This style guide will be removed before publishing. Use these components and guidelines to create consistent, professional documentation that matches the Codehooks design aesthetic.

Last updated on