feat: add ListItem component with title and subtitle

src/components/ListItem/_listItem.scss

@@ -0,0 +1,70 @@
+@use '../../styles/tokens/typography' as *;
+
+.list-item {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--nds-spacing-md);
+  border-radius: var(--nds-radius-sm);
+  background: var(--nds-background, #040B0B);
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    background: color-mix(in srgb, var(--nds-secondary) 25%, transparent);
+  }
+
+  &:active {
+    background: color-mix(in srgb, var(--nds-accent) 25%, transparent);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-radius: var(--nds-radius-md);
+    border-color: transparent;
+    background:
+      linear-gradient(var(--nds-background, #040B0B), var(--nds-background, #040B0B)) padding-box,
+      linear-gradient(
+        135deg,
+        transparent 0%,
+        transparent 20%,
+        rgba(245, 250, 250, 0.08) 50%,
+        rgba(245, 250, 250, 0.28) 100%
+      ) border-box;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -1px;
+    width: 1px;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nds-spacing-md);
+  }
+
+  &__subTitle {
+    @include text-base;
+  }
+
+  &__title {
+    @include text-xl;
+  }
+}

src/components/ListItem/listItem.astro

@@ -0,0 +1,15 @@
+---
+import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
+---
+<div class='list-item'>
+  <div class='list-item__content'>
+    <slot/>
+  </div>
+  <Arrow2 
+  size={24}
+  orientation='right' />
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>

src/components/ListItem/listItemSubtitle.astro

@@ -0,0 +1,7 @@
+<div class='list-item__subTitle'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>

src/components/ListItem/listItemTitle.astro

@@ -0,0 +1,7 @@
+<div class='list-item__title'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>

src/components/index.ts

@@ -8,3 +8,6 @@ export { default as TabItem }      from './Tabs/tabItem.astro';
 export { default as TabContent }   from './Tabs/tabContent.astro';
 export { default as Button }       from './Button/button.astro';
 export { default as Link }         from './Link/link.astro';
+export { default as ListItem }     from './ListItem/listItem.astro';
+export { default as ListItemTitle } from './ListItem/listItemTitle.astro';
+export { default as ListItemSubtitle } from './ListItem/listItemSubtitle.astro';

src/pages/index.astro

@@ -7,6 +7,9 @@ import TabItem from '../components/Tabs/tabItem.astro';
 import TabContent from '../components/Tabs/tabContent.astro';
 import Button from '../components/Button/button.astro';
 import Link from '../components/Link/link.astro';
+import ListItem from '../components/ListItem/listItem.astro';
+import ListItemTitle from '../components/ListItem/listItemTitle.astro';
+import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -21,6 +24,15 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>List Item</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <ListItem>
+          <ListItemTitle>List Item Title</ListItemTitle>
+          <ListItemSubtitle>List Item Subtitle</ListItemSubtitle>
+        </ListItem>
+      </div>
+    </section>
     <section>
       <h2>Link</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">