Page Loading

Development

...

Text Component

The Text Component can be used to add text content to a page...

<div id="text-component-1050" class="js-text-component text-component rte">
  {{richtext content}}
</div>

import { IMessagingService } from "../services";
import { Component } from "./component";

class TextComponent extends Component {
    constructor(componentEl: HTMLElement, messagingService: IMessagingService) {
        super(componentEl, messagingService);
    }
}

export { TextComponent };

.text-component {

    @include typography();

    --line-height:      var(--line-height-xl);
    --font-weight:      var(--font-weight-regular);
    --font-family:      var(--font-family-text);
    --font-size:        var(--text-font-size-xs);
}

Title Component

The Title Component can be used to add headings to a page...

<div id="title-component-3680" class="js-title-component title-component H1">

        <h1>

            {{titleContent}}

        </h1>

</div>  

import { IMessagingService } from "../services";
import { Component } from "./component";

class TitleComponent extends Component {
    constructor(componentEl: HTMLElement, messagingService: IMessagingService) {
        super(componentEl, messagingService);
    }
}

export { TitleComponent };

.title-component { 
    @include typography();

    h1, h2, h3, h4, h5, h6 {
        font-family: inherit;
        line-height: inherit;
        font-size: inherit;
        font-weight: inherit;
    }
}