Cover

A layout primitive that centres its content both ways, with room around it: the frame for a view that is one card or one message, such as sign-in. size="screen" (the default) is at least the viewport's height; size="fill" takes the space its parent gives it.

Centered content

A cover centers its content in the available space.

Welcome back

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cover/ui-cover.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-card/ui-card.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-text/ui-text.html"
>

<ui-cover
  size="fill"
>
  <ui-card
    padding="sm"
  >
    <ui-text
      variant="label"
    >Welcome back</ui-text>
  </ui-card>
</ui-cover>

<script setup>
  import { UiCard, UiCover, UiText } from "@threadlabs/looma";
</script>

<template>
  <UiCover
    size="fill"
  >
    <UiCard
      padding="sm"
    >
      <UiText
        variant="label"
      >Welcome back</UiText>
    </UiCard>
  </UiCover>
</template>

import { UiCard, UiCover, UiText } from "@threadlabs/looma";

export default function Example() {
  return <UiCover
    size="fill"
  >
    <UiCard
      padding="sm"
    >
      <UiText
        variant="label"
      >Welcome back</UiText>
    </UiCard>
  </UiCover>;
}

/** @jsxImportSource preact */
import { UiCard, UiCover, UiText } from "@threadlabs/looma";

export default function Example() {
  return <UiCover
    size="fill"
  >
    <UiCard
      padding="sm"
    >
      <UiText
        variant="label"
      >Welcome back</UiText>
    </UiCard>
  </UiCover>;
}

<script>
  import { UiCard, UiCover, UiText } from "@threadlabs/looma";
</script>

<UiCover
  size="fill"
>
  <UiCard
    padding="sm"
  >
    <UiText
      variant="label"
    >Welcome back</UiText>
  </UiCard>
</UiCover>

import { Component } from "@angular/core";
import { UiCard, UiCover, UiText } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCover, UiCard, UiText],
  template: `
    <div
      ui-cover
      [size]="'fill'"
    >
      <ng-template
        ui-card
        [padding]="'sm'"
      >
        <ng-template
          ui-text
          [variant]="'label'"
        >Welcome back</ng-template>
      </ng-template>
    </div>
  `,
})
export default class Example {}

Default

Centres one card in the space, both ways. size="screen" (the default) is at least the viewport's height; here size="fill" fills a fixed frame.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cover/ui-cover.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-card/ui-card.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-text/ui-text.html"
>

<div
  style="block-size: 20rem; display: flex; flex-direction: column"
>
  <ui-cover
    size="fill"
  >
    <ui-card
      variant="elevated"
    >
      <ui-text
        weight="semibold"
      >Sign in to Acme</ui-text>
    </ui-card>
  </ui-cover>
</div>

<script setup>
  import { UiCard, UiCover, UiText } from "@threadlabs/looma";
</script>

<template>
  <div
    style="block-size: 20rem; display: flex; flex-direction: column"
  >
    <UiCover
      size="fill"
    >
      <UiCard
        variant="elevated"
      >
        <UiText
          weight="semibold"
        >Sign in to Acme</UiText>
      </UiCard>
    </UiCover>
  </div>
</template>

import { UiCard, UiCover, UiText } from "@threadlabs/looma";

export default function Example() {
  return <div
    style={{"blockSize":"20rem","display":"flex","flexDirection":"column"}}
  >
    <UiCover
      size="fill"
    >
      <UiCard
        variant="elevated"
      >
        <UiText
          weight="semibold"
        >Sign in to Acme</UiText>
      </UiCard>
    </UiCover>
  </div>;
}

/** @jsxImportSource preact */
import { UiCard, UiCover, UiText } from "@threadlabs/looma";

export default function Example() {
  return <div
    style={{"blockSize":"20rem","display":"flex","flexDirection":"column"}}
  >
    <UiCover
      size="fill"
    >
      <UiCard
        variant="elevated"
      >
        <UiText
          weight="semibold"
        >Sign in to Acme</UiText>
      </UiCard>
    </UiCover>
  </div>;
}

