/

<TextSplit> Component

Share
Code Editor
<TextSplit

  product="terraform"

  content='Terraform Cloud is the fastest way to adopt Terraform, the world’s most widely used multi-cloud provisioning product. Offered as a service, Terraform Cloud provides everything practitioners, teams, and organizations need to create and collaborate on infrastructure and manage risks for security, compliance and operational constraints.'

  linkStyle='buttons'

  links={[

    { text: 'primary action', url: '#' },

    { text: 'secondary action', url: '#' },

    { text: 'tertiary', url: '#' }

  ]}

>bar</TextSplit>

Where it's used

Latest:5.0.0
Search with

Releases

Latest:5.0.0
registry.npmjs.org
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...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...

Props

NameDescription
heading
string
headline above the text content
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.
theme
string
Options: "light", "dark", "gray"
product
string
Styles the button with a color based on a HashiCorp product
Options: "neutral", "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
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:
checkboxes[x]
string
text displayed to the right of the check
links
array
call-to-action links to be displayed below the text
Array members must be of the type below:
links[x]
object
Object contains nested props, see below:
links[x].text
string
link text
links[x].url
string
link URL
links[x].type
string
Options: "inbound", "outbound", "anchor"
linkStyle
string
styling for the links, can be as links or buttons
Options: "links", "buttons"
textSide
string
Options: "left", "right"
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.
className
string
Optional className to add to the root element

Examples

Share
Code Editor
<TextSplit

  content={<p style={{color: "var(--brand)"}}><strong>Hello</strong> world, this is some <em>custom</em> React content</p>}

  linkStyle='buttons'

  links={[

    { text: 'primary action', url: '#' },

    { text: 'secondary action', url: '#' },

    { text: 'tertiary', url: '#' }

  ]}

>bar</TextSplit>

With checkboxes:

Share
Code Editor
<TextSplit

  product="consul"

  content={<p><strong>Hello</strong> world, this is some <em>custom</em> React content. Time to check some things off...</p>}

  linkStyle='buttons'

  checkboxes={['One item', 'Second', 'And third']}

>bar</TextSplit>

"Dark Theme"

Share
Code Editor


<TextSplit

  content={

    <>

      <h3>¿Qué tal?</h3>

      <p>

        <strong>Hello</strong> world, this is some <em>custom</em> React content

      </p>

    </>

  }

  linkStyle="buttons"

  theme="dark"

  links={[

    { text: 'primary action', url: '#' },

    { text: 'secondary action', url: '#' },

    { text: 'tertiary', url: '#' },

  ]}

>

  bar

</TextSplit>

"Gray Theme"

Share
Code Editor


<TextSplit

  content={

    <>

    <h3>Por Ejemplo</h3>

    <p>

      <strong>Hello</strong> world, this is some <em>custom</em> React content

    </p>

    </>

  }

  linkStyle="buttons"

  product="waypoint"

  theme="gray"

  links={[

    { text: 'primary action', url: '#' },

    { text: 'secondary action', url: '#' },

    { text: 'tertiary', url: '#' },

  ]}

>

  bar

</TextSplit>