<TextSplitWithCode> ComponentDisplay a title, description, and links alongside a code block.
<TextSplitWithCodetextSplit={{heading: 'Container Orchestration',content: 'Deploy, manage, and scale your containers with the Docker, Podman, or Singularity task driver.',links: [{text: 'Read More',url: 'https://learn.hashicorp.com/collections/nomad/manage-jobs',type: 'outbound',},],}}codeBlock={{options: { showWindowBar: true },code: `task <span class="token string">"webservice"</span> <span class="token punctuation">{</span><span class="token property">driver</span> <span class="token punctuation">=</span> <span class="token string">"docker"</span><span class="token keyword">config</span> <span class="token punctuation">{</span><span class="token property">image</span> <span class="token punctuation">=</span> <span class="token string">"redis:3.2"</span><span class="token keyword">labels</span> <span class="token punctuation">{</span><span class="token property">group</span> <span class="token punctuation">=</span> <span class="token string">"webservice-cache"</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span>`,language: 'hcl'}}/>
| Name | Description |
|---|---|
textSplit*object | Data sent to the TextSplit component Object contains nested props, see below: |
textSplit.headingstring | headline above the text content |
textSplit.contentfunction | string | Content to be shown under the heading. Accepts either a string or React content. If a string is passed, it will be rendered into paragraph tags. Each newline in the string will create a new paragraph. |
textSplit.themestring | |
textSplit.productstring | Styles the button with a color based on a HashiCorp product |
textSplit.checkboxesarray | A set of checked-off checkbox images typically used as a bulleted list to describe a set of features Array members must be of the type below: |
textSplit.checkboxes[x]string | text displayed to the right of the check |
textSplit.linksarray | call-to-action links to be displayed below the text Array members must be of the type below: |
textSplit.links[x]object | Object contains nested props, see below: |
textSplit.links[x].textstring | link text |
textSplit.links[x].urlstring | link URL |
textSplit.links[x].typestring | |
textSplit.linkStylestring | styling for the links, can be as links or buttons |
textSplit.textSidestring | |
textSplit.childrenReact.Element | Children are displayed opposite the text block and can be any arbitrary react code. If using a code example, image, or logo grid, we recommend using the pre-set components for that seen below. |
textSplit.classNamestring | Optional className to add to the root element |
codeBlock*object | Data passed to the CodeBlock component Object contains nested props, see below: |
codeBlock.classNamestring | A className string which will be added to the outer element of this component. |
codeBlock.code*string | A string of highlighted HTML or React elements. These elements will be rendered into a <pre><code> container.A plain string can be passed, but it will not be highlighted. |
codeBlock.languagestring | Used to set a global "language-*" className on both the pre and code element, for compatibility with language-specific highlight styles. This value should be identical to the language used to generate the highlighted code. |
codeBlock.themestring | Sets the color theme for the code block. Intended to match light and dark system appearance, for example through CSS @media (prefers-color-scheme). |
codeBlock.hasBarAboveboolean | Intended for automatic use in CodeTabs, not meant as a consumer-facing prop. Set to true to remove border rounding from the top of the CodeBlock. |
codeBlock.onCopyCallbackfunction | Optional callback that is called when copy success state changes to true or false. When code is successfully copied using the "Copy" button, it changes to true. If there is an error when copying code, it changes to false. |
codeBlock.optionsobject | Additional options that enable supplementary code-block features.Object contains nested props, see below: |
codeBlock.options.showChromeboolean | Set to true to display a window chrome bar UI above the code block. |
codeBlock.options.highlightstring | Specify line numbers to highlight. Supports a comma-separate list of numbers and number ranges, where number ranges are dash-separated pairs of numbers. For example: "5" highlights line 5; "2,5" highlights lines 2 and 5; "2-5" highlights lines 2, 3, 4, and 5; "2,6-8,11" highlights line 2, 6, 7, 8 and 11. |
codeBlock.options.lineNumbersboolean | Set to true to display line numbers on the left edge of the code block. |
codeBlock.options.showClipboardboolean | Set to true to show the copy-to-clipboard prompt and functionality. |
classNamestring | Optional className to add to the root element of the TextSplit. If textSplit.className is provided, it will override this prop. |
Dark theme:
<TextSplitWithCodetextSplit={{heading: 'Container Orchestration',content: 'Deploy, manage, and scale your containers with the Docker, Podman, or Singularity task driver.',theme: 'dark',links: [{text: 'Read More',url: 'https://learn.hashicorp.com/collections/nomad/manage-jobs',type: 'outbound',},],}}codeBlock={{options: { showWindowBar: true },code: `task <span class="token string">"webservice"</span> <span class="token punctuation">{</span><span class="token property">driver</span> <span class="token punctuation">=</span> <span class="token string">"docker"</span><span class="token keyword">config</span> <span class="token punctuation">{</span><span class="token property">image</span> <span class="token punctuation">=</span> <span class="token string">"redis:3.2"</span><span class="token keyword">labels</span> <span class="token punctuation">{</span><span class="token property">group</span> <span class="token punctuation">=</span> <span class="token string">"webservice-cache"</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span>`,language: 'hcl'}}/>