Code

Renders its slotted content as a styled inline <code> element in a brand, info or success color.

Code

Framework

HTML

React

Angular

Brand

brand colored code

Toggle dark mode

<certara-code color="brand">brand colored code</certara-code>

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

<CertaraCode color="brand">brand colored code</CertaraCode>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-code color="brand">brand colored code</certara-code>

Info

info colored code

Toggle dark mode

<certara-code color="info">info colored code</certara-code>

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

<CertaraCode color="info">info colored code</CertaraCode>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-code color="info">info colored code</certara-code>

Success

success colored code

Toggle dark mode

<certara-code color="success">success colored code</certara-code>

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

<CertaraCode color="success">success colored code</CertaraCode>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-code color="success">success colored code</certara-code>

certara-code

Properties

color

Attribute	color
Type	"brand" | "info" | "success"
Default	'brand'
Required	false
Description

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