add card component

src/Card/Card.css

@@ -0,0 +1,13 @@
+a[bt-card] {
+  background-color: hsl(216, 22%, 17%);
+  border: 1px solid hsl(216, 17%, 27%);
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  color: initial;
+  text-decoration: initial;
+  display: inline-block;
+
+  &:hover {
+    background-color: hsl(216, 17%, 27%);
+  }
+}

src/Card/Card.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const meta: Meta = {
+  title: 'BTCard',
+};
+type Story = StoryObj;
+
+export default meta;
+
+export const Default: Story = {
+  render: () => html`<a href="#" bt-card><h2 bt>Card text</h2></a>`,
+};
+

src/Card/Card.ts

@@ -0,0 +1,4 @@
+import { injectStyles } from '../utils';
+import styles from './Card.css?raw&inline';
+
+injectStyles(styles);

src/Docs.mdx

@@ -4,6 +4,7 @@ import * as AvatarStories from './Avatar/Avatar.stories';
 import * as HeadingStories from './Heading/Heading.stories';
 import * as BadgeStories from './Badge/Badge.stories';
 import * as ButtonStories from './Button/Button.stories';
+import * as CardStories from './Card/Card.stories';
 import * as DropdownMenuStories from './DropdownMenu/DropdownMenu.stories';
 import * as HeaderStories from './Header/Header.stories';
 import * as InputLabelStories from './InputLabel/InputLabel.stories';
@@ -63,6 +64,12 @@ Selector: `button[bt]`
 <Canvas of={ButtonStories.Yellow} />
 <Canvas of={ButtonStories.Dropdown} />
 
+# Card
+
+Selector: `a[bt-card]`
+
+<Canvas of={CardStories.Default} />
+
 # DropdownMenu
 
 Selector: `ul[bt-dropdown-menu]`
@@ -146,4 +153,4 @@ Selector: `[bt-text]`
 <Canvas of={TextStories.Red} />
 <Canvas of={TextStories.White} />
 <Canvas of={TextStories.Blue} />
-<Canvas of={TextStories.Yellow} />
+<Canvas of={TextStories.Yellow} />

src/Heading/Heading.css

@@ -9,12 +9,12 @@ h6[bt] {
   transition: color 0.3s;
   margin: unset;
 
-  a:has(&) {
+  a:not([bt-card]):has(&) {
     color: var(--bt-strong-text-color);
     text-decoration: none;
   }
 
-  a:has(&):hover {
+  a:not([bt-card]):has(&):hover {
     --heading-color: var(--bt-link-hover-color);
   }
 }

src/index.ts

@@ -1,6 +1,7 @@
 export * from './Avatar/Avatar';
 export * from './Badge/Badge';
 export * from './Button/Button';
+export * from './Card/Card';
 export * from './DropdownMenu/DropdownMenu';
 export * from './Header/Header';
 export * from './Heading/Heading';