<script>
  import { UiCard, UiCover, UiText } from "@threadlabs/looma";
</script>

<div
  style="block-size: 20rem; display: flex; flex-direction: column"
>
  <UiCover
    size="fill"
  >
    <UiCard
      variant="elevated"
    >
      <UiText
        weight="semibold"
      >Sign in to Acme</UiText>
    </UiCard>
  </UiCover>
</div>

import { Component } from "@angular/core";
import { UiCard, UiCover, UiText } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCover, UiCard, UiText],
  template: `
    <div
      style="block-size: 20rem; display: flex; flex-direction: column"
    >
      <div
        ui-cover
        [size]="'fill'"
      >
        <ng-template
          ui-card
          [variant]="'elevated'"
        >
          <ng-template
            ui-text
            [weight]="'semibold'"
          >Sign in to Acme</ng-template>
        </ng-template>
      </div>
    </div>
  `,
})
export default class Example {}

A message

A whole view that is one message, such as signing out, centred in its space.

Signing you out…

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-cover/ui-cover.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-status-message/ui-status-message.html"
>

<div
  style="block-size: 12rem; display: flex; flex-direction: column"
>
  <ui-cover
    size="fill"
  >
    <ui-status-message
      kind="loading"
    >Signing you out…</ui-status-message>
  </ui-cover>
</div>

<script setup>
  import { UiCover, UiStatusMessage } from "@threadlabs/looma";
</script>

<template>
  <div
    style="block-size: 12rem; display: flex; flex-direction: column"
  >
    <UiCover
      size="fill"
    >
      <UiStatusMessage
        kind="loading"
      >Signing you out…</UiStatusMessage>
    </UiCover>
  </div>
</template>

import { UiCover, UiStatusMessage } from "@threadlabs/looma";

export default function Example() {
  return <div
    style={{"blockSize":"12rem","display":"flex","flexDirection":"column"}}
  >
    <UiCover
      size="fill"
    >
      <UiStatusMessage
        kind="loading"
      >Signing you out…</UiStatusMessage>
    </UiCover>
  </div>;
}

/** @jsxImportSource preact */
import { UiCover, UiStatusMessage } from "@threadlabs/looma";

export default function Example() {
  return <div
    style={{"blockSize":"12rem","display":"flex","flexDirection":"column"}}
  >
    <UiCover
      size="fill"
    >
      <UiStatusMessage
        kind="loading"
      >Signing you out…</UiStatusMessage>
    </UiCover>
  </div>;
}

<script>
  import { UiCover, UiStatusMessage } from "@threadlabs/looma";
</script>

<div
  style="block-size: 12rem; display: flex; flex-direction: column"
>
  <UiCover
    size="fill"
  >
    <UiStatusMessage
      kind="loading"
    >Signing you out…</UiStatusMessage>
  </UiCover>
</div>

import { Component } from "@angular/core";
import { UiCover, UiStatusMessage } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiCover, UiStatusMessage],
  template: `
    <div
      style="block-size: 12rem; display: flex; flex-direction: column"
    >
      <div
        ui-cover
        [size]="'fill'"
      >
        <div
          ui-status-message
          [kind]="'loading'"
        >Signing you out…</div>
      </div>
    </div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: div

Attributes

Name	Description	Property	Type	Default	Allowed values
`size`	How tall the cover is. screen is at least the viewport's height, for a view that is one centred card, such as sign-in; fill takes the space its parent gives it.	`size`	`keyword`	`screen`	`screen, fill`

Framework props

Name	Type	Default	Allowed values
`size`	`"screen" \| "fill"`	`screen`	`screen, fill`

Events

No events.

Slots

Name	Purpose
`default`	Default child content.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-space-4`	`—`
`--ui-space-6`	`—`