+
+ 
+ Image Card
+ Card with an image and a footer button.
+
+
+
+ Plain Card
+ A card with just a heading, text, and a footer with two buttons.
+
+
+
+
+ 
+
+ A card that is clickable with an image, plus a footer with one button.
+
+
+
+ 
+ Aspect Ratio
+ A card where a taller image is forced into the specified aspect ratio.
+
+
+ 
+
+ A card with an icon, and the card is clickable.
+
+
+
+
+ Aspect Ratio Icon
+
+ A card with an icon, where the space around the icon has an aspect ratio.
+
+
+
+
+
+ Animal sciences students extend their learning and career networks beyond the classroom.
+
+
+
diff --git a/src/ilw-card.css b/src/ilw-card.css
index e69de29..5ae9f4c 100644
--- a/src/ilw-card.css
+++ b/src/ilw-card.css
@@ -0,0 +1,33 @@
+@layer base {
+ :root {
+ --ilw-card--aspect-ratio: 16/10;
+ --ilw-card--content-padding-top: 1rem;
+ --ilw-card--content-padding-right: 2rem;
+ --ilw-card--content-padding-bottom: 1rem;
+ --ilw-card--content-padding-left: 2rem;
+ --ilw-card--font-size: 1.2em;
+
+ --ilw-card--background: var(--ilw-background--color);
+ --ilw-card--heading-color: var(--il-orange);
+ }
+
+ ilw-card {
+ border: 1px solid var(--il-blue);
+ }
+
+ ilw-card [slot=image] {
+ width: 100%;
+ }
+
+ ilw-card [slot=icon] {
+ max-height: 80px;
+ max-width: 120px;
+ }
+
+
+ ilw-card > h2:first-of-type,
+ ilw-card > h3:first-of-type,
+ ilw-card > h4:first-of-type {
+ margin-top: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/ilw-card.js b/src/ilw-card.js
index 37e5f5f..ba5d976 100644
--- a/src/ilw-card.js
+++ b/src/ilw-card.js
@@ -1,12 +1,19 @@
-import { LitElement, html } from 'lit';
+import {LitElement, html} from 'lit';
import styles from './ilw-card.styles';
import './ilw-card.css';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+
class Card extends LitElement {
static get properties() {
return {
- theme: { type: String, attribute: true }
+ theme: {},
+ clickable: {type: Boolean},
+ align: {},
+ aspectRatio: {},
+ _hasGraphic: {state: true, type: Boolean},
};
}
@@ -16,19 +23,52 @@ class Card extends LitElement {
constructor() {
super();
- this.align = '';
- this.focus = '';
- this.shadow = false;
- this.collapse = false;
- this.theme = '';
+ this.align = 'left';
+ this.theme = 'white';
+ this.aspectRatio = '';
+ this.clickable = false;
+ this._hasGraphic = false;
+ }
+
+ _slotsChanged() {
+ const images = this.shadowRoot.querySelector('slot[name=image]');
+ if (images.assignedElements().length > 0) {
+ this._hasGraphic = true;
+ return;
+ }
+ const icons = this.shadowRoot.querySelector('slot[name=icon]');
+ if (icons.assignedElements().length > 0) {
+ this._hasGraphic = true;
+ return;
+ }
+ this._hasGraphic = false;
}
render() {
+ const classes = {
+ graphic: this._hasGraphic,
+ card: true,
+ 'force-ratio': !!this.aspectRatio
+ }
+ const styles = {
+ '--ilw-card--aspect-ratio': this.aspectRatio ? this.aspectRatio : null
+ }
return html`
-