Hexagon

Hexagonal frame around its slotted content, sized with the height prop.

Code

Framework

HTML

React

Angular

Default

Toggle dark mode

<certara-hexagon>
  <certara-icon icon="check"></certara-icon>
</certara-hexagon>

import { CertaraHexagon, CertaraIcon } from '@certara/certara-ui-react';

<CertaraHexagon>
  <CertaraIcon icon="check" />
</CertaraHexagon>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-hexagon>
  <certara-icon icon="check"></certara-icon>
</certara-hexagon>

Height

Toggle dark mode

<certara-hexagon height="72px">
  <certara-icon icon="check" size="24"></certara-icon>
</certara-hexagon>

import { CertaraHexagon, CertaraIcon } from '@certara/certara-ui-react';

<CertaraHexagon height="72px">
  <CertaraIcon icon="check" size={24} />
</CertaraHexagon>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-hexagon height="72px">
  <certara-icon icon="check" size="24"></certara-icon>
</certara-hexagon>

Color

Use color modifier classnames to change the color

Toggle dark mode

<certara-hexagon class="bg-accent-orange icon-accent-orange">
  <certara-icon icon="tag" size="24"></certara-icon>
</certara-hexagon>

import { CertaraHexagon, CertaraIcon } from '@certara/certara-ui-react';

<CertaraHexagon className="bg-accent-orange icon-accent-orange">
  <CertaraIcon icon="tag" size={24} />
</CertaraHexagon>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-hexagon class="bg-accent-orange icon-accent-orange">
  <certara-icon icon="tag" size="24"></certara-icon>
</certara-hexagon>

Properties

height

Attribute	height
Type	string
Default	undefined
Required	false
Description	Accepts a value of 50px, 3rem or any other valid CSS height value. The default height is 50px and is set in the CSS

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	The default slot