Tile

Overview

Buttons display only a very small amount of text. However, in some cases it can be helpful to include additional contextual information on a button, to help the user understand at a glance what data or functionality lies beyond that button click. To do this, use the Tiles pattern.

Each tile displays a title and an optional icon at the top. The content displays below that.

Tiles come in one of three sizes: large, wide, and small. Large is a large square and small is a small square. Wide is a short, fat rectangle. The large tile is the size of four small tiles rolled together, with their margins taken into account. Wide is the size of two small tiles side-by-side (with margins taken into account). So tiles all fit nicely together in a grid layout, despite the individual sizes of each tile.

You can leave the tile’s appearance at its default value, or you can choose from a highlighted appearance to call attention to the tile. You can also choose from 3 alternate themed appearances to help visually categorize the tiles, or an error appearance to indicate an error state.

Each tile will clip any content that goes outside of the tile’s content area, so you must pick the correct tile size — Large, Wide, or Small — in order to ensure that its content fits.

The Small tile size displays the icon at top, followed by the header, followed by a very small amount of text. The Large and Wide sizes display the icon on the right, with the header and content on the left, and should be used when you want to display more than a tiny amount of data.

Tiles can be laid out in one of two ways:

• Using relative positioning, where tiles float left-to-right, top-to-bottom, filling the available width and spilling to new rows as needed. This is the typical case. At mobile size the tiles drop into a vertically scrolling list, where each tile takes the full screen width.
  • Note that there may be gaps on the right side when you combine several tiles of differing size using relative positioning, as tiles of different size flow to new lines. This is to be expected.
  • IMPORTANT: If you’re using relative positioning, you must contain the list of floating tiles within a <div class="clearfix"></div> block, otherwise the tiles can roll up into the title area.
• Using fixed positioning with the layout grid. This is useful if you have a fixed number of tiles and want more control over their positioning.

Development

Web component development

Component reference

rui-tile

Implementation

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

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

Nest the tile’s content within the rui-tile tag. The content is clipped to the tile’s size, so be sure to select a rui-size value that is appropriate for the tile. Scrolling is not supported within tiles.

To create a large tile like this:

We could use HTML like this:

<rui-tile titleText="Customer Info" iconType="information" size="large">
    <p>
        {{customerInfo.name}}<br />
        {{customerInfo.address}}<br />
        {{customerInfo.city}}, {{customerInfo.state}}
        {{customerInfo.zip}}<br />
    </p>
    <p>
        {{customerInfo.homePhone}}<br />
        {{customerInfo.primaryEmail}}<br />
    </p>
</rui-tile>

The content is laid out slightly differently for small tiles, with the icon up top, the header below that, and a tiny amount of text optionally below that.

To create a small tile like this:

We could use HTML like this:

<rui-tile titleText="Email" iconType="mail" size="small">
    {{emailList.length}}
</rui-tile>

The use of custom icons is also supported. This can be achieved by using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

<rui-tile titleText="Email" size="small">
    <svg slot="custom-icon" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76 4.224-1.76 1.76-4.224v-2.016h8v2.016q0 2.496 1.792 4.256t4.224 1.728q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76h-2.016v-8h2.016q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76-4.256 1.76-1.76 4.256q0 0.992 0.384 1.984h-8.736q0.352-1.024 0.352-1.984 0-2.496-1.76-4.256t-4.224-1.76-4.256 1.76-1.76 4.256 1.76 4.224 4.256 1.76h1.984v8h-1.984q-2.528 0-4.256 1.792t-1.76 4.224zM4 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM4 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM12 20v-8h8v8h-8zM24 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM24 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408z"></path>
    </svg>
    {{emailList.length}}
</rui-tile>

Angular wrapper development

Wrapper reference

jha-tile

Implementation

Begin by importing the JhaTileModule module into your application.

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

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

export class AppModule(){}

Nest the tile’s content within the rui-tile tag. The content is clipped to the tile’s size, so be sure to select a rui-size value that is appropriate for the tile. Scrolling is not supported within tiles.

To create a large tile like this:

We could use HTML like this:

<jha-tile jhaTitle="Customer Info" jhaIconType="Information" jhaSize="Large">
    <p>
        {{customerInfo.name}}<br />
        {{customerInfo.address}}<br />
        {{customerInfo.city}}, {{customerInfo.state}}
        {{customerInfo.zip}}<br />
    </p>
    <p>
        {{customerInfo.homePhone}}<br />
        {{customerInfo.primaryEmail}}<br />
    </p>
</jha-tile>

Place the tile’s content within the jha-tile tags. The content is clipped to the tile’s size, so be sure to select a jhaSize value that is appropriate for the tile. Scrolling is not supported within tiles.

The content is laid out slightly differently for small tiles, with the icon up top, the header below that, and a tiny amount of text optionally below that.

To create a small tile like this:

We could use HTML like this:

<jha-tile jhaTitle="Email" jhaIconType="Mail" jhaSize="Small">
    {{emailList.length}}
</jha-tile>

The use of custom icons is also supported. This can be achieved by using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

<jha-tile jhaTitle="Email" jhaSize="small">
    <svg slot="custom-icon" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76 4.224-1.76 1.76-4.224v-2.016h8v2.016q0 2.496 1.792 4.256t4.224 1.728q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76h-2.016v-8h2.016q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76-4.256 1.76-1.76 4.256q0 0.992 0.384 1.984h-8.736q0.352-1.024 0.352-1.984 0-2.496-1.76-4.256t-4.224-1.76-4.256 1.76-1.76 4.256 1.76 4.224 4.256 1.76h1.984v8h-1.984q-2.528 0-4.256 1.792t-1.76 4.224zM4 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM4 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM12 20v-8h8v8h-8zM24 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM24 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408z"></path>
    </svg>
    {{emailList.length}}
</jha-tile>

Asynchronous Tile Layout

If your view conditionally creates different tiles based on responses from separate asynchronous service calls, with tiles only being created when appropriate based on the service call response, this can result in tiles popping into your layout at different times, as each separate service call completes. This can create a situation where the user goes to click a tile, only to have a new tile suddenly display in the spot previously occupied by the first tile, resulting in the wrong tile being clicked.

Here are 3 options for solving this problem:

• Always display all tiles in the layout. If a tile’s presence is optional (depending on the service call result), then disable the tile until its associated service call returns. If the service call response indicates that the tile applies in this case, then enable the tile. Otherwise leave it disabled. This creates a static layout that prevents tiles from moving out from underneath the user’s mouse. The downside to this approach is that the view could potentially include a lot of (disabled) tiles that don’t apply to the current situation.
• Display the jha-function-view’s busy indicator until all services calls for the view return. This allows you to display only the tiles that apply to the current situation and prevents the user can inadvertently interacting with the wrong tile. The downside to this approach is that the user is unable to interact with any tiles until all services calls complete.
• Daisy chain your service calls one after the other, in order to load the screen more synchronously. Call services for tiles at the bottom-right of the screen after calling services for tiles at the top-left of the screen. That way new tiles always pop into place at the end instead of in the middle. The downside to this approach is that it can cause the screen to take longer to load if it requires many service calls.

Component playground

Design

Figma design

Tiles come in 3 sizes: Large, Wide, and Small.

Tiles also have multiple options for styling: Normal, Highlighted, Alternate 1, Alternate 2, Alternate 3, Disabled, and Error.

Adobe XD design

Tiles come in 3 sizes: Large, Wide, and Small.

Tiles also have multiple options for styling: Normal, Highlighted, Alternate 1, Alternate 2, Alternate 3, Disabled, and Error.