/

<ProductsUsed> Component

A ProductsUsed

Share
Code Editor


    <>

      <div style={{ padding: '32px'}}>

        <ProductsUsed 

          products={

            [

              {

                name: 'waypoint',

                href: "https://www.hashicorp.com/"

              },

              {

                name: 'consul',

                href: "https://www.hashicorp.com/"

              },

            ]

          }

          appearance={'light'}

        />

      </div>

      <div style={{ padding: '32px', backgroundColor: '#151619' }}>

        <ProductsUsed 

          products={

            [

              {

                name: 'waypoint',

                href: "https://www.hashicorp.com/"

              },

              {

                name: 'consul',

                href: "https://www.hashicorp.com/"

              },

            ]

          }

          appearance={'dark'}

        />

      </div>

    </>

Props

NameDescription
appearance
string
Display on light or dark backgrounds.
Options: "light", "dark"
products
object
Array of products or products with links. Only supports one or the other, not a mix of the two.
Object contains nested props, see below:
products.name*
string
A lower-case product identifier to render the name of the product
Options: "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
products.href
string
Where the anchor element links to when clicked.

Examples

Primary

Products used

  • waypoint
  • consul
  • terraform

Link

Products used

Primary

Products used

  • waypoint
  • consul
  • terraform

Link

Products used