Widget Box

Show design guidelines

Code

Framework HTML React Angular

Props

Headline

Toggle dark mode

<certara-widget-box headline="Headline prop">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

import { CertaraFormGroup, CertaraInput, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="Headline prop">
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Headline prop">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

Icon

Toggle dark mode

<certara-widget-box headline="With icon prop" icon="align-justify">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

import { CertaraFormGroup, CertaraInput, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="With icon prop" icon="align-justify">
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="With icon prop" icon="align-justify">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

Width

Toggle dark mode

<certara-widget-box headline="Width set to 370px" width="370px">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

import { CertaraFormGroup, CertaraInput, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="Width set to 370px" width="370px">
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Width set to 370px" width="370px">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

Padded

Remove default padding with the padded prop

---

Note the hr spanning the full width

Toggle dark mode

<certara-widget-box headline="Default padding removed" padded="false">
  <p class="p-6">
    Remove default padding with the
    <code>padded</code>
    prop
  </p>
  <hr class="my-0" />
  <p class="p-6">
    Note the
    <code>hr</code>
    spanning the full width
  </p>
</certara-widget-box>

import { CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="Default padding removed" padded={false}>
  <p class="p-6">
    Remove default padding with the
    <code>padded</code>
    prop
  </p>
  <hr class="my-0" />
  <p class="p-6">
    Note the
    <code>hr</code>
    spanning the full width
  </p>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Default padding removed" padded="false">
  <p class="p-6">
    Remove default padding with the
    <code>padded</code>
    prop
  </p>
  <hr class="my-0" />
  <p class="p-6">
    Note the
    <code>hr</code>
    spanning the full width
  </p>
</certara-widget-box>

Slots

Footer slot

Submit Cancel

Toggle dark mode

<certara-widget-box headline="With footer" icon="align-justify">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
  <div slot="widget-box-footer">
    <certara-button slot="widget-box-footer">Submit</certara-button>
    <certara-button slot="widget-box-footer" variant="link">Cancel</certara-button>
  </div>
</certara-widget-box>

import { CertaraButton, CertaraFormGroup, CertaraInput, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="With footer" icon="align-justify">
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
  <div slot="widget-box-footer">
    <CertaraButton slot="widget-box-footer">Submit</CertaraButton>
    <CertaraButton slot="widget-box-footer" variant="link">Cancel</CertaraButton>
  </div>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="With footer" icon="align-justify">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
  <div slot="widget-box-footer">
    <certara-button slot="widget-box-footer">Submit</certara-button>
    <certara-button slot="widget-box-footer" variant="link">Cancel</certara-button>
  </div>
</certara-widget-box>

Header icon slot

Custom header icons can be had with the widget-box-icon slot

Toggle dark mode

<certara-widget-box headline="Custom icon slot">
  <certara-icon slot="widget-box-icon" name="gear" variant="solid" class="spin"></certara-icon>
  Custom header icons can be had with the
  <code>widget-box-icon</code>
  slot
</certara-widget-box>

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

<CertaraWidgetBox headline="Custom icon slot">
  <CertaraIcon slot="widget-box-icon" name="gear" variant="solid" class="spin" />
  Custom header icons can be had with the
  <code>widget-box-icon</code>
  slot
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Custom icon slot">
  <certara-icon slot="widget-box-icon" name="gear" variant="solid" class="spin"></certara-icon>
  Custom header icons can be had with the
  <code>widget-box-icon</code>
  slot
</certara-widget-box>

Custom heading slot

Custom title

Custom headings with complex markup can be achieved with the widget-box-heading slot

Toggle dark mode

<certara-widget-box icon="align-justify">
  <div class="d-flex space-x-3 align-items-baseline" slot="widget-box-heading">
    <h2 class="heading-md">Custom title</h2>
    <certara-button color="brand" variant="icon" aria-label="Edit">
      <certara-icon name="pencil"></certara-icon>
    </certara-button>
  </div>
  <p>
    Custom headings with complex markup can be achieved with the
    <code>widget-box-heading</code>
    slot
  </p>
</certara-widget-box>

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

<CertaraWidgetBox icon="align-justify">
  <div class="d-flex space-x-3 align-items-baseline" slot="widget-box-heading">
    <h2 class="heading-md">Custom title</h2>
    <CertaraButton color="brand" variant="icon" aria-label="Edit">
      <CertaraIcon name="pencil" />
    </CertaraButton>
  </div>
  <p>
    Custom headings with complex markup can be achieved with the
    <code>widget-box-heading</code>
    slot
  </p>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box icon="align-justify">
  <div class="d-flex space-x-3 align-items-baseline" slot="widget-box-heading">
    <h2 class="heading-md">Custom title</h2>
    <certara-button color="brand" variant="icon" aria-label="Edit">
      <certara-icon name="pencil"></certara-icon>
    </certara-button>
  </div>
  <p>
    Custom headings with complex markup can be achieved with the
    <code>widget-box-heading</code>
    slot
  </p>
</certara-widget-box>

Right header slot

Learn more

Toggle dark mode

<certara-widget-box headline="Right content in header" icon="align-justify">
  <div slot="widget-header-right">
    <certara-link href="#" target="_blank" icon="arrow-up-right-from-square">
      Learn more
    </certara-link>
  </div>
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

import { CertaraFormGroup, CertaraInput, CertaraLink, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="Right content in header" icon="align-justify">
  <div slot="widget-header-right">
    <CertaraLink href="#" target="_blank" icon="arrow-up-right-from-square">
      Learn more
    </CertaraLink>
  </div>
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Right content in header" icon="align-justify">
  <div slot="widget-header-right">
    <certara-link href="#" target="_blank" icon="arrow-up-right-from-square">
      Learn more
    </certara-link>
  </div>
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

Collapsible widget-box

Collapsible

Toggle dark mode

<certara-widget-box headline="Title" open>
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

import { CertaraFormGroup, CertaraInput, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="Title" open>
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Title" open>
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

Collapsed

Toggle dark mode

<certara-widget-box headline="Title" open="false">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

import { CertaraFormGroup, CertaraInput, CertaraWidgetBox } from '@certara/certara-ui-react';

<CertaraWidgetBox headline="Title" open={false}>
  <CertaraFormGroup label="Input">
    <CertaraInput name="firstName" />
  </CertaraFormGroup>
</CertaraWidgetBox>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-widget-box headline="Title" open="false">
  <certara-form-group label="Input">
    <certara-input name="firstName"></certara-input>
  </certara-form-group>
</certara-widget-box>

certara-widget-box

Properties

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	Output in the header of the widget box

icon

Attribute	icon
Type	string
Default	undefined
Required	false
Description	Set the icon name to display in the widget box header. If no icon is set, the default is lines.

open

Attribute	open
Type	boolean
Default	undefined
Required	false
Description	This sets the open state of the widget box and turns it into a disclosure width if present. If this is set to false, the widget box is collasped by default.

padded

Attribute	padded
Type	boolean
Default	true
Required	false
Description	If this is set to false, it zeros out the padding on the widget content, for instance if you want a full width table inside the widget box

width

Attribute	width
Type	string
Default	undefined
Required	false
Description	Optional width of the card. Accepts a value of 30rem, 370px, or any valid CSS size value.

Events

Name	Description	Bubbles
certaraToggle	Follows the native toggle event for the HTML <details> element to emit interaction with the control	true

Methods

There are no public methods available for this component

Slots

Name	Description
	Main slot for widget content
widget-box-footer	Slot for items appearing in the widget-box footer
widget-box-heading	Slot for custom formatted heading
widget-box-icon	Slot for custom header icon
widget-header-right	Slot for right-aligned header content