@rescui/card 0.14.0 → 0.14.1-RUI-293-Update-menu-component-7a032357e.20

package/llm/cards.md

@@ -0,0 +1,3650 @@
+# Cards
+
+Cards Catalog contains a large variety of card snippets to show different ways of building any type of card from scratch
+
+## Cards
+
+### Main types
+
+In most cases, using the [cardCn className helper](/components/card-cn/) will be sufficient
+
+Refer to [this guide](/components/card-cn/) to learn more about differences between cardCn and Cards Catalog
+
+If you need more control over the card, you can use the following snippets, as well as a [step-by-step guide](/cards/guide/), to create a custom card from scratch:
+
+#### Clickable cards
+
+Cards with hover, active and focus states
+
+[Open page](/cards/clickable/)
+
+#### Tiles
+
+Non-clickable cards
+
+[Open page](/cards/tiles/)
+
+### Other resources
+
+#### Controls
+
+Stateful carousel buttons, slider controls, etc.
+
+[Open page](/cards/controls/)
+
+#### Step-by-step guide
+
+A description of what you should pay attention to when creating your own cards
+
+[Open page](/cards/guide/)
+
+#### cardCn
+
+A ClassName Helper for creating cards with simple styles and some customizations
+
+[Open page](/components/card-cn/)
+
+## Clickable
+
+### Base example
+
+##### Details:
+
+- Base example
+- Using css variables to control the border
+- Set border on the pseudo-element to avoid scaling bug when changing `border-width`
+
+- [cardCn implementation](/components/card-cn/#default-clickable-card)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <button type="button" className="base-card" style={{ maxWidth: 400 }}>
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.base-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+}
+```
+
+### Dark theme
+
+##### Details:
+
+- Dark theme
+- Using css variables to control the border
+- Set border on the pseudo-element to avoid scaling bug when changing `border-width`
+
+- [cardCn implementation](/components/card-cn/#theme-dark)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <div className="dark-wrapper">
+      <button type="button" className="dark-card" style={{ maxWidth: 400 }}>
+        <h3 className={textCn('rs-h3')}>Card title</h3>
+        <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+          aspernatur autem commodi consequuntur esse laudantium nobis numquam
+          officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+          repellat tempore unde veniam?
+        </p>
+      </button>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.dark-wrapper {
+  --rs-theme-dark: 1;
+  padding: 48px;
+  background: var(--rs-color-black);
+}
+
+.dark-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-white-t20);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-grey-90);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-white);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-white);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+}
+```
+
+### Borderless example
+
+##### Details:
+
+- Borderless example
+- States change background color
+- [cardCn implementation](/components/card-cn/css/#borderless-card)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <button type="button" className="borderless-card" style={{ maxWidth: 400 }}>
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.borderless-card {
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-grey-5);
+
+  transition: background-color 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--rs-color-grey-10);
+    }
+  }
+
+  &:focus-visible {
+    background-color: var(--rs-color-grey-10);
+  }
+
+  &:active {
+    background-color: var(--rs-color-grey-20);
+  }
+}
+```
+
+### With glow hover
+
+##### Details:
+
+- Borderless example with `glow-hover` effect
+- States don't change anything in css
+- Hover and active states are covered by `glow-hover`
+- [cardCn implementation](/components/card-cn/#with-glow-hover)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { useGlowHover } from '@rescui/use-glow-hover';
+
+const Demo = () => {
+  const ref = useGlowHover({ preset: 'transparent-blue', enableBurst: true });
+  return (
+    <button
+      type="button"
+      ref={ref}
+      className="borderless-with-glow-hover-card"
+      style={{ maxWidth: 400 }}
+    >
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.borderless-with-glow-hover-card {
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-grey-5);
+
+  transition: background-color 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: var(--rs-color-grey-10);
+  }
+}
+```
+
+### With action button inside
+
+##### Details:
+
+- With border via pseudo-element `::before`
+
+- Forward states to the `Button` inside
+
+- Card should have the `button` HTML tag
+
+- Main action, like `onClick`, should be on the card element
+
+- Use `notFocusable` property with `Button`
+
+- Use only one action element inside
+- [cardCn implementation](/components/card-cn/#with-action-button-inside)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { Button } from '@rescui/button';
+
+const Demo = () => {
+  return (
+    <button
+      type="button"
+      onClick={() => console.log('Card onClick called')}
+      className="action-button-inside-card"
+      style={{ maxWidth: 400 }}
+    >
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+      <div className="rs-docs-offset-top-24">
+        <Button notFocusable className="action-button-inside-card__button">
+          Click me
+        </Button>
+      </div>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+@import '@rescui/button/lib/public-api.p.css';
+
+.action-button-inside-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+
+  @media (hover: hover) {
+    &:hover &__button {
+      @mixin rs-button-state-hover;
+    }
+  }
+
+  &:active &__button {
+    @mixin rs-button-state-active;
+  }
+
+  &:focus-visible &__button {
+    @mixin rs-button-state-focus-visible;
+  }
+
+  &:active:focus-visible:not(:hover) &__button {
+    @mixin rs-button-state-active-focus-visible-no-hover;
+  }
+}
+```
+
+### With action link inside
+
+##### Details:
+
+- With border via pseudo-element `::before`
+
+- Forward states to the `rs-link` inside
+
+- Card should have the `a` HTML tag
+
+- Main action, like `href`, should be on the card element
+
+- `rs-link` should have `span` HTML tag
+
+- Use only one action element inside
+- [cardCn implementation](/components/card-cn/#with-action-link-inside)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <a
+      href="#with-action-link-inside"
+      className="action-link-inside-card"
+      style={{ maxWidth: 400 }}
+    >
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+      <div className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        <span
+          className={cn(
+            textCn('rs-link', { mode: 'standalone' }),
+            'action-link-inside-card__link'
+          )}
+        >
+          Click me
+        </span>
+      </div>
+    </a>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+.action-link-inside-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+
+  @media (hover: hover) {
+    &:hover &__link {
+      @mixin rs-typography-link-state-hover;
+    }
+  }
+
+  &:focus-visible &__link {
+    @mixin rs-typography-link-state-focus-visible;
+  }
+}
+```
+
+### Rock mode
+
+##### Details:
+
+- With static border on the main element (border width is constant)
+
+- Decrease inner padding by border width value to compensate for the offset
+- Change `border-color` to transparent on hover/active instead of changing its width
+
+- Change background-color to contrast value on hover/active
+- Use `--rs-theme-flip` css-variable to reverse theme for all RescUI components on hover/active
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <button type="button" className="rock-mode-card" style={{ maxWidth: 400 }}>
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.rock-mode-card {
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 1px var(--my-card-border-color);
+
+  transition: color 100ms, background-color 100ms, box-shadow 100ms;
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --rs-theme-flip: 1;
+      --my-card-border-color: transparent;
+      background-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --rs-theme-flip: 1;
+    --my-card-border-color: transparent;
+    background-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --rs-theme-flip: 1;
+    --my-card-border-color: transparent;
+    background-color: var(--rs-color-grey-90);
+  }
+}
+```
+
+### Aligned grid with subgrid
+
+##### Details:
+
+- With border via pseudo-element `::before`
+
+- Inside grid container
+- Each card takes up two rows and applies subgrid to its children
+- Cards text content lays on the second row, aligning with the content in the sibling cards
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <div className="aligned-grid">
+      <button type="button" className="aligned-grid__card">
+        <h3 className={textCn('rs-h3')}>
+          Some long card title which takes two lines
+        </h3>
+        <p className={cn(textCn('rs-text-2'), 'aligned-grid__content')}>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+          aspernatur autem commodi consequuntur esse laudantium nobis numquam
+          officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+          repellat tempore unde veniam?
+        </p>
+      </button>
+      <button type="button" className="aligned-grid__card">
+        <h3 className={textCn('rs-h3')}>Awesome card title</h3>
+        <p className={cn(textCn('rs-text-2'), 'aligned-grid__content')}>
+          The closest known nebula to Earth is called the Helix Nebula. It is
+          the remnant of a dying star — possibly one like the Sun. It is
+          approximately 700 light-years away from Earth.
+        </p>
+      </button>
+      <button type="button" className="aligned-grid__card">
+        <h3 className={textCn('rs-h3')}>Cool card title</h3>
+        <p className={cn(textCn('rs-text-2'), 'aligned-grid__content')}>
+          We help developers work faster by automating common, repetitive tasks
+          to enable them to stay focused on code design and the big picture. We
+          provide tools to explore and familiarize with code bases faster.
+        </p>
+      </button>
+      <button type="button" className="aligned-grid__card">
+        <h3 className={textCn('rs-h3')}>
+          Another long card title which takes two lines
+        </h3>
+        <p className={cn(textCn('rs-text-2'), 'aligned-grid__content')}>
+          Fëanor was a Ñoldorin elf and one of the Elven kindred that departed
+          from Valinor in the land of Aman, where they had lived with the Valar.
+        </p>
+      </button>
+      <button type="button" className="aligned-grid__card">
+        <h3 className={textCn('rs-h3')}>Neat card title</h3>
+        <p className={cn(textCn('rs-text-2'), 'aligned-grid__content')}>
+          It’s a dangerous business, Frodo, going out your door. You step onto
+          the road, and if you don’t keep your feet, there’s no knowing where
+          you might be swept off to.
+        </p>
+      </button>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.aligned-grid {
+  display: grid;
+  column-gap: 32px;
+  row-gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  grid-template-rows: auto;
+}
+
+.aligned-grid__card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  position: relative;
+
+  display: grid;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+  padding: 24px;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 2;
+  row-gap: 24px;
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+}
+
+.aligned-grid__content {
+  grid-row: 2 / span 1;
+}
+```
+
+### Small cards
+
+##### Details:
+
+- With border via pseudo-element `::before`
+
+- With colored bg and border
+- `border-color` is constant, but the `background-color` changes on hover
+- Text is center aligned
+- Card's width is constant
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import apacheDerbyLogoSvg from '@/parts/cards/db-logos/apache-derby-logo.svg';
+import azureLogoSvg from '@/parts/cards/db-logos/azure-logo.svg';
+import h2DatabaseLogoSvg from '@/parts/cards/db-logos/h2-database-logo.svg';
+import ibmDB2LogoSvg from '@/parts/cards/db-logos/ibm-db2-logo.svg';
+import mongodbLogoSvg from '@/parts/cards/db-logos/mongodb-logo.svg';
+import mysqlLogoSvg from '@/parts/cards/db-logos/mysql-logo.svg';
+import redisLogoSvg from '@/parts/cards/db-logos/redis-logo.svg';
+import sqliteLogoSvg from '@/parts/cards/db-logos/sqlite-logo.svg';
+import sybaseLogoSvg from '@/parts/cards/db-logos/sybase-logo.svg';
+import awsDynamodbLogo from '@/parts/cards/db-logos/aws-dynamodb-logo.svg';
+
+const data = [
+  { title: 'MySQL', logoSrc: mysqlLogoSvg.src },
+  { title: 'MongoDB', logoSrc: mongodbLogoSvg.src },
+  { title: 'Redis', logoSrc: redisLogoSvg.src },
+  { title: 'Azure SQL', logoSrc: azureLogoSvg.src },
+  { title: 'Amazon DynamoDB', logoSrc: awsDynamodbLogo.src },
+  { title: 'SQLite', logoSrc: sqliteLogoSvg.src },
+  { title: 'IBM Db2', logoSrc: ibmDB2LogoSvg.src },
+  { title: 'H2', logoSrc: h2DatabaseLogoSvg.src },
+  { title: 'Sybase ASE', logoSrc: sybaseLogoSvg.src },
+  { title: 'Apache Derby', logoSrc: apacheDerbyLogoSvg.src }
+];
+
+const Demo = () => {
+  return (
+    <ul className={cn('small-cards', 'jb-offset-top-32')}>
+      {data.map(item => (
+        <li key={item.title}>
+          <a className={cn('small-cards__card')} href={'#small-cards'}>
+            <img
+              src={item.logoSrc}
+              alt="Database logo"
+              className="small-cards__card-logo"
+            />
+            <h4 className={cn(textCn('rs-h5'), 'rs-docs-offset-top-12')}>
+              {item.title}
+            </h4>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss attached
+.small-cards {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 24px;
+  row-gap: 24px;
+
+  text-align: center;
+}
+
+.small-cards__card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-primary-light-theme);
+  --my-card-background-color: var(--rs-color-white);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  width: 150px;
+  min-height: 0;
+  padding: 32px 8px;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--my-card-background-color);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-background-color: var(--rs-color-primary-fog-light-theme);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-background-color: var(--rs-color-primary-fog-light-theme);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+}
+
+.small-cards__card-logo {
+  height: 36px;
+  width: auto;
+}
+```
+
+### Newsletter cards
+
+##### Details:
+
+- Has a large image
+- Has an action button
+- Border has a non-transparent color
+- Padding controlled by css variables
+- Action buttons are aligned with sibling tiles
+- Use pseudo-element for border to show it above the content
+- [cardCn implementation](/components/card-cn/#with-image-via-img-tag)
+
+```tsx
+import { textCn } from '@rescui/typography';
+import { Button } from '@rescui/button';
+import card1Image from '@/parts/cards/newsletter1.webp';
+import card2Image from '@/parts/cards/newsletter2.webp';
+
+const NewsletterCard = ({ title, imageSrc }) => {
+  return (
+    <button type="button" className="newsletter-card">
+      <div className="newsletter-card__header">
+        <img className="newsletter-card__img" alt="keymaps" src={imageSrc} />
+        <h3 className={textCn('rs-h3')}>{title}</h3>
+      </div>
+      <div className="newsletter-card__footer">
+        <Button className="newsletter-card__button" notFocusable>
+          Learn more
+        </Button>
+      </div>
+    </button>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div className="newsletter-cards-container">
+      <NewsletterCard
+        title={'JetBrains Community Newsletter (Monthly) - join us now!'}
+        imageSrc={card1Image.src}
+      />
+      <NewsletterCard
+        title={'Java Annotated Monthly'}
+        imageSrc={card2Image.src}
+      />
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+@import '@rescui/button/lib/public-api.p.css';
+
+.newsletter-cards-container {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 32px;
+  row-gap: 24px;
+
+  @media (--sm) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.newsletter-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-grey-20);
+  --my-card-padding: 24px;
+
+  position: relative;
+
+  display: grid;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+  padding: var(--my-card-padding);
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 2;
+  row-gap: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: inherit;
+
+    content: '';
+    pointer-events: none;
+
+    box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+        --my-card-border-color
+      );
+  }
+
+  @media (hover: hover) {
+    &:hover &__button {
+      @mixin rs-button-state-hover;
+    }
+  }
+
+  &:active &__button {
+    @mixin rs-button-state-active;
+  }
+
+  &:focus-visible &__button {
+    @mixin rs-button-state-focus-visible;
+  }
+
+  &:active:focus-visible:not(:hover) &__button {
+    @mixin rs-button-state-active-focus-visible-no-hover;
+  }
+}
+
+.newsletter-card__img {
+  position: relative;
+  top: calc(-1 * var(--my-card-padding));
+  left: calc(-1 * var(--my-card-padding));
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: calc(100% + 2 * var(--my-card-padding));
+  height: 212px;
+  max-height: 212px;
+  object-fit: cover;
+  object-position: right;
+}
+
+.newsletter-card__footer {
+  grid-row: 2;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 32px;
+  row-gap: 24px;
+}
+```
+
+## Tiles
+
+### Base example
+
+##### Details:
+
+- Base example
+- Has no dynamic states - its a static `div` element
+
+- [cardCn implementation](/components/card-cn/#default-card)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <div className="base-tile" style={{ maxWidth: 400 }}>
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.base-tile {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 1px var(--rs-color-black-t20);
+
+  padding: 24px;
+}
+```
+
+### Small tiles
+
+##### Details:
+
+- Without border
+- With colored background
+- Static element without states
+- Text is center aligned
+- Tiles width is constant
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import apacheDerbyLogoSvg from '@/parts/cards/db-logos/apache-derby-logo.svg';
+import azureLogoSvg from '@/parts/cards/db-logos/azure-logo.svg';
+import h2DatabaseLogoSvg from '@/parts/cards/db-logos/h2-database-logo.svg';
+import ibmDB2LogoSvg from '@/parts/cards/db-logos/ibm-db2-logo.svg';
+import mongodbLogoSvg from '@/parts/cards/db-logos/mongodb-logo.svg';
+import mysqlLogoSvg from '@/parts/cards/db-logos/mysql-logo.svg';
+import redisLogoSvg from '@/parts/cards/db-logos/redis-logo.svg';
+import sqliteLogoSvg from '@/parts/cards/db-logos/sqlite-logo.svg';
+import sybaseLogoSvg from '@/parts/cards/db-logos/sybase-logo.svg';
+import awsDynamodbLogo from '@/parts/cards/db-logos/aws-dynamodb-logo.svg';
+
+const data = [
+  { title: 'MySQL', logoSrc: mysqlLogoSvg.src },
+  { title: 'MongoDB', logoSrc: mongodbLogoSvg.src },
+  { title: 'Redis', logoSrc: redisLogoSvg.src },
+  { title: 'Azure SQL', logoSrc: azureLogoSvg.src },
+  { title: 'Amazon DynamoDB', logoSrc: awsDynamodbLogo.src },
+  { title: 'SQLite', logoSrc: sqliteLogoSvg.src },
+  { title: 'IBM Db2', logoSrc: ibmDB2LogoSvg.src },
+  { title: 'H2', logoSrc: h2DatabaseLogoSvg.src },
+  { title: 'Sybase ASE', logoSrc: sybaseLogoSvg.src },
+  { title: 'Apache Derby', logoSrc: apacheDerbyLogoSvg.src }
+];
+
+const Demo = () => {
+  return (
+    <ul className={cn('small-tiles', 'jb-offset-top-32')}>
+      {data.map(item => (
+        <li key={item.title}>
+          <span className={cn('small-tiles__tile')}>
+            <img
+              src={item.logoSrc}
+              alt="Database logo"
+              className="small-tiles__tile-logo"
+            />
+            <h4 className={cn(textCn('rs-h5'), 'rs-docs-offset-top-12')}>
+              {item.title}
+            </h4>
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.small-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 24px;
+  row-gap: 24px;
+
+  text-align: center;
+}
+
+.small-tiles__tile {
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  width: 150px;
+  min-height: 0;
+  padding: 32px 8px;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-primary-fog-light-theme);
+}
+
+.small-tiles__tile-logo {
+  height: 36px;
+  width: auto;
+}
+```
+
+### Borderless tile
+
+##### Details:
+
+- Without border
+- With background
+- Static element without states
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const Demo = () => {
+  return (
+    <div className="borderless-tile" style={{ maxWidth: 400 }}>
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.borderless-tile {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-black-t5);
+
+  padding: 24px;
+}
+```
+
+### Large content
+
+##### Details:
+
+- Large header, large text
+- Content is center aligned
+- Large image below
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import tileImage from '@/parts/cards/keymaps.webp';
+
+const Demo = () => {
+  return (
+    <div className="large-content-tile" style={{ maxWidth: 600 }}>
+      <div className="large-content-tile__content">
+        <h2 className={textCn('rs-h2')}>Keymaps</h2>
+        <p className={cn(textCn('rs-text-1'), 'rs-docs-offset-top-24')}>
+          Choose a familiar keymap or set a shortcut for any action.
+        </p>
+      </div>
+      <div className="large-content-tile__img">
+        <img alt="keymaps" src={tileImage.src} />
+      </div>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.large-content-tile {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  padding: 24px;
+
+  border: none;
+  border-radius: 8px;
+
+  text-align: center;
+
+  background-color: var(--rs-color-black-t5);
+}
+
+.large-content-tile__content {
+  width: 80%;
+  margin: 0 auto;
+
+  @media (--sm) {
+    width: 100%;
+  }
+}
+
+.large-content-tile__img {
+  display: flex;
+  overflow: hidden;
+
+  margin: 32px 12px 12px;
+
+  border-radius: 8px;
+  filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.2));
+
+  &,
+  img {
+    max-width: 100%;
+  }
+}
+```
+
+### Newsletter tiles
+
+##### Details:
+
+- Has a large image
+- Has a subscribe form
+- Border has a non-transparent color
+- Padding and border are controlled by css variables
+- Subscribe forms are aligned with sibling tiles
+- Use pseudo-element for border to show it above the content
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { Input } from '@rescui/input';
+import { Button } from '@rescui/button';
+import tile1Image from '@/parts/cards/newsletter1.webp';
+import tile2Image from '@/parts/cards/newsletter2.webp';
+
+const NewsletterTile = ({ title, imageSrc }) => {
+  return (
+    <div className="newsletter-tile">
+      <div className="newsletter-tile__header">
+        <img className="newsletter-tile__img" alt="keymaps" src={imageSrc} />
+        <h3 className={textCn('rs-h3')}>{title}</h3>
+      </div>
+      <div className="newsletter-tile__form">
+        <Input placeholder="Your Email" type="email" />
+        <p className={cn(textCn('rs-text-3'), 'rs-docs-offset-top-16')}>
+          By submitting this form, I acknowledge that JetBrains s.r.o. may
+          process my personal data I provided above for purposes explained above
+          and may engage third parties in such processing. More details about
+          the processing are in JetBrains Privacy Notice.
+        </p>
+        <div className={cn('newsletter-tile__footer', 'rs-docs-offset-top-24')}>
+          <Button>Subscribe</Button>
+          <span className={textCn('rs-text-2')}>
+            <a
+              href="#newsletter-tiles"
+              className={textCn('rs-link', { mode: 'standalone' })}
+            >
+              View sample newsletter
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div className="newsletter-tiles-container">
+      <NewsletterTile
+        title={'JetBrains Community Newsletter (Monthly)'}
+        imageSrc={tile1Image.src}
+      />
+      <NewsletterTile
+        title={'Java Annotated Monthly'}
+        imageSrc={tile2Image.src}
+      />
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.newsletter-tiles-container {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 32px;
+  row-gap: 24px;
+
+  @media (--sm) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.newsletter-tile {
+  --my-tile-padding: 24px;
+
+  position: relative;
+
+  display: grid;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+  padding: var(--my-tile-padding);
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-white);
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 2;
+  row-gap: 16px;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: inherit;
+
+    content: '';
+    pointer-events: none;
+
+    box-shadow: inset 0 0 0 1px var(--rs-color-grey-20);
+  }
+}
+
+.newsletter-tile__form {
+  grid-row: 2;
+}
+
+.newsletter-tile__img {
+  position: relative;
+  top: calc(-1 * var(--my-tile-padding));
+  left: calc(-1 * var(--my-tile-padding));
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: calc(100% + 2 * var(--my-tile-padding));
+  height: 212px;
+  max-height: 212px;
+  object-fit: cover;
+  object-position: right;
+}
+
+.newsletter-tile__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 32px;
+  row-gap: 24px;
+}
+```
+
+### Masonry grid
+
+##### Details:
+
+- Tiles are aligned using `grid-template-areas` CSS property
+
+- Grid areas are forwarded to CSS using `--tile-id` CSS variable
+
+- Flat tiles layout structure allows for easy adaptive changes compared to the two-column flex layout
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const MasonryTile = ({ name, position, children, tileId }) => {
+  return (
+    <div className="masonry-tile" style={{ '--tile-id': tileId }}>
+      <h3 className={textCn('rs-h3')}>{name}</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-8')}>
+        {position}
+      </p>
+      <div
+        className={cn(
+          textCn('rs-text-2', { hardness: 'hard', paragraphOffsetAuto: true }),
+          'rs-docs-offset-top-24'
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div className="masonry-tiles-container">
+      <MasonryTile
+        tileId="stephan"
+        name="Stephan Janssen"
+        position="Founder at DevOxx, Co-founder Voxxed"
+      >
+        Fully integrating a chatbot into your favourite IDE significantly
+        increases development productivity. No more toggling between platforms
+        like ChatGPT – now you have an AI assistant embedded directly within
+        your development environment. This allows for real-time code
+        discussions, code reviews, and even intelligent name suggestions during
+        refactoring tasks, among other features. AI Assistant takes software
+        development to a whole new level, and it's clear that JetBrains has only
+        scratched the surface of its potential. Exciting times to be a
+        developer!
+      </MasonryTile>
+      <MasonryTile
+        tileId="duncan"
+        name="Duncan McGregor"
+        position="Software Developer, Author of Java to Kotlin"
+      >
+        <p>
+          It’s hard to know what effect AI will have on our jobs as professional
+          developers, but right now JetBrains AI Assistant is making me more
+          productive by removing drudgery. It’s better than I am at writing Bash
+          to automate build and deployment tasks, and when Bash gets too
+          fragile, it does a good job of converting scripts into Python. It is
+          impressive when refactoring small routines too.
+        </p>
+        <p>
+          Sometimes its results aren’t to my taste, but then we can have a chat
+          about my preferred style and it will modify its suggestions
+          accordingly. I also appreciate that the user interface makes it clear
+          what information is being sent to the model, and that I have control
+          over what is brought into my codebase.
+        </p>
+      </MasonryTile>
+      <MasonryTile
+        tileId="luca"
+        name="Luca Nerlich"
+        position="Tech Consultant, Nerlich / Puls GbR"
+      >
+        Absolute game-changer. Use it daily.
+      </MasonryTile>
+      <MasonryTile
+        tileId="daniel"
+        name="Daniel Lima"
+        position="Senior Data Visualization Specialist"
+      >
+        This plugin is awesome, it is something that I did not know I needed,
+        and now I can't live without it. Superb job, and the recommendations are
+        better or fit better than other AI assistants.
+      </MasonryTile>
+      <MasonryTile
+        tileId="clemens"
+        name="Clemens Mattner"
+        position="Software Engineer"
+      >
+        Really love it! This assistant helped me migrate some controls from
+        Bootstrap to MudBlazor. Sometimes it writes my commit messages, if I'm
+        too lazy. This assistant is a really good helper at work and makes life
+        easier.
+      </MasonryTile>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.masonry-tiles-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto;
+  grid-template-areas:
+    'stephan luca'
+    'stephan luca'
+    'stephan daniel'
+    'duncan daniel'
+    'duncan clemens'
+    'duncan clemens';
+  column-gap: 32px;
+  row-gap: 32px;
+
+  @media (--md) {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: none;
+  }
+}
+
+.masonry-tile {
+  --rs-theme-dark: 1;
+
+  position: relative;
+
+  display: block;
+  grid-area: var(--tile-id);
+
+  box-sizing: border-box;
+  min-height: 0;
+  max-width: 600px;
+
+  padding: 24px;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-primary-light-theme);
+
+  @media (--md) {
+    grid-area: auto;
+  }
+}
+```
+
+### "Buy" tile
+
+##### Details:
+
+- Big tiles with a lot of content
+- One or more tiles may have `StickyTag`
+
+- Content inside tiles is aligned with siblings
+- `checkbox` aligned using subgrid
+
+- Actions in the footer are nailed to the tile bottom
+- Tiles may contain `Collapse` inside
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { StickyTag } from '@rescui/tag';
+import { Collapse } from '@rescui/collapse';
+import {
+  AquaLogo,
+  ClionLogo,
+  CodeWithMeLogo,
+  DatagripLogo,
+  DataspellLogo,
+  DotcoverLogo,
+  DotmemoryLogo,
+  DottraceLogo,
+  GolandLogo,
+  IntellijIdeaLogo,
+  PhpstormLogo,
+  PycharmLogo,
+  ResharperLogo,
+  ResharperCppLogo,
+  RiderLogo,
+  RubymineLogo,
+  RustroverLogo,
+  WebstormLogo
+} from '@jetbrains/logos/react';
+import { Checkbox } from '@rescui/checkbox';
+import { Button } from '@rescui/button';
+
+const products = [
+  { title: 'Aqua', logo: <AquaLogo /> },
+  { title: 'CLion', logo: <ClionLogo /> },
+  { title: 'Code With Me', logo: <CodeWithMeLogo /> },
+  { title: 'DataGrip', logo: <DatagripLogo /> },
+  { title: 'DataSpell', logo: <DataspellLogo /> },
+  { title: 'dotCover', logo: <DotcoverLogo /> },
+  { title: 'dotMemory', logo: <DotmemoryLogo /> },
+  { title: 'dotTrace', logo: <DottraceLogo /> },
+  { title: 'GoLand', logo: <GolandLogo /> },
+  { title: 'IntelliJ IDEA', logo: <IntellijIdeaLogo /> },
+  { title: 'PhpStorm', logo: <PhpstormLogo /> },
+  { title: 'PyCharm', logo: <PycharmLogo /> },
+  { title: 'ReSharper', logo: <ResharperLogo /> },
+  { title: 'ReSharper C++', logo: <ResharperCppLogo /> },
+  { title: 'Rider', logo: <RiderLogo /> },
+  { title: 'RubyMine', logo: <RubymineLogo /> },
+  { title: 'RustRover', logo: <RustroverLogo /> },
+  { title: 'WebStorm', logo: <WebstormLogo /> }
+];
+
+const FirstTile = () => {
+  return (
+    <div className="buy-tile">
+      <div className="buy-tile__first-half">
+        <h3 className={textCn('rs-h3')}>CLion</h3>
+        <p
+          className={cn(
+            textCn('rs-text-2', { hardness: 'hard' }),
+            'rs-docs-offset-top-16'
+          )}
+        >
+          A smart cross-platform IDE for C and C++
+        </p>
+        <div
+          className={cn('buy-tile-content__products', 'rs-docs-offset-top-8')}
+        >
+          <div
+            className={cn(
+              'buy-tile-content__products-item',
+              textCn('rs-text-2')
+            )}
+          >
+            <span className="buy-tile-content__products-logo">
+              <ClionLogo />
+            </span>
+            <span>CLion</span>
+          </div>
+        </div>
+      </div>
+      <div className={'buy-tile__second-half'}>
+        <Checkbox>
+          Supercharge with{' '}
+          <a href="#buy-tile" className={textCn('rs-link')}>
+            JetBrains AI Pro
+          </a>
+          <p className={textCn('rs-text-2', { hardness: 'pale' })}>£158.00 (incl. VAT £189.60)</p>
+        </Checkbox>
+        <div className="rs-docs-offset-top-24">
+          <div
+            className={cn(
+              'buy-tile-content__price-row',
+              'buy-tile-content__price-row_baseline'
+            )}
+          >
+            <div className={textCn('rs-text-3')}>
+              <span className="buy-tile-content__nowrap">per user, </span>
+              <span className="buy-tile-content__nowrap">first year</span>
+            </div>
+            <div
+              className={cn(
+                'buy-tile-content__nowrap',
+                textCn('rs-subtitle-2')
+              )}
+            >
+              £185<sup className="buy-tile-content__price-sup">.00</sup>
+            </div>
+          </div>
+          <p
+            className={cn('buy-tile-content__text-right', textCn('rs-text-3'))}
+          >
+            incl. VAT £222.80
+          </p>
+          <div
+            className={cn(
+              'buy-tile-content__price-row',
+              'rs-docs-offset-top-24'
+            )}
+          >
+            <div
+              className={cn('buy-tile-content__nowrap', textCn('rs-text-3'))}
+            >
+              second year
+            </div>
+            <div className="buy-tile-content__text-right">
+              <p className={textCn('rs-text-3', { hardness: 'hard' })}>
+                £148.00
+              </p>
+              <p className={textCn('rs-text-3')}>incl. VAT £177.60</p>
+            </div>
+          </div>
+          <div
+            className={cn(
+              'buy-tile-content__price-row',
+              'rs-docs-offset-top-24'
+            )}
+          >
+            <div
+              className={cn('buy-tile-content__nowrap', textCn('rs-text-3'))}
+            >
+              third year onwards
+            </div>
+            <div className="buy-tile-content__text-right">
+              <p className={textCn('rs-text-3', { hardness: 'hard' })}>
+                £111.00
+              </p>
+              <p className={textCn('rs-text-3')}>incl. VAT £133.20</p>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'buy-tile-content__footer-wrapper',
+            'rs-docs-offset-top-48'
+          )}
+        >
+          <div className={'buy-tile-content__footer'}>
+            <Button href="#buy-tile">Buy</Button>
+            <div className={cn(textCn('rs-text-2'), 'buy-tile-content__links')}>
+              <a
+                href="#buy-tile"
+                className={textCn('rs-link', { mode: 'standalone' })}
+              >
+                Get quote
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SecondTile = () => {
+  return (
+    <div className="buy-tile">
+      <div className="buy-tile__first-half">
+        <h3 className={textCn('rs-h3')}>All Products Pack</h3>
+        <p
+          className={cn(
+            textCn('rs-text-2', { hardness: 'hard' }),
+            'rs-docs-offset-top-16'
+          )}
+        >
+          Get 12 IDEs, 3 extensions, 2 profilers, and a collaborative
+          development service – all in one subscription.
+        </p>
+        <Collapse
+          icon="arrow"
+          title="Includes 18 tools"
+          disableLeftPadding
+          mode="clear"
+          className="rs-docs-offset-top-12"
+        >
+          <div className="buy-tile-content__products">
+            {products.map(({ title, logo }) => (
+              <div
+                key={title}
+                className={cn(
+                  'buy-tile-content__products-item',
+                  textCn('rs-text-3')
+                )}
+              >
+                <span className="buy-tile-content__products-logo">{logo}</span>
+                <span>{title}</span>
+              </div>
+            ))}
+          </div>
+        </Collapse>
+      </div>
+      <div className={'buy-tile__second-half'}>
+        <Checkbox>
+          Supercharge with{' '}
+          <a href="#buy-tile" className={textCn('rs-link')}>
+            JetBrains AI Pro
+          </a>
+          <p className={textCn('rs-text-2', { hardness: 'pale' })}>£158.00 (incl. VAT £189.60)</p>
+        </Checkbox>
+        <div className="rs-docs-offset-top-24">
+          <div
+            className={cn(
+              'buy-tile-content__price-row',
+              'buy-tile-content__price-row_baseline'
+            )}
+          >
+            <div className={textCn('rs-text-3')}>
+              <span className="buy-tile-content__nowrap">per user, </span>
+              <span className="buy-tile-content__nowrap">first year</span>
+            </div>
+            <div
+              className={cn(
+                'buy-tile-content__nowrap',
+                textCn('rs-subtitle-2')
+              )}
+            >
+              £639<sup className="buy-tile-content__price-sup">.00</sup>
+            </div>
+          </div>
+          <p
+            className={cn('buy-tile-content__text-right', textCn('rs-text-3'))}
+          >
+            incl. VAT £766.80
+          </p>
+          <div
+            className={cn(
+              'buy-tile-content__price-row',
+              'rs-docs-offset-top-24'
+            )}
+          >
+            <div
+              className={cn('buy-tile-content__nowrap', textCn('rs-text-3'))}
+            >
+              second year
+            </div>
+            <div className="buy-tile-content__text-right">
+              <p className={textCn('rs-text-3', { hardness: 'hard' })}>
+                £511.00
+              </p>
+              <p className={textCn('rs-text-3')}>incl. VAT £613.20</p>
+            </div>
+          </div>
+          <div
+            className={cn(
+              'buy-tile-content__price-row',
+              'rs-docs-offset-top-24'
+            )}
+          >
+            <div
+              className={cn('buy-tile-content__nowrap', textCn('rs-text-3'))}
+            >
+              third year onwards
+            </div>
+            <div className="buy-tile-content__text-right">
+              <p className={textCn('rs-text-3', { hardness: 'hard' })}>
+                £383.00
+              </p>
+              <p className={textCn('rs-text-3')}>incl. VAT £459.60</p>
+            </div>
+          </div>
+        </div>
+        <div
+          className={cn(
+            'buy-tile-content__footer-wrapper',
+            'rs-docs-offset-top-48'
+          )}
+        >
+          <div className={'buy-tile-content__footer'}>
+            <Button href="#buy-tile">Buy</Button>
+            <div className={cn(textCn('rs-text-2'), 'buy-tile-content__links')}>
+              <a
+                href="#buy-tile"
+                className={textCn('rs-link', { mode: 'standalone' })}
+              >
+                Get quote
+              </a>
+              <a
+                href="#buy-tile"
+                className={textCn('rs-link', { mode: 'standalone' })}
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div className={cn('buy-tiles-container', 'rs-docs-offset-top-16')}>
+      <FirstTile />
+      <StickyTag
+        content={'Best offer'}
+        color="white"
+        backgroundColor="var(--rs-color-danger)"
+        wrapperClassName="buy-tiles-container__tile-wrapper"
+      >
+        <SecondTile />
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss attached
+/* container styles */
+
+.buy-tiles-container {
+  display: grid;
+  column-gap: 32px;
+  row-gap: 32px;
+  grid-template-columns: 5fr 5fr 2fr;
+  grid-template-rows: auto;
+
+  @media (--md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (--sm) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.buy-tiles-container__tile-wrapper {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 2;
+}
+
+/* tile styles */
+
+.buy-tile {
+  position: relative;
+
+  display: grid;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  padding: 24px;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-white);
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 2;
+  row-gap: 24px;
+  box-shadow: inset 0 0 0 1px var(--rs-color-black-t20);
+}
+
+.buy-tile__first-half {
+  grid-row: 1 / span 1;
+}
+.buy-tile__second-half {
+  grid-row: 2 / span 1;
+
+  display: flex;
+  flex-direction: column;
+}
+
+/* tile content styles */
+
+.buy-tile-content__footer-wrapper {
+  display: flex;
+  flex: 1 0 auto;
+  align-items: flex-end;
+}
+
+.buy-tile-content__products {
+  column-count: 2;
+}
+
+.buy-tile-content__products-item {
+  display: flex;
+  column-gap: 8px;
+
+  align-items: center;
+
+  padding-top: 8px;
+}
+
+.buy-tile-content__products-logo {
+  width: 20px;
+  height: 20px;
+}
+
+.buy-tile-content__nowrap {
+  white-space: nowrap;
+}
+
+.buy-tile-content__text-right {
+  text-align: right;
+}
+
+.buy-tile-content__price-row {
+  display: flex;
+  justify-content: space-between;
+
+  &_baseline {
+    align-items: baseline;
+  }
+}
+
+.buy-tile-content__price-sup {
+  vertical-align: super;
+
+  font-size: medium;
+  font-weight: 400;
+}
+
+.buy-tile-content__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  column-gap: 32px;
+  row-gap: 24px;
+}
+
+.buy-tile-content__links {
+  display: flex;
+  column-gap: 16px;
+  row-gap: 12px;
+
+  flex-wrap: wrap;
+}
+```
+
+### Alternative "buy" tile
+
+##### Details:
+
+- Border has a non-transparent color
+- Align content between sibling tiles using subgrids
+- Use empty grid rows to support large forms in particular tiles
+- Use margins instead of `row-gap` because of empty grid rows
+- Change primary colors using css variables
+- Use pseudo-element for border to show it above content
+
+```tsx
+import { useState } from 'react';
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { Tag, presets } from '@rescui/tag';
+import { Button } from '@rescui/button';
+import { Checkbox } from '@rescui/checkbox';
+import { DownOutlineIcon, UpOutlineIcon } from '@rescui/icons';
+import { RustroverLogo } from '@jetbrains/logos/react';
+import { Input } from '@rescui/input';
+
+const FirstTile = () => {
+  const [isFormOpened, setIsFormOpened] = useState(false);
+
+  const ButtonIcon = isFormOpened ? UpOutlineIcon : DownOutlineIcon;
+
+  return (
+    <div
+      className={cn(
+        'alternative-buy-tile',
+        isFormOpened && 'alternative-buy-tile_with-form'
+      )}
+    >
+      <div className="alternative-buy-tile__header">
+        <div className="alternative-buy-tile-content__flex-row">
+          <h3 className={textCn('rs-h3')}>RustRover</h3>
+          <Tag {...presets['filled-light']}>non-commercial use</Tag>
+        </div>
+      </div>
+      <div className="alternative-buy-tile__price">
+        <div className={textCn('rs-digits-2')}>Free</div>
+      </div>
+      <div className="alternative-buy-tile__get">
+        <Button
+          mode="outline"
+          className="alternative-buy-tile-content__button"
+          icon={<ButtonIcon />}
+          onClick={() => setIsFormOpened(v => !v)}
+        >
+          Get
+        </Button>
+        {isFormOpened && (
+          <div>
+            <Input
+              placeholder="First name"
+              size="m"
+              className="rs-docs-offset-top-16"
+            />
+            <Input
+              placeholder="Last name"
+              size="m"
+              className="rs-docs-offset-top-16"
+            />
+            <Input
+              placeholder="Email"
+              type="email"
+              size="m"
+              className="rs-docs-offset-top-16"
+            />
+            <Input
+              placeholder="Select country"
+              size="m"
+              className="rs-docs-offset-top-16"
+            />
+            <p className={cn(textCn('rs-text-3'), 'rs-docs-offset-top-16')}>
+              JetBrains may ask you for clarification on whether the license is
+              used solely for non-commercial purposes. In the event of any
+              doubts, JetBrains reserves the right to revoke the license for
+              non-compliance with the non-commercial use conditions.
+            </p>
+            <Checkbox size="s" className="rs-docs-offset-top-8">
+              I agree to the Toolbox Subscription Agreement for Non-Commercial
+              Use
+            </Checkbox>
+            <Button mode="rock" size="s" className="rs-docs-offset-top-16">
+              Submit
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="alternative-buy-tile__footer">
+        <div className="alternative-buy-tile-content__flex-row">
+          <RustroverLogo className="alternative-buy-tile-content__footer-logo" />
+          <span className={textCn('rs-text-2')}>RustRover</span>
+        </div>
+        <p
+          className={cn(
+            textCn('rs-text-2', { hardness: 'hard' }),
+            'rs-docs-offset-top-8'
+          )}
+        >
+          A powerhouse IDE for Rust developers
+        </p>
+        <ul className={cn(textCn('rs-text-2'), textCn('rs-ul'))}>
+          <li>Requires JetBrains Account</li>
+          <li>Anonymous data is collected</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const SecondTile = () => {
+  return (
+    <div className="alternative-buy-tile">
+      <div className="alternative-buy-tile__header">
+        <h3 className={textCn('rs-h3')}>RustRover</h3>
+        <Checkbox className="rs-docs-offset-top-24">
+          Supercharge with{' '}
+          <a href="#alternative-buy-tile" className={textCn('rs-link')}>
+            JetBrains AI Pro
+          </a>
+          <p className={textCn('rs-text-2', { hardness: 'pale' })}>€100.00 (incl. VAT €119.00)</p>
+        </Checkbox>
+      </div>
+      <div className="alternative-buy-tile__price">
+        <div className="alternative-buy-tile-content__price-row">
+          <div
+            className={cn(
+              'alternative-buy-tile-content__nowrap',
+              textCn('rs-digits-2')
+            )}
+          >
+            €69
+            <sup className="alternative-buy-tile-content__price-sup">.00</sup>
+          </div>
+          <span className={textCn('rs-text-3')}>a year</span>
+        </div>
+        <p className={textCn('rs-text-3')}>incl. VAT €82.11</p>
+      </div>
+      <div className="alternative-buy-tile__get">
+        <Button mode="classic" className="alternative-buy-tile-content__button">
+          Buy
+        </Button>
+        <p
+          className={cn(
+            textCn('rs-text-2'),
+            'rs-docs-offset-top-12',
+            'alternative-buy-tile-content__text-center'
+          )}
+        >
+          <a
+            href="#alternative-buy-tile"
+            className={textCn('rs-link', { mode: 'standalone' })}
+          >
+            Get quote
+          </a>
+        </p>
+      </div>
+      <div className="alternative-buy-tile__footer">
+        <div className="alternative-buy-tile-content__flex-row">
+          <RustroverLogo className="alternative-buy-tile-content__footer-logo" />
+          <span className={textCn('rs-text-2')}>RustRover</span>
+        </div>
+        <p
+          className={cn(
+            textCn('rs-text-2', { hardness: 'hard' }),
+            'rs-docs-offset-top-8'
+          )}
+        >
+          A powerhouse IDE for Rust developers
+        </p>
+        <ul className={cn(textCn('rs-text-2'), textCn('rs-ul'))}>
+          <li>
+            Activated with a JetBrains Account, offline key, or license server
+          </li>
+          <li>Fine-grained control over shared data</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const ThirdTile = () => {
+  return (
+    <div className="alternative-buy-tile">
+      <div className="alternative-buy-tile__header">
+        <h3 className={textCn('rs-h3')}>Rust plugin for CLion</h3>
+      </div>
+      <div className="alternative-buy-tile__price">
+        <div className="alternative-buy-tile-content__price-row">
+          <div
+            className={cn(
+              'alternative-buy-tile-content__nowrap',
+              textCn('rs-digits-2')
+            )}
+          >
+            €29
+            <sup className="alternative-buy-tile-content__price-sup">.00</sup>
+          </div>
+          <span className={textCn('rs-text-3')}>a year</span>
+        </div>
+        <p className={textCn('rs-text-3')}>incl. VAT €34.51</p>
+      </div>
+      <div className="alternative-buy-tile__get">
+        <Button mode="classic" className="alternative-buy-tile-content__button">
+          Buy
+        </Button>
+        <p
+          className={cn(
+            textCn('rs-text-2'),
+            'rs-docs-offset-top-12',
+            'alternative-buy-tile-content__text-center'
+          )}
+        >
+          <a
+            href="#alternative-buy-tile"
+            className={textCn('rs-link', { mode: 'standalone' })}
+          >
+            Get quote
+          </a>
+        </p>
+      </div>
+      <div className="alternative-buy-tile__footer">
+        <div className="alternative-buy-tile-content__flex-row">
+          <RustroverLogo className="alternative-buy-tile-content__footer-logo" />
+          <span className={textCn('rs-text-2')}>RustRover</span>
+        </div>
+        <p
+          className={cn(
+            textCn('rs-text-2', { hardness: 'hard' }),
+            'rs-docs-offset-top-8'
+          )}
+        >
+          The plugin provides Rust language support
+        </p>
+        <ul className={cn(textCn('rs-text-2'), textCn('rs-ul'))}>
+          <li>30-day trial available</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div className="alternative-buy-tiles-container">
+      <div className="alternative-buy-tiles-container__tile-wrapper">
+        <FirstTile />
+      </div>
+      <div className="alternative-buy-tiles-container__tile-wrapper">
+        <SecondTile />
+      </div>
+      <div className="alternative-buy-tiles-container__tile-wrapper">
+        <ThirdTile />
+      </div>
+      <div className="alternative-buy-tiles-container__tile-wrapper">
+        <ThirdTile />
+      </div>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+/* container styles */
+
+.alternative-buy-tiles-container {
+  --rs-color-primary-light-theme: #00874d;
+  --rs-color-primary-dim-light-theme: #cce7db;
+  --rs-color-primary-fog-light-theme: #339f71;
+  --rs-color-primary-t-dim-light-theme: rgba(0, 135, 77, 0.8);
+  --rs-color-primary-t-fog-light-theme: rgba(0, 135, 77, 0.2);
+  --rs-color-primary-dark-theme: #00874d;
+  --rs-color-primary-dim-dark-theme: #142f26;
+  --rs-color-primary-fog-dark-theme: #057143;
+  --rs-color-primary-t-dim-dark-theme: rgba(0, 135, 77, 0.8);
+  --rs-color-primary-t-fog-dark-theme: rgba(0, 135, 77, 0.2);
+
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto;
+
+  column-gap: 32px;
+  row-gap: 0;
+
+  margin-top: -32px;
+
+  @media (--md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (--sm) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.alternative-buy-tiles-container__tile-wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 6;
+
+  margin-top: 32px;
+}
+
+/* tile styles */
+
+.alternative-buy-tile {
+  --my-tile-padding: 24px;
+
+  position: relative;
+
+  display: grid;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  padding: var(--my-tile-padding);
+
+  border-radius: 8px;
+
+  background-color: transparent;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 4;
+
+  &_with-form {
+    grid-row: auto / span 6;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: inherit;
+
+    content: '';
+    pointer-events: none;
+
+    box-shadow: inset 0 0 0 1px var(--rs-color-grey-20);
+  }
+}
+
+.alternative-buy-tile__header {
+  grid-row: 1;
+}
+
+.alternative-buy-tile__price {
+  grid-row: 2;
+
+  margin-top: 16px;
+}
+
+.alternative-buy-tile__get {
+  margin-top: 24px;
+  margin-bottom: 24px;
+
+  grid-row: 3;
+
+  .alternative-buy-tile_with-form & {
+    grid-row: 3 / span 3;
+  }
+}
+
+.alternative-buy-tile__footer {
+  grid-row: 4;
+
+  margin: 0 calc(-1 * var(--my-tile-padding)) calc(-1 * var(--my-tile-padding));
+  padding: var(--my-tile-padding);
+
+  background: var(--rs-color-grey-5);
+
+  .alternative-buy-tile_with-form & {
+    grid-row: 6;
+  }
+}
+
+/* tile content styles */
+
+.alternative-buy-tile-content__flex-row {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 8px;
+  row-gap: 8px;
+}
+
+.alternative-buy-tile-content__footer-logo {
+  height: 24px;
+  width: auto;
+}
+
+.alternative-buy-tile-content__button {
+  width: 100%;
+}
+
+.alternative-buy-tile-content__text-center {
+  text-align: center;
+}
+
+.alternative-buy-tile-content__nowrap {
+  white-space: nowrap;
+}
+
+.alternative-buy-tile-content__price-row {
+  display: flex;
+  column-gap: 8px;
+
+  align-items: baseline;
+}
+
+.alternative-buy-tile-content__price-sup {
+  vertical-align: super;
+
+  font-size: medium;
+  font-weight: 400;
+}
+```
+
+## Controls
+
+### Carousel vertical controls
+
+##### Details:
+
+- Without border
+- With `selected` state
+
+- With filling progress bar
+- With hover and focus-visible states
+- Control autoplay animation duration with `--carousel-vertical-control-autoplay-duration` css variable
+
+- With react state management
+
+```tsx
+import { useState } from 'react';
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const slidesTitles = [
+  'First slide',
+  'Second slide',
+  'Third slide',
+  'Fourth slide'
+];
+
+const AUTOPLAY_DURATION = '8s';
+
+const Demo = () => {
+  const [currentItem, setCurrentItem] = useState(0);
+  const [isAutoplayEnabled, setIsAutoplayEnabled] = useState(true);
+
+  return (
+    <ul
+      className={cn(
+        'carousel-vertical-controls',
+        isAutoplayEnabled && 'carousel-vertical-controls_autoplay'
+      )}
+      style={{
+        '--carousel-vertical-control-autoplay-duration': AUTOPLAY_DURATION
+      }}
+    >
+      {slidesTitles.map((title, i) => (
+        <li key={i}>
+          <button
+            type="button"
+            className={cn(
+              'carousel-vertical-controls__item',
+              i === currentItem && 'carousel-vertical-controls__item_selected'
+            )}
+            onAnimationEnd={() => {
+              setCurrentItem(curVal =>
+                curVal >= slidesTitles.length - 1 ? 0 : curVal + 1
+              );
+            }}
+            onClick={() => {
+              setCurrentItem(i);
+              setIsAutoplayEnabled(false);
+            }}
+          >
+            <p className={'carousel-vertical-controls__item-title'}>{title}</p>
+            <div className={'carousel-vertical-controls__item-content'}>
+              <p className={textCn('rs-text-2', { hardness: 'hard' })}>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
+                aliquid asperiores aut earum fuga in incidunt ipsam maiores
+                officia possimus quo repudiandae sequi similique temporibus.
+              </p>
+            </div>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss attached
+@import '@rescui/typography/lib/public-api.p.css';
+
+@keyframes carousel-vertical-controls-progress-bar-fill {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.carousel-vertical-controls {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+
+  width: 350px;
+}
+
+.carousel-vertical-controls__item-title {
+  @mixin rs-typography-text-2-full;
+}
+
+.carousel-vertical-controls__item-content {
+  display: none;
+
+  margin-top: 12px;
+}
+
+.carousel-vertical-controls__item {
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  width: 100%;
+  min-height: 0;
+  padding: 12px 24px;
+
+  border: none;
+  border-radius: 24px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: transparent;
+
+  appearance: none;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+
+    box-shadow: 0 0 0 4px var(--rs-color-primary-dim-light-theme);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      & .carousel-vertical-controls__item-title {
+        @mixin rs-typography-hardness-hard;
+      }
+    }
+  }
+
+  &:active {
+    & .carousel-vertical-controls__item-title {
+      @mixin rs-typography-hardness-hard;
+    }
+  }
+}
+
+.carousel-vertical-controls__item_selected {
+  --rs-theme-dark: 1;
+
+  overflow: hidden;
+
+  padding: 24px;
+
+  background-color: #5848cf;
+
+  & > * {
+    position: relative;
+  }
+
+  & .carousel-vertical-controls__item-title {
+    @mixin rs-typography-h4;
+  }
+
+  & .carousel-vertical-controls__item-content {
+    display: block;
+  }
+
+  .carousel-vertical-controls_autoplay &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: 0;
+
+    content: '';
+    pointer-events: none;
+
+    background-color: var(--rs-color-primary-light-theme);
+
+    animation: var(--carousel-vertical-control-autoplay-duration, 8s) linear both
+      carousel-vertical-controls-progress-bar-fill;
+  }
+}
+```
+
+### Carousel horizontal controls
+
+##### Details:
+
+- Without border
+- With `selected` state
+
+- With filling progress bar
+- With hover and focus-visible states
+- Control autoplay animation duration with `--carousel-horizontal-control-autoplay-duration` css variable
+
+- With react state management
+
+```tsx
+import { useState } from 'react';
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+const slidesTitles = [
+  'First slide',
+  'Second slide',
+  'Third slide',
+  'Fourth slide'
+];
+
+const AUTOPLAY_DURATION = '8s';
+
+const Demo = () => {
+  const [currentItem, setCurrentItem] = useState(0);
+  const [isAutoplayEnabled, setIsAutoplayEnabled] = useState(true);
+
+  return (
+    <ul
+      className={cn(
+        'carousel-horizontal-controls',
+        isAutoplayEnabled && 'carousel-horizontal-controls_autoplay',
+        'jb-offset-top-32'
+      )}
+      style={{
+        '--carousel-vertical-control-autoplay-duration': AUTOPLAY_DURATION
+      }}
+    >
+      {slidesTitles.map((title, i) => (
+        <li key={i}>
+          <button
+            type="button"
+            className={cn(
+              'carousel-horizontal-controls__item',
+              i === currentItem && 'carousel-horizontal-controls__item_selected'
+            )}
+            onAnimationEnd={() => {
+              setCurrentItem(curVal =>
+                curVal >= slidesTitles.length - 1 ? 0 : curVal + 1
+              );
+            }}
+            onClick={() => {
+              setCurrentItem(i);
+              setIsAutoplayEnabled(false);
+            }}
+          >
+            <p
+              className={cn(
+                textCn('rs-text-2'),
+                'carousel-horizontal-controls__item-title'
+              )}
+            >
+              {title}
+            </p>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+@keyframes carousel-horizontal-controls-progress-bar-fill {
+  0% {
+    transform: translateX(-100%);
+  }
+  80% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.carousel-horizontal-controls {
+  display: flex;
+  column-gap: 8px;
+}
+
+.carousel-horizontal-controls__item {
+  --rs-theme-dark: 1;
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  min-height: 0;
+  padding: 24px;
+
+  border: none;
+  border-radius: 24px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-black-t80);
+
+  appearance: none;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* reset user agent stylesheet at Chrome */
+  &:focus-visible {
+    outline: none;
+
+    box-shadow: 0 0 0 4px var(--rs-color-primary-dim-light-theme);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      & .carousel-horizontal-controls__item-title {
+        @mixin rs-typography-hardness-hard;
+      }
+    }
+  }
+
+  &:active {
+    & .carousel-horizontal-controls__item-title {
+      @mixin rs-typography-hardness-hard;
+    }
+  }
+}
+
+.carousel-horizontal-controls__item_selected {
+  overflow: hidden;
+
+  background-color: var(--rs-color-black-t90);
+
+  & .carousel-horizontal-controls__item-title {
+    @mixin rs-typography-hardness-hard;
+  }
+
+  & > * {
+    position: relative;
+  }
+
+  .carousel-horizontal-controls_autoplay &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: 0;
+
+    content: '';
+    pointer-events: none;
+
+    background-color: var(--rs-color-primary-light-theme);
+
+    animation: var(--carousel-horizontal-control-autoplay-duration, 8s) linear both
+      carousel-vertical-controls-progress-bar-fill;
+  }
+}
+```
+
+## Guide
+
+### Description
+
+This guide provides a detailed explanation of how to create various types of cards from scratch.
+
+The process is not strictly linear, so you can skip steps that are currently not relevant to you.
+
+Additionally, this guide includes complete examples for the following types of cards:
+
+- [Clickable cards](/cards/clickable/)
+- [Tiles](/cards/tiles/)
+- [Controls](/cards/controls/)
+
+### Clickable cards
+
+#### 1\. Template
+
+Clickable cards should always be implemented using either a `<button>` or an `<a>` element. This requires manually resetting browser user-agent styles. Use the following CSS styles to create the foundation:
+
+```postcss
+.my-card {
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 0;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+
+  appearance: none;
+  padding: 0;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+```
+
+Some styles may require further updates in the next steps.
+
+#### 2\. Add paddings and `border-radius`
+
+In this step, update the padding and `border-radius` for your card:
+
+```postcss
+.my-card {
+  /* ... */
+
+  border-radius: 8px;
+  padding: 24px;
+
+  /* ... */
+}
+```
+
+#### 3\. Add a border
+
+Due to [browser incompatibility issues with `border` styles in scaled UI](https://stackoverflow.com/questions/46105681/get-wrong-border-width-on-firefox), it is best to avoid the `border` property if you plan to dynamically change its width. Instead, use the `box-shadow` property for better consistency.
+
+Alternatively, you can use a `::before` pseudo-element for the border, but using `box-shadow` is recommended whenever possible.
+
+Here’s how to add a border using the `box-shadow` property:
+
+```postcss
+.my-card {
+  /* ... */
+
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+  transition: box-shadow 100ms;
+
+  /* ... */
+}
+```
+
+Next step, we add card state changes for the border. To make styling for various card states easier to manage, utilize CSS variables for border width and color:
+
+```postcss
+.my-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+}
+```
+
+By combining these updates with previous steps, the complete code will look like this:
+
+```postcss
+.my-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+  padding: 24px;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  transition: box-shadow 100ms;
+  appearance: none;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      --my-card-border-color: var(--rs-color-black);
+    }
+  }
+
+  &:focus-visible,
+  &:active {
+    --my-card-border-color: var(--rs-color-black);
+  }
+
+  &:active {
+    --my-card-border-width: 2px;
+  }
+}
+```
+
+##### 3.1 Animate border color only
+
+If you want only to animate border color, you can utilise `@property` at-rule. But keep in mind, it works only for [newer browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/@property#browser_compatibility):
+
+```postcss
+@property --my-card-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+.my-card {
+  /* ... */
+
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+  transition: --my-card-border-color 100ms;
+
+  /* ... */
+}
+```
+
+##### 3.2 Border as a pseudo-element
+
+When parts of the card, such as large header images, need to stretch fully to the edges, the `box-shadow` border may not render correctly. To fix this, you can use a `::after` pseudo-element to place the border:
+
+```postcss
+.my-card {
+  /* ... */
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: inherit;
+
+    content: '';
+    pointer-events: none;
+
+    box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+        --my-card-border-color
+      );
+    transition: box-shadow 100ms;
+  }
+}
+```
+
+Check out [the corresponding example](/cards/tiles/#newsletter-tiles).
+
+#### 4\. Optional additions
+
+##### 4.1 Glow hover effect
+
+When applying hover effects like the `useGlowHover` effect, ensure the card's state changes are done correctly.
+
+For example, instead of modifying the border for `:hover` and `:active` states, use the `enableBurst` option of the `useGlowHover` hook for smoother transitions:
+
+```jsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { useGlowHover } from '@rescui/use-glow-hover';
+
+const Demo = () => {
+  const ref = useGlowHover({ preset: 'transparent-blue', enableBurst: true });
+
+  return (
+    <button
+      type="button"
+      ref={ref}
+      className="my-card"
+      style={{ maxWidth: 400 }}
+    >
+      <h3 className={textCn('rs-h3')}>Card title</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi
+        aspernatur autem commodi consequuntur esse laudantium nobis numquam
+        officiis omnis, perferendis perspiciatis, possimus qui quidem, quis
+        repellat tempore unde veniam?
+      </p>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+Remove the need to adjust borders for hover states in the CSS:
+
+```postcss
+.my-card {
+  --my-card-border-width: 1px;
+  --my-card-border-color: var(--rs-color-black-t20);
+
+  position: relative;
+
+  display: block;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+  text-align: inherit;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 var(--my-card-border-width) var(
+      --my-card-border-color
+    );
+
+  appearance: none;
+  padding: 24px;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+```
+
+Check out [the corresponding example](/cards/clickable/#with-glow-hover).
+
+##### 4.2 Forward states to the action element inside
+
+It is recommended to forward states such as `:hover`, `:active`, and `:focus-visible` from the clickable card to the interactive elements inside, such as `button` or `rs-link`. This ensures that the inner elements behave consistently with the overall card's interaction states.
+
+This can be achieved using [PostCSS mixins](https://github.com/postcss/postcss-mixins).
+
+##### Button inside the card
+
+Here is an example of using a `Button` component within the card:
+
+```postcss
+@import '@rescui/button/lib/public-api.p.css';
+
+.my-card {
+  /* ... */
+
+  @media (hover: hover) {
+    &:hover &__button {
+      @mixin rs-button-state-hover;
+    }
+  }
+
+  &:active &__button {
+    @mixin rs-button-state-active;
+  }
+
+  &:focus-visible &__button {
+    @mixin rs-button-state-focus-visible;
+  }
+
+  &:active:focus-visible:not(:hover) &__button {
+    @mixin rs-button-state-active-focus-visible-no-hover;
+  }
+}
+```
+
+Additionally, remember to make the `Button` a static element inside the card:
+
+```jsx
+import { Button } from '@rescui/button';
+
+render(
+  <Button notFocusable className="my-card__button">
+    Download
+  </Button>
+);
+```
+
+Check out [the corresponding example](/cards/clickable/#with-action-button-inside).
+
+##### rs-link inside the card
+
+Similar behavior can also be applied when using an `rs-link` element within the card:
+
+```postcss
+@import '@rescui/typography/lib/public-api.p.css';
+
+.my-card {
+  /* ... */
+
+  @media (hover: hover) {
+    &:hover &__link {
+      @mixin rs-typography-link-state-hover;
+    }
+  }
+
+  &:focus-visible &__link {
+    @mixin rs-typography-link-state-focus-visible;
+  }
+}
+```
+
+As with the `Button`, ensure the `rs-link` is a static element:
+
+```jsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+
+render(
+  <span className={cn(textCn('rs-link'), 'my-card__link')}>Download</span>
+);
+```
+
+Check out [the corresponding example](/cards/clickable/#with-action-link-inside).
+
+### Tiles
+
+Tiles are non-clickable and generally non-interactive cards.
+
+They are simpler to create compared to clickable cards. However, their complexity may arise from additional elements such as interaction with `StickyTag`, content alignment with subgrids, or using flexbox.
+
+#### Template: With Border
+
+To maintain consistent presentation across all cards, it is recommended to use the `box-shadow` property as a border for tiles:
+
+```postcss
+.my-tile {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-white);
+  box-shadow: inset 0 0 0 1px var(--rs-color-black-t20);
+
+  appearance: none;
+  padding: 24px;
+}
+```
+
+#### Template: Without Border
+
+If you decide not to use a border, the tile should have a contrasting background to differentiate it from the surrounding content:
+
+```postcss
+.my-tile {
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-grey-5);
+
+  padding: 24px;
+}
+```
+
+#### Template: With a stretched image
+
+This approach aims to stretch the image to cover the edges of the tile. Using CSS variables here makes it easier to manage the layout.
+
+To display the border above stretched content, use a pseudo-element instead of a simple `box-shadow`. Also, do not use a transparent color for the border — use a solid one instead.
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import tileImage from '@/parts/cards/newsletter1.webp';
+
+const Demo = () => {
+  return (
+    <div className="my-tile-with-image" style={{ maxWidth: 450 }}>
+      <img
+        className="my-tile-with-image__img"
+        alt="keymaps"
+        src={tileImage.src}
+      />
+      <h3 className={textCn('rs-h3')}>
+        JetBrains Community Newsletter (Monthly)
+      </h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-16')}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad aperiam
+        atque aut debitis, distinctio harum nam nobis nulla pariatur
+        perspiciatis.
+      </p>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss attached
+.my-tile-with-image {
+  --my-tile-padding: 24px;
+
+  position: relative;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+  padding: var(--my-tile-padding);
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-white);
+
+  &__img {
+    position: relative;
+    top: calc(-1 * var(--my-tile-padding));
+    left: calc(-1 * var(--my-tile-padding));
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: calc(100% + 2 * var(--my-tile-padding));
+    height: 212px;
+    max-height: 212px;
+    object-fit: cover;
+    object-position: right;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+
+    border-radius: inherit;
+
+    content: '';
+    pointer-events: none;
+
+    box-shadow: inset 0 0 0 1px var(--rs-color-grey-20);
+  }
+}
+```
+
+#### Template: Aligning Content Between Sibling Cards
+
+In certain scenarios, content across sibling cards needs to be aligned so that it appears at the same height.
+
+One way to achieve this is by using flexbox with `flex-direction: column`. However, this method works only for basic cases. When the content has dynamic or differing heights between cards, it may not be sufficient.
+
+The preferred approach for more complex layouts is to use [CSS Grid’s subgrid feature](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid). Keep in mind this approach has certain [browser support limitations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid#browser_compatibility). Although subgrid layouts remain functional in unsupported browsers, you should carefully test their regression and viability in older browsers.
+
+```tsx
+import { textCn } from '@rescui/typography';
+
+const AlignedTile = ({ title, children }) => {
+  return (
+    <div className="my-aligned-tile">
+      <div className="my-aligned-tile__content">
+        <h3 className={textCn('rs-h3')}>{title}</h3>
+      </div>
+      <div className="my-aligned-tile__footer">
+        <p className={textCn('rs-text-2')}>{children}</p>
+      </div>
+    </div>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div className="my-aligned-tiles-container">
+      <AlignedTile
+        title={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}
+      >
+        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+        enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
+      </AlignedTile>
+      <AlignedTile title={'Where are nebulae?'}>
+        The closest known nebula to Earth is called the Helix Nebula. It is the
+        remnant of a dying star — possibly one like the Sun. It is approximately
+        700 light-years away from Earth.
+      </AlignedTile>
+      <AlignedTile title={'The drive to develop'}>
+        We help developers work faster by automating common, repetitive tasks to
+        enable them to stay focused on code design and the big picture. We
+        provide tools to explore and familiarize with code bases faster.
+      </AlignedTile>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.my-aligned-tiles-container {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 32px;
+  row-gap: 24px;
+
+  @media (--md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (--sm) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.my-aligned-tile {
+  position: relative;
+
+  display: grid;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  min-height: 0;
+  padding: 24px;
+
+  border: none;
+  border-radius: 8px;
+
+  background-color: var(--rs-color-white);
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  grid-row: auto / span 2;
+  row-gap: 16px;
+  box-shadow: inset 0 0 0 1px var(--rs-color-black-t20);
+
+  &__content {
+    grid-row: 1;
+  }
+
+  &__footer {
+    grid-row: 2;
+  }
+}
+```