--- title: "Component Library" canonical_url: "https://www.nutrient.io/guides/sample-components/" md_url: "https://www.nutrient.io/guides/sample-components.md" last_updated: "2026-05-27T15:15:53.522Z" description: "Documentation and examples for all available components" --- Links: [internal link](/guides/sample-components.md) and [external link](https://google.com). ## Steps Component The Steps component provides a visually appealing way to present sequential instructions or processes. **Steps:** 1. **First Step** This is the first step in the process. ```bash npm install @nutrient-sdk/viewer # or yarn add @nutrient-sdk/viewer # or pnpm install @nutrient-sdk/viewer ``` 2. **Second Step** After completing the first step, proceed to the second step. ```js // Example code for the second step const secondStep = () => { console.log('Executing second step'); }; ``` 3. **Final Step** Complete the process with the final step. ```js // Example code for the final step const finalStep = () => { console.log('Process complete!'); }; ``` ### Usage in Markdoc To use the Steps component in your Markdoc files, use the following syntax: ``` [STEPS-TAG-OPEN] 1. First step 2. Second step 3. Third step [STEPS-TAG-CLOSE] ``` Replace `[STEPS-TAG-OPEN]` with `**Steps:** ` and `[STEPS-TAG-CLOSE]` with ` ` in your actual code. Note the following important formatting requirements: - Each step must start with a number followed by a period and space - Content under each step should be properly indented - Leave blank lines between steps and their content - You can use any number for each step (e.g., all "1." or sequential "1., 2., 3.") - The component will automatically handle the numbering #### Advanced Example ```` [STEPS-TAG-OPEN] 1. **Add a title to your step** This is the description for the first step. ```js // You can include code blocks const firstStep = () => { console.log('Executing first step'); }; ``` 1. **Add images or other components** You can include other components inside steps. [PACKAGEMANAGERS-TAG pkg="package-name" /] 1. **Format your content** Use **bold**, *italic*, or other Markdown formatting. [STEPS-TAG-CLOSE] ```` Replace `[STEPS-TAG-OPEN]` with `**Steps:** `, `[STEPS-TAG-CLOSE]` with ` `, and `[PACKAGEMANAGERS-TAG pkg="package-name" /]` with ````bash npm install package-name # or yarn add package-name # or pnpm install package-name ``` ` in your actual code. ### Usage in Astro Components In Astro components, you can use the Steps component directly: ```astro
  1. First Step

    Description of the first step.

  2. Second Step

    Description of the second step.

  3. Final Step

    Description of the final step.

 ``` ## Tabs Component The Tabs component allows you to organize content into multiple tabbed sections, making it easier for users to navigate between related information. ### Tab 1 This is the content for Tab 1. You can include any Markdown content here, including: - Lists - **Bold text** - *Italic text* - Code blocks ### Tab 2 This is the content for Tab 2. ```js // You can include code blocks in tabs const tabExample = () => { console.log('This is Tab 2'); }; ``` ### Tab 3 This is the content for Tab 3. You can also include other components inside tabs. ```bash npm install @nutrient-sdk/viewer # or yarn add @nutrient-sdk/viewer # or pnpm install @nutrient-sdk/viewer ``` ### JSON ```json // Form option. formOption = { "label": "name", "value": "John Appleseed" }; ``` ### JAVASCRIPT ```js // Form option. declare type FormOption = { label: string, value: string, }; ``` ### Usage in Markdoc To use the Tabs component in your Markdoc files, use the following syntax: ``` [TABS-TAG-OPEN] [TABITEM-TAG label="Tab 1"] Content for Tab 1 [TABITEM-TAG-CLOSE] [TABITEM-TAG label="Tab 2"] Content for Tab 2 [TABITEM-TAG-CLOSE] [TABITEM-TAG label="Tab 3" icon="icon-name"] Content for Tab 3 [TABITEM-TAG-CLOSE] [TABS-TAG-CLOSE] ``` Replace the placeholders with the actual Markdoc tags: - `[TABS-TAG-OPEN]` → `` - `[TABS-TAG-CLOSE]` → ` ` - `[TABITEM-TAG label="Tab 1"]` → `### Tab 1 ` - `[TABITEM-TAG-CLOSE]` → ` ` #### Attributes The Tabs component supports the following attributes: - `syncKey` (optional): A unique identifier to synchronize tab selection across multiple tab groups The TabItem component supports the following attributes: - `label` (required): The text displayed in the tab - `icon` (optional): An icon to display alongside the label ### Usage in Astro Components In Astro components, you can use the Tabs component directly: ```astro

Content for Tab 1

Content for Tab 2

Content for Tab 3

 ``` ## SwitcherTabs Component The Switcher tabs component allows you to organize content into tabbed sections similar to tabs, but each tab points to a separate URL. This is useful for creating a tabbed navigation system where each tab corresponds to a different page or section. The tab representing the current page is automatically highlighted. NOTE: Switcher tabs turn into a dropdown on smaller screens. ### Tab 1 [Tab 1](https://www.nutrient.io/guides/sample-components.md) ### Tab 2 [Tab 2](https://www.nutrient.io/guides/web.md) ### Tab 3 [Tab 3](https://www.nutrient.io/guides/android.md) This is the content for Overview Tab. You can include any Markdown content here, including: - Lists - **Bold text** - *Italic text* - Code blocks ### Usage in Markdoc To use the Tabs component in your Markdoc files, use the following syntax: ``` [SWITCHER-TABS-TAG-OPEN] [SWITCHER-TABITEM-TAG label="Tab 1" url="/guides/sample-components/tab1" SWITCHER-TABITEM-TAG-CLOSE] [SWITCHER-TABITEM-TAG label="Tab 2" url="/guides/sample-components/tab2" SWITCHER-TABITEM-TAG-CLOSE] [SWITCHER-TABITEM-TAG label="Tab 3" url="/guides/sample-components/tab3" SWITCHER-TABITEM-TAG-CLOSE] [SWITCHER-TABS-TAG-CLOSE] ``` Replace the placeholders with the actual Markdoc tags: - `[TABS-TAG-OPEN]` → `` - `[TABS-TAG-CLOSE]` → ` ` - `[TABITEM-TAG label="Tab 1"]` → `### Tab 1 ` #### Attributes The SwitcherTabItem component supports the following attributes: - `label` (required): The text displayed in the tab - `url` (required): The URL to navigate to when the tab is clicked ### Usage in Astro Components In Astro components, you can use the SwitcherTabs component directly: ```astro ``` ## PackageManagers Component The PackageManagers component displays installation or command instructions for multiple package managers (npm, yarn, pnpm). ```bash npm install @nutrient-sdk/viewer # or yarn add @nutrient-sdk/viewer # or pnpm install @nutrient-sdk/viewer ``` ```bash npm install @nutrient-sdk/viewer # or yarn add @nutrient-sdk/viewer # or pnpm install @nutrient-sdk/viewer ``` ```bash npm install vite # or yarn add vite # or pnpm install vite ``` ```bash npm run dev # or yarn dev # or pnpm dev ``` ### Usage in Markdoc To use the PackageManagers component in your Markdoc files, use the following syntax: ``` [PACKAGEMANAGERS-TAG pkg="package-name" /] ``` Replace `[PACKAGEMANAGERS-TAG pkg="package-name" /]` with ````bash npm install package-name # or yarn add package-name # or pnpm install package-name ``` ` in your actual code. #### Attributes The PackageManagers component supports the following attributes: - `pkg` (optional): The name of the package to install - `extrapkg` (optional): Comma-separated list of additional package managers to display (e.g., "bun" or "bun,deno") - `args` (optional): Additional arguments to pass to the command - `dev` (optional, boolean): Whether to install as a dev dependency - `type` (optional): The type of command to run. Possible values: - `install` (default): Install a package - `run`: Run a script - `remove`: Remove a package - `create`: Create a new project - `exec`: Execute a command - `dlx`: Run a package without installing it - `comment` (optional): A comment to display alongside the command - `title` (optional): A title for the command block - `icons` (optional, boolean): Whether to display package manager icons (default: true) - `prefix` (optional): A prefix to add to the command ### Usage in Astro Components In Astro components, you can use the PackageManagers component directly: ```astro ``` ## CodeBlock Component The CodeBlock component provides syntax-highlighted code blocks with additional features like line highlighting, titles, and more. ```js | | | | | | Android | iOS | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | | | ## Link cards **Default Card** This is the default card style [Read more](https://www.nutrient.io/) **Introduction to Forms** How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) **Introduction to Forms** How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) **Introduction to Forms** How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) **Introduction to Forms** How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) **Introduction to Forms** How to import, export, create, edit, sync, flatten and more [Read more](https://www.nutrient.io/) Ruby on Rails [Read more](https://www.nutrient.io/) Ruby on Rails [Read more](https://www.nutrient.io/) Ruby on Rails [Read more](https://www.nutrient.io/) Ruby on Rails [Read more](https://www.nutrient.io/) Ruby on Rails [Read more](https://www.nutrient.io/) Ruby on Rails [Read more](https://www.nutrient.io/) ## Card Grid **Simple Card with no icon or image** Instantly complete tasks, analyze text, and redact key information across your documents [Read more](https://www.nutrient.io/guides/) **Simple Card with icon (custom size for the icon)** Instantly complete tasks, analyze text, and redact key information across your documents [Read more](https://www.nutrient.io/guides/) **Simple Card with image (custom classes for the image) and no link** Instantly complete tasks, analyze text, and redact key information across your documents **AI-powered document understanding** Instantly complete tasks, analyze text, and redact key information across your documents [Read more](https://www.nutrient.io/guides/) **Document editing and generation** Modify content, merge/split PDFs, and generate PDFs from templates [Read more](https://www.nutrient.io/guides/) **Conversion and extraction** Convert images to PDFs, render PDFs as images, and extract text or pages [Read more](https://www.nutrient.io/guides/) `PDF Documents` `Images` `Office documents` 10 - Tenth card 11 - Eleventh card 12 - Twelfth card ### Label Card Grid #### Usign Grid **Documentation** **Documentation** **Documentation** **Documentation** #### Using Flex (Recomanded for a number of uneven cards ) **Documentation** **Documentation** **Documentation** **Documentation** **Documentation** ## Grid ### Simple Responsive Grid A responsive grid that changes columns at different breakpoints: Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 ### Basic 12-Column Grid A simple 12-column grid that demonstrates the basic structure: span 12 span 6 span 6 span 4 span 4 span 4 span 3 span 3 span 3 span 3 ### Responsive 12-Column Grid A 12-column grid that adapts to different screen sizes: 12 cols on mobile → 6 on tablet → 4 on desktop 12 cols on mobile → 6 on tablet → 4 on desktop 12 cols on mobile → 12 on tablet → 4 on desktop ### Grid with Specific Positioning A grid with specific column and row positioning: Item 1: Full width on mobile, spans 2x2 on tablet+ Item 2: Full width on mobile, col 3 on tablet+ Item 3: Full width on mobile, col 4 on tablet+ Item 4: Full width on mobile, col 5 on tablet+ Item 5: Full width on mobile, col 3, row 2 on tablet+ Item 6: Full width on mobile, col 4, row 2 on tablet+ Item 7: Full width on mobile, col 5, row 2 on tablet+ ### Another Grid Layout Example A grid with different positioning and spanning: Item 1: Default position Item 2: Default position Item 3: Default position Item 4: Col 1, Row 2 Item 5: Col 2, Row 2 Item 6: Col 3, Row 2 Item 7: Spans 2x2 at Col 4, Row 1 ### Nested Grid Example A grid with nested grids inside some of the items: #### Regular Item This is a standard grid item without any nested content. #### Item with Nested Grid This item contains a nested grid with its own layout: Nested Item 1 Nested Item 2 Nested Item 3 (Full Width) #### Full Width Item with Complex Nested Grid This item spans the full width and contains a more complex nested grid: Nested Item A (2 cols) Nested Item B Nested Item C ##### Deeply Nested Grid Deep 1 Deep 2 Deep 3 ### Basic Flex Layout A simple flex layout with items: Flex Item 1 Flex Item 2 Flex Item 3 ### Responsive Flex Layout A flex layout that changes direction on different screen sizes: #### Card 1 This card will stack vertically on mobile and arrange horizontally on larger screens. #### Card 2 Each card takes up equal space with flex-1. #### Card 3 Flex is great for card layouts and responsive designs. ### Advanced Flex Layout Examples #### Holy Grail Layout A classic "holy grail" layout with header, footer, main content, and sidebars: Header ##### Left Sidebar Fixed width on desktop, full width on mobile. ##### Main Content This area takes up all remaining space. On mobile, the sidebars stack above and below. The holy grail layout is a classic web design pattern that provides a header, footer, and three columns. ##### Right Sidebar Also fixed width on desktop, full width on mobile. Footer #### Masonry-Style Layout A Pinterest-like masonry layout with items of different heights: [Click me](https://www.nutrient.io) [Click me](https://www.nutrient.io/try) ## Accordion Component The Accordion component is used to display a list of items in an accordion. It should be used with the AccordionItem component. #### What are some common use cases for HTML to PDF conversion in JavaScript? Common use cases include generating invoices, reports, tickets, and any other documents that need to be downloadable or printable from a web application. #### What are some common use cases for HTML to PDF conversion in JavaScript? Common use cases include generating invoices, reports, tickets, and any other documents that need to be downloadable or printable from a web application. ```js import NutrientViewer from "@nutrient-sdk/viewer"; const customTheme = { elevation: { low: "0 0 4px 0 rgba(0, 0, 0, 0.4)", medium: "0 4px 16px 0 rgba(0, 0, 0, 0.15)", }, opacity: { none: "0", low: "0.1", medium: "0.5", high: "0.9", }, rounded: { xs: "2px", sm: "4px", md: "8px", lg: "12px", xl: "16px", "2xl": "24px", full: "9999px", }, spacing: { xs: "2px", sm: "4px", md: "8px", lg: "12px", xl: "16px", "2xl": "24px", "3xl": "32px", "4xl": "40px", "5xl": "48px", "6xl": "64px", "7xl": "80px", "8xl": "96px", "9xl": "160px", }, color: { support: { error: { subtler: "#711b00", subtle: "#b53007", medium: "#fe7a68", strong: "#ffd4ce", }, success: { subtler: "#223a03", subtle: "#3C6612", medium: "#80CC34", strong: "#ecfeda", }, warning: { subtler: "#562800", subtle: "#bd5a00", medium: "#eb7f00", strong: "#ffd4a1", }, info: { subtler: "#190d94", subtle: "#4537de", medium: "#777cf0", strong: "#d3dcff", }, }, focused: { default: "#FB6F3B", inset: "#5B1C0F", }, background: { primary: { subtle: "#5B1C0F", medium: "#431207", strong: "#180501", }, interactive: { enabled: "#FB6F3B", hovered: "#FEB609", active: "#FFC938", visited: "#FFC938", disabled: "rgb(84.7% 28.6% 16.1% / 0.5)", }, inverse: { subtle: "#E95635", medium: "#FFC938", strong: "#FFE7A9", }, secondary: { subtle: "#762B1A", medium: "#A93920", strong: "#D84929", }, overlay: { subtle: "rgb(100% 90.6% 66.3% / 0.25)", medium: "rgb(9.41% 1.96% 0.39% / 0.5)", interactive: "rgb(98.4% 43.5% 23.1% / 0.25)", }, positive: { subtle: "#FFC938", medium: "#FEDE89", strong: "#FFE7A9", interactive: { enabled: "#5B1C0F", }, }, }, text: { primary: "#FFE7A9", secondary: "#FEB609", helper: "#FB6F3B", placeholder: "#FB6F3B", inverse: "#5B1C0F", oninteractive: "#5B1C0F", interactive: { enabled: "#FB6F3B", hovered: "#FEB609", active: "#FFC938", visited: "#FFC938", disabled: "rgb(100% 90.6% 66.3% / 0.5)", }, }, icon: { primary: "#FFE7A9", secondary: "#FB6F3B", inverse: "#5B1C0F", oninteractive: "#5B1C0F", interactive: { enabled: "#FB6F3B", hovered: "#FEB609", active: "#FFC938", visited: "#FFC938", disabled: "rgb(100% 90.6% 66.3% / 0.5)", }, }, border: { subtle: "#762B1A", medium: "#A93920", strong: "#D84929", inverse: "#FFE7A9", interactive: { enabled: "#FB6F3B", hovered: "#FEB609", active: "#FFC938", visited: "#FFC938", disabled: "#D84929", }, positive: { interactive: { enabled: "#5B1C0F", }, subtle: "#FFC938", medium: "#FEB609", strong: "#FB6F3B", }, }, }, typography: { heading: { h6: { regular: { font: '400 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.875rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, h5: { regular: { font: '400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, h4: { regular: { font: '400 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 1.375rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, h3: { regular: { font: '400 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 1.5rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, h2: { regular: { font: '400 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 1.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, h1: { regular: { font: '400 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, medium: { font: '500 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, semibold: { font: '600 2rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0", }, }, }, label: { sm: { regular: { font: '400 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, medium: { font: '500 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, semibold: { font: '600 0.688rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, }, md: { regular: { font: '400 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.75rem/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, lg: { regular: { font: '400 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, }, body: { sm: { regular: { font: '400 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, medium: { font: '500 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, semibold: { font: '600 0.75rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.05px", }, }, md: { regular: { font: '400 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 0.875rem/1.375 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, lg: { regular: { font: '400 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, medium: { font: '500 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, semibold: { font: '600 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif', letterSpacing: "0.1px", }, }, }, }, } NutrientViewer.load({ theme: customTheme, document: "YOUR_DOCUMENT_URL", }); ``` ## Label Component ** Default label ** ** Neutral label and some more text ** ** Neutral label and some more text ** ** Neutral label and some more text ** ** Neutral label and some more text ** ** Label ** ** Label ** ## Separator The Separator component is used to separate content. It can be used to create a visual break between sections of content. Primary separator (default): --- Secondary separator: --- Custom classes to separators: --- --- ### Usage in Markdoc ```text [SEPARATOR-TAG type="secondary" /] ``` ### Usage in Astro ```astro ``` ### Attributes - `type` (optional): The type of separator (primary, secondary) - `class` (optional): Additional classes to apply to the separator ## Spacer The Spacer component is used to create space between elements. This text is above the spacer. There is a spacer with pt-10 below this text. This text is below the spacer. ### Usage in Markdoc ```text [SPACER-TAG class="pt-10" /] ``` ### Usage in Astro ```astro ``` ### Attributes - `class` (optional): Additional classes to apply to the spacer ## Short Feature The Short Feature component displays a feature with an icon or number, title, and description in a compact horizontal layout. ### With Icon ### With Number ### Usage in Markdoc ```text [SHORT-FEATURE-TAG iconProps={name: "dotted/unlock"} title="No trial key required" description="You have the option to try our SDK without obtaining a trial key." /] [SHORT-FEATURE-TAG number="1" title="Install the SDK" description="Add our SDK to your project using npm or yarn package manager." /] ``` Replace `[SHORT-FEATURE-TAG` with `` in your actual code. ### Usage in Astro ```astro import ShortFeature from "@/components/common/ShortFeature.astro"; ``` ### Attributes - `iconProps` (object, optional): Icon component props including `name`, `width`, `height`, and `class` - `name` (string, required): Icon name (e.g., "dotted/unlock") - `width` (string, optional): Icon width (default: "32") - `height` (string, optional): Icon height (default: "32") - `class` (string, optional): Additional classes for the icon - `number` (string, optional): Number to display instead of icon (e.g., "1", "2", "3") - `title` (string, required): Feature title - `description` (string, required): Feature description - `class` (string, optional): Additional classes to apply to the component **Note:** Either `iconProps` or `number` must be provided, but not both. ## Logo Switcher The Logo Switcher component is used to display a list of logos. ### Usage in Markdoc ```text [LOGOSWITCHER-TAG logos=["...", "...", "..."] background="default" /] ``` ### Usage in Astro ```astro ``` ### Attributes The LogoSwitcher component supports the following attributes: - `logos` (required): The logo icons to display - `background` (optional): The background color, either default or transparent - `class` (optional): Any custom classes ## Video The Video component is used to display a video from a URL or a local file. Video with no given aspect ratio and full width Video with no given aspect ratio and limited with (%) Video with no given aspect ratio and limited with (px) ### Usage in Markdoc ```text [VIDEOPLAYER-TAG class="mb-10" src="@/assets/videos/article-header.mp4" poster="@/assets/videos/video-poster.jpg" controls=true muted=true /] ``` ### Usage in Astro ```astro ``` ### Attributes - `src` (required): URL for self-hosted video or ID for YouTube/Vimeo - `type` (optional): Type of video (self-hosted, YouTube, Vimeo) - `title` (optional): Video title (for accessibility) - `class` (optional): Additional classes to apply to the video - `aspectRatio` (optional): Aspect ratio (16:9, 4:3, etc.) - `poster` (optional): Poster image URL or ImageMetadata - `controls` (optional): Show video controls - `autoplay` (optional): Autoplay video - `loop` (optional): Loop video - `muted` (optional): Mute video - `preload` (optional): Preload strategy (auto, metadata, none) - `width` (optional): Video width - `height` (optional): Video height - `startAt` (optional): Start time in seconds - `showInfo` (optional): Show video info (YouTube) - `showRelated` (optional): Show related videos (YouTube) - `showControls` (optional): Show player controls (YouTube/Vimeo) - `privacyMode` (optional): Enable privacy-enhanced mode ## Image Component The Image component is used to display an image. It can be used with a URL or a local file. ### Image - multiple images on breakpoints ### Image - zoom on click (click to open full size) _Click image to expand_ ### Usage in Markdoc ```text [IMAGE-TAG src="/src/assets/images/people/cosmin-iorgus.jpg" width=40 class="mx-auto" /] ``` ### Usage in Astro ```astro ``` ### Attributes - `src` (required): URL for image - `alt` (optional): Alt text for image - `width` (optional): Image width - `height` (optional): Image height - `class` (optional): Additional classes to apply to the image - `title` (optional): Title for image (for accessibility) - `shouldZoomOnClick` (optional): When true, clicking opens full-size image in a lightbox modal ## TLDR **TL;DR** This is a styled summary with a custom title. ## Testimonial Component The Testimonial component displays customer testimonials with optional headshots, company logos, and call-to-action buttons. It supports two variants: standard and large. **Complete testimonial with all fields** **Testimonial** "Using Pilotbrief and Mercury allows this all to be done electronically, saving not only paper but also precious time." — Name Surname, Position, Company **Minimal testimonial (essential fields only)** **Testimonial** "Minimal example demonstrating essential fields only." — Name Surname, Position, Company **Large size with button** **Testimonial** "Nutrient helps us significantly accelerate our time to market, provide key services to our clients, and reliably deliver solutions that we can easily integrate into our portfolio." — Angelica Nierras, Chief Growth Officer, Faria Education Group ### Usage in Markdoc To use the Testimonial component in your Markdoc files, use the following syntax: ``` [TESTIMONIAL-TAG headshot="@/assets/images/people/cosmin-iorgus.jpg" name="Name Surname" position="Position" company="Company" logo="customer-logos/ibm" /] Your testimonial quote here [TESTIMONIAL-TAG /] ``` Replace `[TESTIMONIAL-TAG` with `{% testimonial` and `[TESTIMONIAL-TAG /]` with `` in your actual code. ### Attributes The Testimonial component supports the following attributes: **Required attributes:** - `name` (required): The name of the person giving the testimonial **Optional attributes:** - `position` (optional): The person's job title or position - `company` (optional): The person's company or organization - `size` (optional): Size variant ("large" for larger testimonials, default is "small") - `headshot` (optional): Path to the person's headshot image - `logo` (optional): Company logo identifier (references logos in the assets directory) - only visible in small size - `boxed` (optional, boolean): Whether to display with background and padding (default: true). Only applies to small size; large size is always boxed - `class` (optional): Additional CSS classes to apply to the testimonial **Button functionality (requires `size="large"`):** - `buttonText` (required for button): Text for the call-to-action button - `buttonUrl` (required for button): URL for the button link - `buttonIcon` (optional): Icon to display in the button **Note:** Button functionality only works with `size="large"`. Both `buttonText` and `buttonUrl` are required for the button to display, while `buttonIcon` is optional. ### Usage in Astro Components In Astro components, you can use the Testimonial component directly: ```astro Your testimonial quote here ``` ## GuidesList Component The GuidesList component automatically scans `.mdoc` files within a folder or subfolder and generates an index list of guides. It's perfect for creating dynamic lists that stay up-to-date as you add or remove guide files. ### Basic Usage - [PDF to Excel](/guides/java/conversion/pdf-to-excel-document/) - [PDF to HTML](/guides/java/conversion/pdf-to-html/) - [PDF to PowerPoint](/guides/java/conversion/pdf-to-powerpoint-document/) - [PDF to Word](/guides/java/conversion/pdf-to-word-document/) - [PowerPoint to PDF](/guides/java/conversion/powerpoint-document-to-pdf/) - [Word to PDF](/guides/java/conversion/word-document-to-pdf/) - [Word to PDF/UA](/guides/java/conversion/word-document-to-pdf-ua/) - [Word to PDF with comments](/guides/java/conversion/word-document-to-pdf-including-comments/) - [Excel to PDF](/guides/java/conversion/excel-document-to-pdf/) - [Markdown to PDF](/guides/java/conversion/markdown-to-pdf/) - [PDF to Markdown](/guides/java/conversion/pdf-to-markdown/) - [PDF to PDF/A](/guides/java/conversion/pdf-to-pdf-a/) - [PDF to PDF/UA](/guides/java/conversion/pdf-to-pdf-ua/) ### With Descriptions - [PDF to Excel](/guides/java/conversion/pdf-to-excel-document/) Converting PDF documents to Excel format for data analysis using Nutrient Java SDK. - [PDF to HTML](/guides/java/conversion/pdf-to-html/) Converting PDF documents to HTML format for web publishing using Nutrient Java SDK. - [PDF to PowerPoint](/guides/java/conversion/pdf-to-powerpoint-document/) Converting PDF documents to PowerPoint presentations for editing and collaboration using Nutrient Java SDK. - [PDF to Word](/guides/java/conversion/pdf-to-word-document/) Converting a document from PDF to DOCX format using Nutrient Java SDK. - [PowerPoint to PDF](/guides/java/conversion/powerpoint-document-to-pdf/) Converting a document from PPTX to PDF format using Nutrient Java SDK. - [Word to PDF](/guides/java/conversion/word-document-to-pdf/) Converting a document from DOCX to PDF format using Nutrient Java SDK. - [Word to PDF/UA](/guides/java/conversion/word-document-to-pdf-ua/) Converting a document from DOCX to PDF/UA format using Nutrient Java SDK. - [Word to PDF with comments](/guides/java/conversion/word-document-to-pdf-including-comments/) Learn how to convert Word documents to PDF while preserving all comments and annotations using Nutrient Java SDK with just a few lines of code. - [Excel to PDF](/guides/java/conversion/excel-document-to-pdf/) Convert Excel spreadsheets to PDF format using Nutrient Java SDK. - [Markdown to PDF](/guides/java/conversion/markdown-to-pdf/) Convert Markdown to PDF format using Nutrient Java SDK. - [PDF to Markdown](/guides/java/conversion/pdf-to-markdown/) Convert PDF documents to Markdown format using Nutrient Java SDK. - [PDF to PDF/A](/guides/java/conversion/pdf-to-pdf-a/) Convert PDF documents to PDF/A format using Nutrient Java SDK. - [PDF to PDF/UA](/guides/java/conversion/pdf-to-pdf-ua/) Convert PDF documents to PDF/UA format using Nutrient Java SDK. ### Ordered List ### Usage in Markdoc ```txt - [PDF to Excel](/guides/java/conversion/pdf-to-excel-document.md) - [PDF to HTML](/guides/java/conversion/pdf-to-html.md) - [PDF to PowerPoint](/guides/java/conversion/pdf-to-powerpoint-document.md) - [PDF to Word](/guides/java/conversion/pdf-to-word-document.md) - [PowerPoint to PDF](/guides/java/conversion/powerpoint-document-to-pdf.md) - [Word to PDF](/guides/java/conversion/word-document-to-pdf.md) - [Word to PDF/UA](/guides/java/conversion/word-document-to-pdf-ua.md) - [Word to PDF with comments](/guides/java/conversion/word-document-to-pdf-including-comments.md) - [Excel to PDF](/guides/java/conversion/excel-document-to-pdf.md) - [Markdown to PDF](/guides/java/conversion/markdown-to-pdf.md) - [PDF to Markdown](/guides/java/conversion/pdf-to-markdown.md) - [PDF to PDF/A](/guides/java/conversion/pdf-to-pdf-a.md) - [PDF to PDF/UA](/guides/java/conversion/pdf-to-pdf-ua.md) ``` ### Attributes The GuidesList component supports the following attributes: **Required attributes:** - `folder` (required): The folder path to scan for guides (relative to collection root) **Optional attributes:** - `collection` (optional): Content collection to scan ("guides", "sdk", "blog"). Default: "guides" - `includeSubfolders` (optional, boolean): Whether to include files from subfolders. Default: true - `orderBy` (optional): How to sort the guides ("title", "order", "filename"). Default: "order" - `showDescriptions` (optional, boolean): Whether to display guide descriptions. Default: false - `listStyle` (optional): Display format ("ul", "ol", "div"). Default: "ul" - `class` (optional): Additional CSS classes to apply ### Key Features - **Automatic Discovery**: Scans folders for `.mdoc` files and generates links - **Smart Filtering**: Excludes partial files (starting with `_`) and index files - **Frontmatter Integration**: Extracts title, description, and order from file metadata - **Flexible URLs**: Supports custom permalinks or generates URLs from file paths - **Navigation Consistency**: Uses `sidenav_label` when available for consistent navigation - **Multiple Layouts**: Supports unordered lists, ordered lists, and div-based layouts ### Usage in Astro Components In Astro components, you can use the GuidesList component directly: ```astro ``` ## WorkflowProcessViewer Component The WorkflowProcessViewer component provides an interactive workflow diagram viewer with form rendering capabilities. It displays process diagrams with clickable nodes and associated forms. ### Usage in Markdoc ``` [WORKFLOWPROCESSVIEWER-TAG publicFileName="/path/to/workflow.json" /] ``` ## API Code Block Component The API Code Block component displays code examples from the centralized API code blocks system. It supports multiple tools, modes (basic/advanced), and frameworks. ### Basic Python Example ### Advanced Shell Example with Line Numbers ### Multiple Frameworks with Tabs Use the `tabs` component to display multiple frameworks in a tabbed interface: ### Python ### JavaScript ### Shell ### C# ### Usage in Markdoc **Single code block:** ``` [APICODEBLOCK-TAG tool="pdf-ocr-api" mode="basic" framework="python" /] ``` **Multiple frameworks with tabs:** ``` [TABS-TAG] [TABITEM-TAG label="Python"] [APICODEBLOCK-TAG tool="pdf-ocr-api" mode="basic" framework="python" /] [/TABITEM-TAG] [TABITEM-TAG label="JavaScript"] [APICODEBLOCK-TAG tool="pdf-ocr-api" mode="basic" framework="javascript" /] [/TABITEM-TAG] [/TABS-TAG] ``` **Available attributes:** - `tool` (required) - Tool slug, e.g., `"pdf-ocr-api"` - `mode` (required) - `"basic"` or `"advanced"` - `framework` (required) - `"shell"`, `"shellWindows"`, `"java"`, `"csharp"`, `"javascript"`, `"python"`, `"php"`, `"http"` - `showLineNumbers` (optional) - Show line numbers - `title` (optional) - Title for the code block See [API Code Blocks Documentation](/docs/reference-api-code-blocks.md) for more details on adding new tools and frameworks. --- ## Related pages - [Product archives and deprecated solutions](/guides/product-archives-and-deprecated-solutions.md) - [Page Layout and Scroll Options in Our JavaScript Viewer](/guides/sample-typography.md)