Widget

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 space-inside prop

---

Note the hr spanning the full width

Toggle dark mode

<certara-widget-box headline="Default padding removed" space-inside="none">
  <p class="p-6">
    Remove default padding with the
    <code>space-inside</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" spaceInside="none">
  <p className="p-6">
    Remove default padding with the
    <code>space-inside</code>
    prop
  </p>
  <hr className="my-0" />
  <p className="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" space-inside="none">
  <p class="p-6">
    Remove default padding with the
    <code>space-inside</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>Submit</certara-button>
    <certara-button 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>Submit</CertaraButton>
    <CertaraButton 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>Submit</certara-button>
    <certara-button 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" icon="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" icon="gear" variant="solid" className="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" icon="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 slot="widget-box-heading" class="d-flex space-x-3 align-items-baseline">
    <h2 class="heading-md">Custom title</h2>
    <certara-button color="brand" variant="icon" aria-label="Edit">
      <certara-icon icon="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 slot="widget-box-heading" className="d-flex space-x-3 align-items-baseline">
    <h2 className="heading-md">Custom title</h2>
    <CertaraButton color="brand" variant="icon" aria-label="Edit">
      <CertaraIcon icon="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 slot="widget-box-heading" class="d-flex space-x-3 align-items-baseline">
    <h2 class="heading-md">Custom title</h2>
    <certara-button color="brand" variant="icon" aria-label="Edit">
      <certara-icon icon="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" right-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" rightIcon="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" right-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="true">
  <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={true}>
  <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="true">
  <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. List of available Font Awesome icons

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	undefined
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 DEPRECATED. Use spaceInside instead. Will be removed in the next major version.

spaceInside

Attribute	space-inside
Type	"md" | "none"
Default	undefined
Required	false
Description	If this is set to none, it zeros out the padding on the widget content, for instance if you want a full width table inside the widget box. Defaults to md.

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

Widget boxes are used to group form sections together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.

Design guidelines

Variants

Default

Sample help text

Toggle dark mode

With footer

Input

Input

Primary Secondary Learn more

Toggle dark mode

Best practices

Using a footer

• Same as Card guidelines
• When the widget box has a footer, place all action items in the footer for users to find quickly.
• When there is no footer and has a help article link, use the space in the upper right corner of the card for persistent, optional actions (such as Read the help article)

Accessibility

Screen reader support

Use semantic HTML to provide more context to screen readers and bots. For example, use <header> HTML tag for card headers, <footer> HTML tag for card footers, and wrap the card in an <article> or <section> HTML tag.

Design resources

View component in Figma