# @myuw-web-components/myuw-card

> ![MyUW Card](myuw-card.png)

Latest version **4.0.0** (published 2020-02-10) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @myuw-web-components/myuw-card
pnpm add @myuw-web-components/myuw-card
yarn add @myuw-web-components/myuw-card
bun add @myuw-web-components/myuw-card
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2020-02-10 |
| First published | 2019-11-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 78.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | apetro, apsummers, jimhelwig, jordanalanjones, myuw-web-components-jenkins, paulerickson, scott.berg, sibley, vertein, zeke.witter |

## Links

- npm: https://www.npmjs.com/package/@myuw-web-components/myuw-card
- Repository: https://github.com/myuw-web-components/myuw-card
- Homepage: https://github.com/myuw-web-components/myuw-card#readme
- Issues: https://github.com/myuw-web-components/myuw-card/issues
- npm.io page: https://npm.io/package/@myuw-web-components/myuw-card

## Recent versions

- 4.0.0 (latest) — 2020-02-10
- 3.2.1 — 2020-01-31
- 3.2.0 — 2020-01-30
- 3.1.0 — 2020-01-30
- 3.0.0 — 2020-01-30
- 2.0.0 — 2020-01-28
- 1.3.1 — 2019-11-26

## README

# myuw-card

![MyUW Card](myuw-card.png)

## Getting Started

Import and include the component as follows:

```html
<script type="module" src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-card@latest/myuw-card.min.mjs"></script>

<!-- fallback for browsers without ES2015 module support -->
<script nomodule src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-card@latest/myuw-card.min.js"></script>

<myuw-card-frame>
  <myuw-card-header>
    Course Search and Enroll
    <myuw-card-menu fname="course-search-and-enroll">
      Search for courses, plan your next semester and enroll in one convenient, easy-to-use app.
    </myuw-card-menu>
  </myuw-card-header>
  <myuw-card-content>
    <myuw-icon-link href="https://www.google.com">
      <img src="/path/to/icon.svg" alt="icon description">
    </myuw-icon-link>
  </myuw-card-content>
  <myuw-card-footer href="https://www.google.com">
    Launch full app
  </myuw-card-footer>
</myuw-card-frame>
```

_Note:_ The evergreen "latest" version can be used for convenience, but in production settings it is
recommended to use the latest [release version](https://github.com/myuw-web-components/myuw-card/releases)
specifically, and upgrade only after testing!

### Composable Card Layouts

MyUW Card layouts are composable, which enables a degree of flexibility with widget content. The example
above shows the basic usage, but it is possible to mix and match content blocks to create new widget
variations.

All content blocks must be placed inside a `<myuw-card-content></myuw-card-content>` component.

#### Basic icon link

```html
<myuw-card-content>
  <myuw-icon-link href="https://wisc.edu">
    <img src="/path/to/icon.svg" alt="icon description">
  </myuw-icon-link>
<myuw-card-content>
```

#### Icon link with message

```html
<myuw-card-content>
  <myuw-card-message>Your message here</myuw-card-message>
  <myuw-icon-link href="https://wisc.edu">
    <img src="/path/to/icon.svg" alt="icon description">
  </myuw-icon-link>
<myuw-card-content>
```

#### List of links with message

```html
<myuw-card-content>
  <myuw-card-message variant="warn">
    You need to click these buttons!
  </myuw-card-message>
  <myuw-fab-link href="https://www.google.com">
    <img slot="fab-icon" src="/path/to/icon.svg" alt="icon description">
    <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">
    <p>Report lost card</p>
  </myuw-fab-link>
</myuw-card-content>
```

#### Two rows of list of links

```html
<myuw-card-content>
  <myuw-link-list>
    <myuw-fab-link href="https://www.google.com">
      <img slot="fab-icon" src="/path/to/icon.svg" alt="icon description">
      <p>Jump around</p>
    </myuw-fab-link>
    <myuw-fab-link href="https://www.google.com">
      <img slot="fab-icon" src="/path/to/icon.svg" alt="icon description">
      <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="/path/to/icon.svg" alt="icon description">
      <p>Deposit money</p>
    </myuw-fab-link>
    <myuw-fab-link href="https://www.google.com">
      <img slot="fab-icon" src="/path/to/icon.svg" alt="icon description">
      <p>Report lost card</p>
    </myuw-fab-link>
  </myuw-link-list>
</myuw-card-content>
```

### Customization

The following CSS variables are defined for customization:

| Variable               | Description                             | Default |
|------------------------|-----------------------------------------|---------|
|`--myuw-fab-color`      |FAB button background color              |`#0479a8`|
|`--myuw-fab-color-hover`|FAB button background color when hovering|`#034e6c`|

## Contributing

See also: [CONTRIBUTING](contributing.md)

### Developer Requirements

* [Node.js](https://nodejs.org/en/)
* [Yarn](https://yarnpkg.com/lang/en/) (optional but recommended)
* npm (if not using Yarn)

Install dependencies:

```sh
$ yarn install
# or
$ npm install
```

Run the development server:

```sh
$ yarn start
# or
$ npm start
```

Build modules to `dist/`:

```sh
$ yarn build
# or
$ npm run build
```

[ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) will be install
and are already configured. It is recommended that you use them.

---
_Source: https://npm.io/package/@myuw-web-components/myuw-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._