diff --git a/src/components.d.ts b/src/components.d.ts
index 5fc5f077b2adfbf7ee07fc515214569d4ccc8f22..4af49c5a5d3712be32738a6051f3d72b204ef90a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -395,6 +395,15 @@ export namespace Components {
   interface HyGeneralList {
     dataItems: ListItemValue[] | string;
   }
+  interface HyGeneralListItem {
+    description?: string;
+    imageAlt: string;
+    imageUrl: string;
+    itemTitle?: string;
+    label?: string;
+    type?: string;
+    url?: string;
+  }
   interface HyGridContainer {}
   interface HyGridItem {
     columns: GridColumns;
@@ -1038,6 +1047,11 @@ declare global {
     prototype: HTMLHyGeneralListElement;
     new (): HTMLHyGeneralListElement;
   };
+  interface HTMLHyGeneralListItemElement extends Components.HyGeneralListItem, HTMLStencilElement {}
+  var HTMLHyGeneralListItemElement: {
+    prototype: HTMLHyGeneralListItemElement;
+    new (): HTMLHyGeneralListItemElement;
+  };
   interface HTMLHyGridContainerElement extends Components.HyGridContainer, HTMLStencilElement {}
   var HTMLHyGridContainerElement: {
     prototype: HTMLHyGridContainerElement;
@@ -1337,6 +1351,7 @@ declare global {
     'hy-footer-info': HTMLHyFooterInfoElement;
     'hy-footer-link-item': HTMLHyFooterLinkItemElement;
     'hy-general-list': HTMLHyGeneralListElement;
+    'hy-general-list-item': HTMLHyGeneralListItemElement;
     'hy-grid-container': HTMLHyGridContainerElement;
     'hy-grid-item': HTMLHyGridItemElement;
     'hy-grid-row': HTMLHyGridRowElement;
@@ -1732,6 +1747,15 @@ declare namespace LocalJSX {
   interface HyGeneralList {
     dataItems?: ListItemValue[] | string;
   }
+  interface HyGeneralListItem {
+    description?: string;
+    imageAlt?: string;
+    imageUrl?: string;
+    itemTitle?: string;
+    label?: string;
+    type?: string;
+    url?: string;
+  }
   interface HyGridContainer {}
   interface HyGridItem {
     columns?: GridColumns;
@@ -2255,6 +2279,7 @@ declare namespace LocalJSX {
     'hy-footer-info': HyFooterInfo;
     'hy-footer-link-item': HyFooterLinkItem;
     'hy-general-list': HyGeneralList;
+    'hy-general-list-item': HyGeneralListItem;
     'hy-grid-container': HyGridContainer;
     'hy-grid-item': HyGridItem;
     'hy-grid-row': HyGridRow;
@@ -2350,6 +2375,7 @@ declare module '@stencil/core' {
       'hy-footer-info': LocalJSX.HyFooterInfo & JSXBase.HTMLAttributes<HTMLHyFooterInfoElement>;
       'hy-footer-link-item': LocalJSX.HyFooterLinkItem & JSXBase.HTMLAttributes<HTMLHyFooterLinkItemElement>;
       'hy-general-list': LocalJSX.HyGeneralList & JSXBase.HTMLAttributes<HTMLHyGeneralListElement>;
+      'hy-general-list-item': LocalJSX.HyGeneralListItem & JSXBase.HTMLAttributes<HTMLHyGeneralListItemElement>;
       'hy-grid-container': LocalJSX.HyGridContainer & JSXBase.HTMLAttributes<HTMLHyGridContainerElement>;
       'hy-grid-item': LocalJSX.HyGridItem & JSXBase.HTMLAttributes<HTMLHyGridItemElement>;
       'hy-grid-row': LocalJSX.HyGridRow & JSXBase.HTMLAttributes<HTMLHyGridRowElement>;
diff --git a/src/components/hy-box/readme.md b/src/components/hy-box/readme.md
index fcb67c48057d29074c4a918fbd3496f8f0b02d86..3571b840efec690436c3bd58aaa5b3fa39d9a334 100644
--- a/src/components/hy-box/readme.md
+++ b/src/components/hy-box/readme.md
@@ -30,6 +30,7 @@
 - [hy-accordion-container](../accordion-container)
 - [hy-adjacent-image-text](../adjacent-image-text)
 - [hy-banner](../hy-banner)
+- [hy-general-list](../hy-general-list)
 - [hy-heading](../heading)
 - [hy-hero](../hy-hero)
 - [hy-image](../image)
@@ -50,6 +51,7 @@ graph TD;
   hy-accordion-container --> hy-box
   hy-adjacent-image-text --> hy-box
   hy-banner --> hy-box
+  hy-general-list --> hy-box
   hy-heading --> hy-box
   hy-hero --> hy-box
   hy-image --> hy-box
diff --git a/src/components/hy-general-list-item/hy-general-list-item.scss b/src/components/hy-general-list-item/hy-general-list-item.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5d4e87f30f6362b8597dbe54a44aadaffa915763
--- /dev/null
+++ b/src/components/hy-general-list-item/hy-general-list-item.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/hy-general-list-item/hy-general-list-item.tsx b/src/components/hy-general-list-item/hy-general-list-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce5ad71121ae6d3a9ca3f814086ac993bf275046
--- /dev/null
+++ b/src/components/hy-general-list-item/hy-general-list-item.tsx
@@ -0,0 +1,46 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+  tag: 'hy-general-list-item',
+  styleUrl: 'hy-general-list-item.scss',
+  shadow: true,
+})
+export class HyGeneralListItem {
+  @Prop() itemTitle?: string;
+  @Prop() description?: string;
+  @Prop() label?: string;
+  @Prop() url?: string;
+  @Prop() type?: string;
+  @Prop() imageUrl: string = null;
+  @Prop() imageAlt: string = '';
+
+  render() {
+    const classAttributes = ['hy-general-list-item'].join(' ');
+
+    const contentClassAttributes = ['hy-general-list-item__text-container'].join(' ');
+
+    const imageClassAttributes = ['hy-general-list-item__image-container'].join(' ');
+
+    //const target = '_blank';
+    //const ariaLabel = 'Link points outside the current website.';
+    const aspectRatioWidth = 6;
+    const aspectRatioHeight = 4;
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    const aspectRatio = {
+      '--aspectRatio': `${aspect}%` as 'aspectRatio',
+    };
+
+    return [
+      <div class={classAttributes} tabindex="0">
+        <div class={imageClassAttributes} style={aspectRatio}>
+          <img alt={this.imageAlt} class="hy-image__image" src={this.imageUrl} />
+          <div class="hy-general-list-item--label">{this.label}</div>
+        </div>
+        <div class={contentClassAttributes}>
+          <div class="hy-general-list-item--title">{this.itemTitle}</div>
+          <div class="hy-general-list-item--description">{this.description}</div>
+        </div>
+      </div>,
+    ];
+  }
+}
diff --git a/src/components/hy-general-list-item/readme.md b/src/components/hy-general-list-item/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..1727f9869c4280d2ff6bc2997060d06fe621cae7
--- /dev/null
+++ b/src/components/hy-general-list-item/readme.md
@@ -0,0 +1,33 @@
+# hy-general-list-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property      | Attribute     | Description | Type     | Default     |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `description` | `description` |             | `string` | `undefined` |
+| `imageAlt`    | `image-alt`   |             | `string` | `''`        |
+| `imageUrl`    | `image-url`   |             | `string` | `null`      |
+| `itemTitle`   | `item-title`  |             | `string` | `undefined` |
+| `label`       | `label`       |             | `string` | `undefined` |
+| `type`        | `type`        |             | `string` | `undefined` |
+| `url`         | `url`         |             | `string` | `undefined` |
+
+## Dependencies
+
+### Used by
+
+- [hy-general-list](../hy-general-list)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-general-list --> hy-general-list-item
+  style hy-general-list-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/hy-general-list/hy-general-list.tsx b/src/components/hy-general-list/hy-general-list.tsx
index e6564ac412aa2c2a92928270e28bf5e9171c5dff..ebff727bd39844e9a290293ab177543033ab4a72 100644
--- a/src/components/hy-general-list/hy-general-list.tsx
+++ b/src/components/hy-general-list/hy-general-list.tsx
@@ -7,7 +7,7 @@ export interface ListItemValue {
   url: string;
 }
 
-import {Component, h, Prop, Watch} from '@stencil/core';
+import {Component, Element, h, Prop, Watch} from '@stencil/core';
 
 @Component({
   tag: 'hy-general-list',
@@ -17,8 +17,7 @@ import {Component, h, Prop, Watch} from '@stencil/core';
 export class HyGeneralList {
   @Prop() dataItems: ListItemValue[] | string;
   private _dataItems: ListItemValue[];
-
-  //@State() listItems: Array<object> = [];
+  @Element() el: HTMLElement;
 
   @Watch('dataItems')
   arrayDataWatcher(newValue: ListItemValue[] | string) {
@@ -33,6 +32,11 @@ export class HyGeneralList {
     this.arrayDataWatcher(this.dataItems);
   }
 
+  handleCardClick(id) {
+    let card = this.el.shadowRoot.querySelectorAll('#' + id)[0] as HTMLElement;
+    window.open(card.dataset.location, '_blank');
+  }
+
   render() {
     const classAttributes = ['hy-general-list'].join(' ');
 
@@ -40,44 +44,20 @@ export class HyGeneralList {
       <div class={classAttributes}>
         {this._dataItems.map((x) => {
           return (
-            <div>
-              {x.title}
-              {x.description}
-              {x.label}
-              {x.id}
-              {x.url}
-              {x.type}
-            </div>
+            <hy-general-list-item
+              id={x.id}
+              item-title={x.title}
+              description={x.description}
+              label={x.label}
+              url={x.url}
+              type={x.type}
+              data-location={x.url}
+              onClick={() => this.handleCardClick(x.id)}
+            ></hy-general-list-item>
           );
         })}
       </div>,
+      <hy-box mb="1.75, 1.75, 2, 2.5" />,
     ];
   }
 }
-
-/*
-
-componentDidLoad() {
-    this._dataItems = JSON.parse(this.dataItems);
-    console.log(this._dataItems);
-
-    let items = [];
-
-    //this._dataItems.forEach((item) => {
-    //}
-
-    this.listItems = items;
-  }
-
-
-<hy-process-flow-box
-                  class={classItem}
-                  variant={processVariant}
-                  box-number={index + 1}
-                  box-title={x.heading}
-                  box-description={x.description}
-                  intermediate-step-title={x.step}
-                  step-state={stepState}
-                  number-term={this.numberTerm}
-              />
-* */
diff --git a/src/components/hy-general-list/readme.md b/src/components/hy-general-list/readme.md
index b7a4efdf1147ffe893be4ef8a6d500631409a88b..2127658da2133fec2194429e6bb97162a48dd3ce 100644
--- a/src/components/hy-general-list/readme.md
+++ b/src/components/hy-general-list/readme.md
@@ -8,6 +8,22 @@
 | ----------- | ------------ | ----------- | --------------------------- | ----------- |
 | `dataItems` | `data-items` |             | `ListItemValue[] \| string` | `undefined` |
 
+## Dependencies
+
+### Depends on
+
+- [hy-general-list-item](../hy-general-list-item)
+- [hy-box](../hy-box)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-general-list --> hy-general-list-item
+  hy-general-list --> hy-box
+  style hy-general-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ---
 
 Helsinki University Design System