/

<TextSplitWithCode> Component

Display a title, description, and links alongside a code block.

Share
Code Editor
<TextSplitWithCode

  textSplit={{

    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'

  }}

/>

Where it's used

Latest:3.4.3
Search with

Releases

Latest:3.4.3
registry.npmjs.org
[object Object]
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...

Props

NameDescription
textSplit*
object
Data sent to the TextSplit component
Object contains nested props, see below:
textSplit.heading
string
headline above the text content
textSplit.content
function | 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.theme
string
Options: "light", "dark", "gray"
textSplit.product
string
Styles the button with a color based on a HashiCorp product
Options: "neutral", "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
textSplit.checkboxes
array
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.links
array
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].text
string
link text
textSplit.links[x].url
string
link URL
textSplit.links[x].type
string
Options: "inbound", "outbound", "anchor"
textSplit.linkStyle
string
styling for the links, can be as links or buttons
Options: "links", "buttons"
textSplit.textSide
string
Options: "left", "right"
textSplit.children
React.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.className
string
Optional className to add to the root element
codeBlock*
object
Data passed to the CodeBlock component
Object contains nested props, see below:
codeBlock.className
string
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.language
string
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.theme
string
Sets the color theme for the code block. Intended to match light and dark system appearance, for example through CSS @media (prefers-color-scheme).
Options: "light", "dark"
codeBlock.hasBarAbove
boolean
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.onCopyCallback
function
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.options
object
Additional options that enable supplementary code-block features.
Object contains nested props, see below:
codeBlock.options.showChrome
boolean
Set to true to display a window chrome bar UI above the code block.
codeBlock.options.highlight
string
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.lineNumbers
boolean
Set to true to display line numbers on the left edge of the code block.
codeBlock.options.showClipboard
boolean
Set to true to show the copy-to-clipboard prompt and functionality.
codeBlock.options.wrapCode
boolean
Set to true to make long lines of code wrap rather than overflow.
className
string
Optional className to add to the root element of the TextSplit. If textSplit.className is provided, it will override this prop.

Examples

Dark theme:

Share
Code Editor
<TextSplitWithCode

  textSplit={{

    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'

  }}

/>