Félix Malfait
5d438bb70c
## Summary - **New Getting Started section** with quickstart guide and restructured navigation - **Halftone-style illustrations** for User Guide and Developer introduction cards using a Canvas 2D filter script - **Removed hero images** (`image:` frontmatter + `<Frame><img>` blocks) from all user-guide article pages - **Cleaned up translations** (13 languages): removed hero images and updated introduction cards to use halftone style - **Cleaned up twenty-ui pages**: removed outdated hero images from component docs - **Deleted orphaned images**: `table.png`, `kanban.png` - **Developer page**: fixed duplicate icon, switched to 3-column layout ## Test plan - [ ] Verify docs site builds without errors - [ ] Check User Guide introduction page renders halftone card images in both light and dark mode - [ ] Check Developer introduction page renders 3-column layout with distinct icons - [ ] Confirm article pages no longer show hero images at the top - [ ] Spot-check a few translated pages to ensure hero images are removed 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@twenty.com>
187 lines
3.6 KiB
Plaintext
187 lines
3.6 KiB
Plaintext
---
|
|
title: Links
|
|
icon: "link"
|
|
---
|
|
<Frame>
|
|
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
|
</Frame>
|
|
|
|
## Contact Link
|
|
|
|
A stylized link component for displaying contact information.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { BrowserRouter as Router } from 'react-router-dom';
|
|
|
|
import { ContactLink } from 'twenty-ui/navigation';
|
|
|
|
export const MyComponent = () => {
|
|
const handleLinkClick = (event) => {
|
|
console.log('Contact link clicked!', event);
|
|
};
|
|
|
|
return (
|
|
<Router>
|
|
<ContactLink
|
|
className
|
|
href="mailto:example@example.com"
|
|
onClick={handleLinkClick}
|
|
>
|
|
example@example.com
|
|
</ContactLink>
|
|
</Router>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
<Tab title="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| className | string | Optional name for additional styling |
|
|
| href | string | The target URL or path for the link |
|
|
| onClick | function | Callback function to be triggered when the link is clicked |
|
|
| children | `React.ReactNode` | The content to be displayed inside the link |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Raw Link
|
|
|
|
A stylized link component for displaying links.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { RawLink } from "/navigation";
|
|
import { BrowserRouter as Router } from "react-router-dom";
|
|
|
|
export const MyComponent = () => {
|
|
const handleLinkClick = (event) => {
|
|
console.log("Contact link clicked!", event);
|
|
};
|
|
|
|
return (
|
|
<Router>
|
|
<RawLink className href="/contact" onClick={handleLinkClick}>
|
|
Contact Us
|
|
</RawLink>
|
|
</Router>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
|
|
</Tab>
|
|
<Tab title="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| className | string | Optional name for additional styling |
|
|
| href | string | The target URL or path for the link |
|
|
| onClick | function | Callback function to be triggered when the link is clicked |
|
|
| children | `React.ReactNode` | The content to be displayed inside the link |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
|
|
## Rounded Link
|
|
|
|
A rounded-styled link with a Chip component for links.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { RoundedLink } from "/navigation";
|
|
import { BrowserRouter as Router } from "react-router-dom";
|
|
|
|
export const MyComponent = () => {
|
|
const handleLinkClick = (event) => {
|
|
console.log("Contact link clicked!", event);
|
|
};
|
|
|
|
return (
|
|
<Router>
|
|
<RoundedLink href="/contact" onClick={handleLinkClick}>
|
|
Contact Us
|
|
</RoundedLink>
|
|
</Router>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| href | string | The target URL or path for the link |
|
|
| children | `React.ReactNode` | The content to be displayed inside the link |
|
|
| onClick | function | Callback function to be triggered when the link is clicked |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Social Link
|
|
|
|
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { SocialLink } from "twenty-ui/navigation";
|
|
import { BrowserRouter as Router } from "react-router-dom";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Router>
|
|
<SocialLink
|
|
type="twitter"
|
|
href="https://twitter.com/twentycrm"
|
|
></SocialLink>
|
|
</Router>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
<Tab title="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| href | string | The target URL or path for the link |
|
|
| children | `React.ReactNode` | The content to be displayed inside the link |
|
|
| type | string | The type of social links. Options include: `url`, `LinkedIn`, and `Twitter` |
|
|
| onClick | function | Callback function to be triggered when the link is clicked |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|