index.html

<style>
  body {
    background: #cccccc;
  }
  .demo__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 290px);
    grid-gap: 10px;
    grid-auto-rows: min-content;
  }
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:300, 400&display=swap" rel="stylesheet">
<script type="module" src="dist/myuw-card.mjs"></script>
<div class="demo__container">
  <myuw-card-frame>
    <myuw-card-header>
      Icon Link
      <myuw-card-menu fname="icon-link">
        Click the icon to go somewhere new.
      </myuw-card-menu>
    </myuw-card-header>
    <myuw-card-content>
      <myuw-icon-link href="https://www.google.com">
        <img src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
      </myuw-icon-link>
    </myuw-card-content>
    <myuw-card-footer href="https://www.google.com">
      Launch app
    </myuw-card-footer>
  </myuw-card-frame>
  <myuw-card-frame>
    <myuw-card-header>
      Icon Link and Message
      <myuw-card-menu fname="icon-link-message">
        Add a personal message for your users.
      </myuw-card-menu>
    </myuw-card-header>
    <myuw-card-content>
      <myuw-card-message>
        You've got mail!
      </myuw-card-message>
      <myuw-icon-link href="https://www.google.com">
        <img src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
      </myuw-icon-link>
    </myuw-card-content>
    <myuw-card-footer href="https://www.google.com">
      Launch app
    </myuw-card-footer>
  </myuw-card-frame>
  <myuw-card-frame>
    <myuw-card-header>
      Icon Link and Warn Message
      <myuw-card-menu fname="icon-link-warn">
        Draw attention to your important action.
      </myuw-card-menu>
    </myuw-card-header>
    <myuw-card-content>
      <myuw-card-message variant="warn">
        Time to wake up!
      </myuw-card-message>
      <myuw-icon-link href="https://www.google.com">
        <img src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
      </myuw-icon-link>
    </myuw-card-content>
    <myuw-card-footer href="https://www.google.com">
      Launch app
    </myuw-card-footer>
  </myuw-card-frame>
  <myuw-card-frame>
    <myuw-card-header>
      List of Links with Message
      <myuw-card-menu fname="link-list-message">
        Mix and match for your specific needs.
      </myuw-card-menu>
    </myuw-card-header>
    <myuw-card-content>
      <myuw-card-message variant="warn">
        You need to click these buttons!
      </myuw-card-message>
      <myuw-link-list>
        <myuw-fab-link href="https://www.google.com">
          <img slot="fab-icon" src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
          <p>Deposit money</p>
        </myuw-fab-link>
        <myuw-fab-link href="https://www.google.com">
          <img slot="fab-icon" src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
          <p>Report lost card</p>
        </myuw-fab-link>
      </myuw-link-list>
    </myuw-card-content>
    <myuw-card-footer href="https://www.google.com">
      Launch app
    </myuw-card-footer>
  </myuw-card-frame>
  <myuw-card-frame>
    <myuw-card-header>
      Multiple Link List Rows
      <myuw-card-menu fname="two-link-list">
        Add multiple rows for up to four buttons.
      </myuw-card-menu>
    </myuw-card-header>
    <myuw-card-content>
      <myuw-link-list>
        <myuw-fab-link href="https://www.google.com">
          <img slot="fab-icon" src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
          <p>Jump around</p>
        </myuw-fab-link>
        <myuw-fab-link href="https://www.google.com">
          <img slot="fab-icon" src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
          <p>Sit on Terrace</p>
        </myuw-fab-link>
      </myuw-link-list>
      <myuw-link-list>
        <myuw-fab-link href="https://www.google.com">
          <img slot="fab-icon" src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
          <p>Deposit money</p>
        </myuw-fab-link>
        <myuw-fab-link href="https://www.google.com">
          <img slot="fab-icon" src="https://my.wisc.edu/images/widgetIcons/canvas-logo.svg" alt="canvas logo">
          <p>Report lost card</p>
        </myuw-fab-link>
      </myuw-link-list>
    </myuw-card-content>
    <myuw-card-footer href="https://www.google.com">
      Launch app
    </myuw-card-footer>
  </myuw-card-frame>
</div>