@outbook/webcomponents-type-title

This package provides a web component for displaying a title with primary and optional secondary text.

Installation

npm install @outbook/webcomponents-type-title

Usage

As a Lit Element (using the wrapper function)

import {html} from 'lit';
import {TypeTitle} from '@outbook/webcomponents-type-title';

function render() {
  return html`
    ${TypeTitle({
    primary: 'Main Title',
    secondary: 'Subtitle goes here'
  })}
  `;
}

Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

import '@outbook/webcomponents-type-title';

<outbook-type-title primary="Main Title" secondary="Subtitle goes here"></outbook-type-title>

Component: outbook-type-title

This is the underlying web component. It can be used directly in HTML or in any framework.

Properties

| Attribute | Property | Type | Default | Description | |-------------|-------------|----------|-------------|----------------------------------| | primary | primary | String | '' | The main title text. | | secondary | secondary | String | undefined | The optional subtitle text. | | extraClasses | extraClasses | String | undefined | Classes to add to the host element. |

Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

Custom Properties

Can be used with css light-dark function.

| Custom Property | Description | |----------------------------------------------|--------------------------------------| | --outbook-type-title--text-primary-color | Color for the primary title text. | | --outbook-type-title--text-secondary-color | Color for the secondary title text. |

Styling with Shadow Parts:

You can use the ::part() pseudo-element to style specific parts of the component from outside the Shadow DOM.

| Part Name | Description | |--------------------|----------------------------------| | primary-text | The span element displaying the primary title. | | secondary-text | The span element displaying the secondary title. |

Example:

outbook-type-title::part(primary-text) {
  color: blue;
  font-weight: bold;
}

outbook-type-title::part(secondary-text) {
  color: gray;
  font-style: italic;
}

License

This component is licensed under the Apache-2.0 License.