Style Guide & Component Reference

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.

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

Information

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

Warning

This is a warning alert for important notices.

Danger

This is a danger alert for critical information.

Pro Tip

This is a tip alert for helpful suggestions.

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.
:::

:::danger[Danger]
This is a danger alert for critical information.
:::

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

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

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'));
```

Tabs Component

JavaScript

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

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

Python

from cyberhaven import CyberhavenClient

client = CyberhavenClient(api_key='your-api-key')

cURL

curl -X GET "https://api.cyberhaven.io/v1/sensors" \
  -H "Authorization: Bearer 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

1. First item with **bold text**
2. Second item with *italic text*
3. Third item with `inline code`
4. Fourth item with [link](https://example.com)

### Unordered Lists

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

Links and References

• External link to external website
• Internal link to internal documentation
• Internal link With Spaces to internal documentation. with the path including spaces
• Internal link With Spaces to internal documentation. with the path with encoded space
• Relative link to relative path
• Section link to section on same page
• Email link for contact

How to Create Links

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

Images

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" headerType="jobs" />
  <Card title="Admin Guide" description="Configure and manage your deployment" link="/Admin" headerType="auth" />
  <Card title="User Guide" description="Train your end-users and troubleshoot" link="/Users" 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.