diff --git a/apps/core-lib-dev/src/app/app.element.ts b/apps/core-lib-dev/src/app/app.element.ts
index c63bd19989..1ad8ec50f0 100644
--- a/apps/core-lib-dev/src/app/app.element.ts
+++ b/apps/core-lib-dev/src/app/app.element.ts
@@ -80,9 +80,9 @@ export class AppElement extends LitElement {
private handleKeyDown = (event: KeyboardEvent) => {
if (event.key === '\\') {
- const themeElement = this.querySelector('[gds-element="gds-theme"]')
+ const themeElement = this.querySelector('html')
if (themeElement) {
- const currentScheme = themeElement.getAttribute('color-scheme')
+ const currentScheme = themeElement.getAttribute('gds-theme')
themeElement.setAttribute(
'color-scheme',
currentScheme === 'light' ? 'dark' : 'light'
diff --git a/apps/core-lib-dev/src/app/dashboard/dashboard.element.ts b/apps/core-lib-dev/src/app/dashboard/dashboard.element.ts
index 0e8d1f510e..f815016699 100644
--- a/apps/core-lib-dev/src/app/dashboard/dashboard.element.ts
+++ b/apps/core-lib-dev/src/app/dashboard/dashboard.element.ts
@@ -3,15 +3,24 @@ import { customElement } from 'lit/decorators.js'
import { html } from '@sebgroup/green-core/scoping'
+import '@sebgroup/green-core/components/badge/index.js'
import '@sebgroup/green-core/components/card/index.js'
import '@sebgroup/green-core/components/flex/index.js'
import '@sebgroup/green-core/components/grid/index.js'
import '@sebgroup/green-core/components/icon/icons/arrow-left-right.js'
import '@sebgroup/green-core/components/icon/icons/plus-large.js'
import '@sebgroup/green-core/components/icon/icons/calendar.js'
+import '@sebgroup/green-core/components/icon/icons/chevron-right.js'
+import '@sebgroup/green-core/components/icon/icons/credit-card.js'
+import '@sebgroup/green-core/components/icon/icons/knife-spoon.js'
+import '@sebgroup/green-core/components/icon/icons/arrow-out-of-box.js'
+import '@sebgroup/green-core/components/mask/mask.js'
import '@sebgroup/green-core/components/icon/icons/chevron-bottom.js'
import '../../components/jit'
import './dashboard.css'
+import '../../components/accounts'
+import '../../common/card'
+import '../../common/list-item'
@customElement('gds-dashboard')
export class CardExample extends LitElement {
@@ -48,7 +57,107 @@ export class CardExample extends LitElement {
- [CONTENT GOES HERE]
+
+
+ Konton
+
+
+
+
+
+
+
+
+
+ John Doe
+
+ 5896 13 000 20
+
+
+
+ 10 000,00
+
+ 5 december
+
+
+
+
+ Det saknas pengar för nästa dragning.
+
+
+
+
+
+
+
+
+ John Doe
+
+ 5896 13 000 20
+
+
+
+ 47 300,00
+
+ 5 december
+
+
+
+
+
+
+
+
+
+
+ John Doe
+
+ 5896 13 000 20
+
+
+
+ 2 010 000,00
+
+ 5 december
+
+
+
+
+
+
+
+ Se alla
+
[CONTENT GOES HERE]
diff --git a/apps/core-lib-dev/src/common/card.ts b/apps/core-lib-dev/src/common/card.ts
new file mode 100644
index 0000000000..65147167ff
--- /dev/null
+++ b/apps/core-lib-dev/src/common/card.ts
@@ -0,0 +1,36 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/button/index.js'
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'
+
+@customElement('tp-card')
+export class TPCard extends LitElement {
+ connectedCallback() {
+ super.connectedCallback()
+ }
+
+ render() {
+ return html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+}
diff --git a/apps/core-lib-dev/src/common/list-item.ts b/apps/core-lib-dev/src/common/list-item.ts
new file mode 100644
index 0000000000..f4bbdf0929
--- /dev/null
+++ b/apps/core-lib-dev/src/common/list-item.ts
@@ -0,0 +1,45 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/button/index.js'
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'
+
+@customElement('tp-list-item')
+export class TPCard extends LitElement {
+ connectedCallback() {
+ super.connectedCallback()
+ }
+
+ render() {
+ return html`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+}
diff --git a/apps/core-lib-dev/src/components/accounts.ts b/apps/core-lib-dev/src/components/accounts.ts
new file mode 100644
index 0000000000..7542d32bfe
--- /dev/null
+++ b/apps/core-lib-dev/src/components/accounts.ts
@@ -0,0 +1,30 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/button/index.js'
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'
+
+@customElement('gds-accounts')
+export class GdsAccounts extends LitElement {
+ connectedCallback() {
+ super.connectedCallback()
+ }
+
+ render() {
+ return html`
+
+
+ Konton
+
+
+
+
+
+ `
+ }
+}
diff --git a/apps/core-lib-dev/src/components/card-carousel.ts b/apps/core-lib-dev/src/components/card-carousel.ts
deleted file mode 100644
index e00f8fc6ea..0000000000
--- a/apps/core-lib-dev/src/components/card-carousel.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators'
-
-@customElement('card-carousel')
-export class CardCarousel extends LitElement {
- render() {
- return html`
-
-
- Kom igång här!
-
-
-
-
-
-
- Få en översikt av dina konton, transaktioner, debit och
- kreditkort.
- Skaffa Enkla vardagen
-
-
-
-
- `
- }
-}