Card

<form>
  <vwc-card class="signin" headline="Sign in" subtitle="Use your account credentials to continue">
    <vwc-layout slot="body" row-spacing="small" class="fields">
      <vwc-text-field label="Email address" type="email" name="email" autocomplete="username" required></vwc-text-field>

        <!-- Password -->
        <vwc-text-field label="Password" type="password" name="password" autocomplete="current-password" required></vwc-text-field>

        <!-- Remember me -->
        <vwc-checkbox label="Remember me" name="remember"></vwc-checkbox>
      </vwc-layout>

      <div class="actions" slot="footer">
        <vwc-button appearance="ghost" label="Forgot password?" type="button"></vwc-button>

        <vwc-button appearance="filled" connotation="cta" label="Sign in" type="submit"></vwc-button>
      </div>
    </vwc-card>

</form>

<style>
  .signin {
    max-inline-size: 400px;
    margin: 2rem auto;
  }
</style>

<vwc-layout>
  <vwc-card class="card-item" headline="Computer App" subtitle="all about our web app" text="Neque porro quisquam est qui dolorem ipsum.">
    <vwc-icon slot="icon" name="app-line"></vwc-icon>
    <div class="image-wrapper" slot="media">
      <img src="https://fastly.picsum.photos/id/48/367/267.jpg?hmac=fENUWb0yT2VgcvIXjwzBiAZ6QqdYG4rt2q8gok9VrZ0" alt="" />
    </div>
    <vwc-button slot="meta" appearance="filled" aria-label="unpin item">
      <vwc-icon slot="icon" name="pin-2-line"></vwc-icon>
    </vwc-button>
    <vwc-button slot="footer" class="learn-more" icon-trailing shape="pill" label="Learn More" appearance="outlined">
      <vwc-icon slot="icon" name="arrow-bold-right-line"></vwc-icon>
    </vwc-button>
  </vwc-card>
  <vwc-card class="card-item" headline="Computer and Books" subtitle="all about the books and the computer" text="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.">
    <vwc-icon slot="icon" name="ai-line"></vwc-icon>
    <div class="image-wrapper" slot="media">
      <img src="https://fastly.picsum.photos/id/20/367/267.jpg?hmac=h8YwkzRUiuyBhJ-zQTrSCYop1hhNGtW00nITwHy1V4I" alt="" />
    </div>
    <vwc-badge slot="meta" class="card-badge" text="AI Studio" shape="pill" appearance="subtle" connotation="information"></vwc-badge>
    <vwc-button slot="footer" class="learn-more" icon-trailing shape="pill" label="Learn More" appearance="outlined">
      <vwc-icon slot="icon" name="arrow-bold-right-line"></vwc-icon>
    </vwc-button>
  </vwc-card>
  <vwc-card class="card-item" headline="Comunication API" subtitle="all about the comunication" text="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Porro quisquam est qui dolorem ipsum quia dolor.">
    <vwc-icon slot="icon" name="plug-line"></vwc-icon>
    <div class="image-wrapper" slot="media">
      <img src="https://fastly.picsum.photos/id/180/367/267.jpg?hmac=XAmHD3CeF1SZodNhSTtrCVFsSUnlee5bjFyJsrqxyCM" alt="" />
    </div>
    <vwc-badge slot="meta" class="card-badge" text="API" shape="pill" appearance="subtle" connotation="information"></vwc-badge>
    <vwc-button slot="footer" class="learn-more" icon-trailing shape="pill" label="Learn More" appearance="outlined">
      <vwc-icon slot="icon" name="arrow-bold-right-line"></vwc-icon>
    </vwc-button>
  </vwc-card>
  <vwc-card class="card-item" headline="Computer App" subtitle="all about our web app" text="Neque porro quisquam est qui dolorem ipsum.">
    <vwc-icon slot="icon" name="app-line"></vwc-icon>
    <div class="image-wrapper" slot="media">
      <img src="https://fastly.picsum.photos/id/48/367/267.jpg?hmac=fENUWb0yT2VgcvIXjwzBiAZ6QqdYG4rt2q8gok9VrZ0" alt="" />
    </div>
    <vwc-badge slot="meta" class="card-badge" text="VBC" shape="pill" appearance="subtle" connotation="information"></vwc-badge>
    <vwc-button slot="footer" class="learn-more" icon-trailing shape="pill" label="Learn More" appearance="outlined">
      <vwc-icon slot="icon" name="arrow-bold-right-line"></vwc-icon>
    </vwc-button>
  </vwc-card>
</vwc-layout>

<style>
  .image-wrapper {
    inline-size: 100%;
    block-size: 200px;
    overflow: hidden;
  }
  .image-wrapper img {
    inline-size: 100%;
  }
  .card-badge {
    margin-block-start: 0;
  }
  .learn-more {
    margin-block-start: 24px;
  }
</style>

<vwc-layout class="card-layout" role="group" aria-label="pick your ios">
  <vwc-selectable-box tight clickable-box>
    <vwc-card headline="Android" subtitle="My IOS is Android" appearance="ghost">
      <vwc-brand class="card-icon" slot="graphic" name="android" style="--card-icon-color: #A4C439"></vwc-brand>
    </vwc-card>
  </vwc-selectable-box>
  <vwc-selectable-box tight clickable-box>
    <vwc-card headline="Apple" subtitle="My IOS is Apple" appearance="ghost">
      <vwc-brand class="card-icon" slot="graphic" name="apple" style="--card-icon-color: #555555"></vwc-brand>
    </vwc-card>
  </vwc-selectable-box>
  <vwc-selectable-box tight clickable-box>
    <vwc-card headline="Windows" subtitle="My IOS is Windows" appearance="ghost">
      <vwc-brand class="card-icon" slot="graphic" name="windows"></vwc-brand>
    </vwc-card>
  </vwc-selectable-box>
</vwc-layout>

<style>
  .card-layout {
    --layout-grid-template-columns: repeat(var(--_auto-sizing), minmax(220px, 1fr));
  }
  .card-icon {
    color: var(--card-icon-color);
    font-size: 40px;
  }
</style>