clients/libs/components/src/anon-layout/anon-layout.component.html

<main
  class="tw-relative tw-flex tw-w-full tw-mx-auto tw-flex-col tw-bg-background-alt tw-p-5 tw-text-main"
  [ngClass]="{
    'tw-min-h-screen': clientType === 'web',
    'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
  }"
>
  <div
    [class]="
      'tw-flex tw-justify-between tw-items-center tw-w-full' + (!hideLogo() ? ' tw-mb-12' : '')
    "
  >
    @if (!hideLogo()) {
      <a
        [routerLink]="['/']"
        class="tw-w-32 sm:tw-w-[200px] tw-self-center sm:tw-self-start tw-block [&>*]:tw-align-top"
      >
        <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
      </a>
    }
    <div class="tw-ms-auto">
      <ng-content select="[slot=header-actions]"></ng-content>
    </div>
  </div>

  <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
    @let iconInput = icon();

    <!-- In some scenarios this icon's size is not limited by container width correctly -->
    <!-- Targeting the SVG here to try and ensure it never grows too large in even the media queries are not working as expected -->
    <div
      *ngIf="iconInput !== null"
      class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
    >
      <bit-icon [icon]="iconInput"></bit-icon>
    </div>

    @if (title()) {
      <!-- Small screens -->
      <h1 bitTypography="h2" class="tw-mt-2 sm:tw-hidden">
        {{ title() }}
      </h1>
      <!-- Medium to Larger screens -->
      <h1 bitTypography="h1" class="tw-mt-2 tw-hidden sm:tw-block">
        {{ title() }}
      </h1>
    }

    @if (subtitle()) {
      <div class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
    }
  </div>

  <div
    class="tw-z-10 tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
    [ngClass]="maxWidthClass"
  >
    @if (hideCardWrapper()) {
      <div class="tw-mb-6 sm:tw-mb-10">
        <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
      </div>
    } @else {
      <bit-base-card
        class="!tw-rounded-2xl tw-mb-6 sm:tw-mb-10 tw-mx-auto tw-w-full tw-bg-transparent tw-border-none tw-shadow-none sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-100 sm:tw-shadow sm:tw-p-8"
      >
        <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
      </bit-base-card>
    }
    <ng-content select="[slot=secondary]"></ng-content>
  </div>

  @if (!hideFooter()) {
    <footer class="tw-text-center tw-mt-4 sm:tw-mt-6">
      @if (showReadonlyHostname()) {
        <div bitTypography="body2">{{ "accessing" | i18n }} {{ hostname }}</div>
      } @else {
        <ng-content select="[slot=environment-selector]"></ng-content>
      }

      @if (!hideYearAndVersion) {
        <div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
        <div bitTypography="body2">{{ version }}</div>
      }
    </footer>
  }

  @if (!hideBackgroundIllustration()) {
    <div
      class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-start-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
    >
      <bit-icon [icon]="leftIllustration"></bit-icon>
    </div>
    <div
      class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-end-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
    >
      <bit-icon [icon]="rightIllustration"></bit-icon>
    </div>
  }
</main>

<ng-template #defaultContent>
  <ng-content></ng-content>
</ng-template>