Well

Overview

Use the well pattern to visually highlight a small block of text or record detail within a display block.

The well element is only themed to support text or record detail elements. It should not contain other elements.

The well element has a relatively heavy visual footprint, so it should be used sparingly.

Development

Web component development

Component reference

rui-well

Implementation

Begin by importing the rui-layout module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

Wrap text or record detail content in a rui-well component.

<rui-well>
    Powder chocolate sweet candy canes pie. Halvah chocolate jelly jelly beans sugar plum. Cheesecake ice cream sweet roll
    toffee brownie shortbread.
</rui-well>

Angular wrapper development

Wrapper reference

jha-well

Implementation

Begin by importing the JhaLayoutModule module into your application.

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

@NgModule({
    imports: [
        ...
        JhaLayoutModule,
        ...
    ]
})

export class AppModule(){}

Wrap text or record detail content in a jha-well component.

<jha-well>
    Powder chocolate sweet candy canes pie. Halvah chocolate jelly jelly beans sugar plum. Cheesecake ice cream sweet roll
    toffee brownie shortbread.
</jha-well>

Component playground

Design

Figma design

First add a well component to the artboard.

Then layer text and/or record detail elements above the well element. Size the well element to fit the content.

Adobe XD design

First add a well component to the artboard.

Then layer text and/or record detail elements above the well element. Size the well element to fit the content.