@rescui/card 0.14.0 → 0.14.1-RUI-293-Update-menu-component-6ca9d26d3.22

package/llm/components/card-cn.md

@@ -0,0 +1,1397 @@
+# cardCn
+
+cardCn allows you to make any HTML tag appear as a card.
+
+## Usage
+
+#### cardCn vs Cards Catalog
+
+Use this guide to figure out what tools you need to implement a card on the website:
+
+1. If you need to use a standard card, use [cardCn](/components/card-cn/)
+2. If you need to use a non-standard card with minor changes, customize cardCn or build a custom [clickable](/cards/clickable/)/[non clickable (tiles)](/cards/tiles/) card using [Card Catalog](/cards/)
+3. If you need to use a non-standard card with major changes, build a custom card using [Card Catalog](/cards/) and [this guide](/cards/guide/)
+
+### Features showcase
+
+#### General use
+
+Card may be created on top of `div`, `button` and `a` elements. `div` element is used for `isClickable: false` cards. `a` element is used for `isClickable: true` cards with `href` attribute. `button` element is used for other `isClickable: true` cards. Grid and layout styles inside the card are not provided with generator, you need to set them up in your project. You can check out layout styles used in the examples below by inspecting a page in your browser.
+
+#### Default card
+
+No additional properties are added to the default card
+
+##### Properties:
+
+```
+{
+  isClickable: false,
+  mode: classic,
+  theme: light,
+  padding: 24,
+  borderRadius: 8
+}
+```
+
+- Layout styles are not provided with `cardCn`
+- [custom no-cardCn implementation](/cards/tiles/#base-example)
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { PersonIcon, TeamIcon } from '@rescui/icons';
+import avatarImage from '@/parts/card-cn/avatar.png';
+
+const MyCard = () => {
+  return (
+    <div
+      className={cn(cardCn(), 'card-1')}
+      style={{ '--card-image-url': `url(${avatarImage.src})` }}
+    >
+      <div className={cn('card-1__header-wrapper')}>
+        <div className={'card-1__image'} />
+        <div className="card-1__heading-info">
+          <h3 className={cn(textCn('rs-h3'), 'card-1__heading')}>
+            Konstantin Konstantinopolsky
+          </h3>
+        </div>
+      </div>
+      <p className={cn(textCn('rs-text-2'), 'card-1__text')}>
+        Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore empor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud. Lorem ipsum dolor.
+      </p>
+      <div className="card-1__tags">
+        <span className={cn(textCn('rs-text-3'), 'card-1__text')}>
+          <PersonIcon size={'s'} className={'card-1__icon'} /> Murcia, Spain
+        </span>
+        <span className={cn(textCn('rs-text-3'), 'card-1__text')}>
+          <TeamIcon size={'s'} className={'card-1__icon'} /> Design
+        </span>
+      </div>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+```postcss
+.card-1 {
+  max-width: 406px;
+}
+
+.card-1__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-1__image {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+  background: transparent var(--card-image-url) no-repeat 0 0;
+  background-size: 72px 72px;
+}
+
+.card-1__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-1__heading {
+  margin-top: 8px;
+}
+
+.card-1__text {
+  margin-top: 16px;
+}
+
+.card-1__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-1__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### Default clickable card
+
+- `isClickable: true`
+- `button` element is used instead of the `div` element
+- Layout styles are not provided with `cardCn`
+- [custom no-cardCn implementation](/cards/clickable/#base-example)
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { PersonIcon, TeamIcon } from '@rescui/icons';
+import avatarImage from '@/parts/card-cn/avatar.png';
+
+const MyCard = () => {
+  return (
+    <button
+      type="button"
+      className={cn(cardCn({ isClickable: true }), 'card-1-clickable')}
+      style={{ '--card-image-url': `url(${avatarImage.src})` }}
+    >
+      <div className={cn('card-1-clickable__header-wrapper')}>
+        <div className={'card-1-clickable__image'} />
+        <div className="card-1-clickable__heading-info">
+          <h3 className={cn(textCn('rs-h3'), 'card-1-clickable__heading')}>
+            Konstantin Konstantinopolsky
+          </h3>
+        </div>
+      </div>
+      <p className={cn(textCn('rs-text-2'), 'card-1-clickable__text')}>
+        Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore empor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud. Lorem ipsum dolor.
+      </p>
+      <div className="card-1-clickable__tags">
+        <span className={cn(textCn('rs-text-3'), 'card-1-clickable__text')}>
+          <PersonIcon size={'s'} className={'card-1-clickable__icon'} /> Murcia,
+          Spain
+        </span>
+        <span className={cn(textCn('rs-text-3'), 'card-1-clickable__text')}>
+          <TeamIcon size={'s'} className={'card-1-clickable__icon'} /> Design
+        </span>
+      </div>
+    </button>
+  );
+};
+
+render(<MyCard />);
+```
+
+```postcss
+.card-1-clickable {
+  max-width: 406px;
+}
+
+.card-1-clickable__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-1-clickable__image {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+  background: transparent var(--card-image-url) no-repeat 0 0;
+  background-size: 72px 72px;
+}
+
+.card-1-clickable__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-1-clickable__heading {
+  margin-top: 8px;
+}
+
+.card-1-clickable__text {
+  margin-top: 16px;
+}
+
+.card-1-clickable__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-1-clickable__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### Theme dark
+
+- Layout styles are not provided with `cardCn`
+- Typography styles are not provided with this mode. Use `--rs-theme-dark` to get smart text styles
+- `a` tag with `href` attribute is used instead of `div` element
+- [custom no-cardCn implementation](/cards/clickable/#dark-theme)
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { PersonIcon, TeamIcon } from '@rescui/icons';
+import avatarImage from '@/parts/card-cn/avatar.png';
+
+const MyCard = () => (
+  <section
+    style={{ background: '#27282c', '--rs-theme-dark': 1 }}
+    className="doc-section-with-paddings"
+  >
+    <a
+      href={'#'}
+      className={cn(cardCn({ isClickable: true }), 'card-2')}
+      style={{ '--card-image-url': `url(${avatarImage.src})` }}
+    >
+      <div className={cn('card-2__header-wrapper')}>
+        <div className={'card-2__image'} />
+        <div className="card-2__heading-info">
+          <h3 className={cn(textCn('rs-h3'), 'card-2__heading')}>
+            Konstantin Konstantinopolsky
+          </h3>
+        </div>
+      </div>
+      <p className={cn(textCn('rs-text-2'), 'card-2__text')}>
+        Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore empor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud. Lorem ipsum dolor.
+      </p>
+      <div className="card-2__tags">
+        <span className={cn(textCn('rs-text-3'), 'card-2__text')}>
+          <PersonIcon size={'s'} className={'card-2__icon'} /> Murcia, Spain
+        </span>
+        <span className={cn(textCn('rs-text-3'), 'card-2__text')}>
+          <TeamIcon size={'s'} className={'card-2__icon'} /> Design
+        </span>
+      </div>
+    </a>
+  </section>
+);
+
+render(<MyCard />);
+```
+
+```postcss
+.card-2 {
+  max-width: 406px;
+}
+
+.card-2__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-2__image {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+  background: transparent var(--card-image-url) no-repeat 0 0;
+  background-size: 72px 72px;
+}
+
+.card-2__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-2__heading {
+  margin-top: 8px;
+}
+
+.card-2__heading_two-lines {
+  height: 56px;
+  position: relative;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.card-2__text {
+  margin-top: 16px;
+}
+
+.card-2__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-2__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### Theme dark with ThemeProvider
+
+If you use [`ThemeContext`](/utils/ui-contexts/#themecontext) to manage the theme of your application, use `useCardCn` hook.
+
+```tsx
+import { useCardCn } from '@rescui/card';
+import { useTextStyles } from '@rescui/typography';
+import { ThemeProvider } from '@rescui/ui-contexts';
+import cn from 'classnames';
+import { PersonIcon, TeamIcon } from '@rescui/icons';
+import avatarImage from '@/parts/card-cn/avatar.png';
+
+const MyCard = () => {
+  const cardCn = useCardCn();
+  const textCn = useTextStyles();
+
+  return (
+    <section
+      style={{ background: '#27282c' }}
+      className="doc-section-with-paddings"
+    >
+      <a
+        href={'#'}
+        className={cn(cardCn({ isClickable: true }), 'card-2-prv')}
+        style={{ '--card-image-url': `url(${avatarImage.src})` }}
+      >
+        <div className={cn('card-2-prv__header-wrapper')}>
+          <div className={'card-2-prv__image'} />
+          <div className="card-2-prv__heading-info">
+            <h3 className={cn(textCn('rs-h3'), 'card-2-prv__heading')}>
+              Konstantin Konstantinopolsky
+            </h3>
+          </div>
+        </div>
+        <p className={cn(textCn('rs-text-2'), 'card-2-prv__text')}>
+          Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore
+          empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+          veniam, quis nostrud. Lorem ipsum dolor.
+        </p>
+        <div className="card-2-prv__tags">
+          <span className={cn(textCn('rs-text-3'), 'card-2-prv__text')}>
+            <PersonIcon size={'s'} className={'card-2-prv__icon'} /> Murcia,
+            Spain
+          </span>
+          <span className={cn(textCn('rs-text-3'), 'card-2-prv__text')}>
+            <TeamIcon size={'s'} className={'card-2-prv__icon'} /> Design
+          </span>
+        </div>
+      </a>
+    </section>
+  );
+};
+
+render(
+  <ThemeProvider theme="dark">
+    <MyCard />
+  </ThemeProvider>
+);
+```
+
+```postcss
+.card-2-prv {
+  max-width: 406px;
+}
+
+.card-2-prv__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-2-prv__image {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+  background: transparent var(--card-image-url) no-repeat 0 0;
+  background-size: 72px 72px;
+}
+
+.card-2-prv__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-2-prv__heading {
+  margin-top: 8px;
+}
+
+.card-2-prv__heading_two-lines {
+  height: 56px;
+  position: relative;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.card-2-prv__text {
+  margin-top: 16px;
+}
+
+.card-2-prv__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-2-prv__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### Mode `rock`
+
+- Can be used with both `light` and `dark` themes
+- Combine with `theme` property to get `dark-rock` cards
+- Typography color styles are provided with rock mode
+- **Avoid** using `rock` mode for non-clickable cards
+- [custom no-cardCn implementation](/cards/clickable/#rock-mode)
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { PersonIcon, TeamIcon } from '@rescui/icons';
+import avatarImage from '@/parts/card-cn/avatar.png';
+
+const MyCard = () => {
+  return (
+    <button
+      type="button"
+      className={cn(cardCn({ mode: 'rock', isClickable: true }), 'card-3')}
+      style={{ '--card-image-url': `url(${avatarImage.src})` }}
+    >
+      <div className={cn('card-3__header-wrapper')}>
+        <div className={'card-3__image'} />
+        <div className="card-3__heading-info">
+          <h3 className={cn(textCn('rs-h3'), 'card-3__heading')}>
+            Konstantin Konstantinopolsky
+          </h3>
+        </div>
+      </div>
+      <p className={cn(textCn('rs-text-2'), 'card-3__text')}>
+        Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore empor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud. Lorem ipsum dolor.
+      </p>
+      <div className="rs-docs-offset-top-48 rs-docs-row">
+        <span
+          className={cn(textCn('rs-text-3'), 'rs-docs-col card-3__text-small')}
+        >
+          <PersonIcon size={'s'} className={'card-3__icon'} /> Murcia, Spain
+        </span>
+        <span
+          className={cn(textCn('rs-text-3'), 'rs-docs-col card-3__text-small')}
+        >
+          <TeamIcon size={'s'} className={'card-3__icon'} /> Design
+        </span>
+      </div>
+    </button>
+  );
+};
+
+render(<MyCard />);
+```
+
+```postcss
+.card-3 {
+  max-width: 406px;
+}
+
+.card-3__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-3__image {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+  background: transparent var(--card-image-url) no-repeat 0 0;
+  background-size: 72px 72px;
+}
+
+.card-3__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-3__heading {
+  margin-top: 8px;
+}
+
+.card-3__heading_two-lines {
+  height: 56px;
+  position: relative;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.card-3__text {
+  margin-top: 16px;
+}
+
+.card-3__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-3__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### With Glow-hover
+
+- `Glow-hover` card type does not include `glow-hover` effect itself - it should be added alongside
+- Can be used with both for `light` and `dark` theme
+- Can be used with both `clickable` and `non-clickable` cards
+- You can use different glow-hover presets on cards. See more at [@rescui/useGlowHover](/components/use-glow-hover/presets/)
+- **Avoid** using with 'rock' mode
+- **Avoid** using on cards with `image` sections
+- **Avoid** using on cards with more than one action as this is a bad UX pattern. For example, avoid 'glow-hover' in a `Buy` card with a button and link
+- [custom no-cardCn implementation](/cards/clickable/#with-glow-hover)
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { PersonIcon, TeamIcon } from '@rescui/icons';
+import { useGlowHover } from '@rescui/use-glow-hover';
+import avatarImage from '@/parts/card-cn/avatar.png';
+
+const MyCard = () => {
+  const cardRef = useGlowHover({ lightColor: '#5B96EF', enableBurst: true });
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn(cardCn({ isClickable: true }), 'card-4')}
+      style={{ '--card-image-url': `url(${avatarImage.src})` }}
+    >
+      <div className={cn('card-4__header-wrapper')}>
+        <div className={'card-4__image'} />
+        <div className="card-4__heading-info">
+          <h3 className={cn(textCn('rs-h3'), 'card-4__heading')}>
+            Konstantin Konstantinopolsky
+          </h3>
+        </div>
+      </div>
+      <p className={cn(textCn('rs-text-2'), 'card-4__text')}>
+        Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore empor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud. Lorem ipsum dolor.
+      </p>
+      <div className="rs-docs-offset-top-48 rs-docs-row">
+        <span
+          className={cn(textCn('rs-text-3'), 'rs-docs-col card-4__text-small')}
+        >
+          <PersonIcon size={'s'} className={'card-4__icon'} /> Murcia, Spain
+        </span>
+        <span
+          className={cn(textCn('rs-text-3'), 'rs-docs-col card-4__text-small')}
+        >
+          <TeamIcon size={'s'} className={'card-4__icon'} /> Design
+        </span>
+      </div>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+```postcss
+.card-4 {
+  max-width: 406px;
+}
+
+.card-4__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-4__image {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+  background: transparent var(--card-image-url) no-repeat 0 0;
+  background-size: 72px 72px;
+}
+
+.card-4__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-4__heading {
+  margin-top: 8px;
+}
+
+.card-4__heading_two-lines {
+  height: 56px;
+  position: relative;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.card-4__text {
+  margin-top: 16px;
+}
+
+.card-4__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-4__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### With image via img tag
+
+- Use `cardImageCn` on the section with an image
+- Use `disableBorderTransparency` prop on the card
+- Section images always go first
+- Image height is static and equals `188px` + paddings
+- Full container size depends on card paddings and will change accordingly
+- Provide image in `img src` property
+- Can be used with both light and dark themes
+- Can be used only with `classic` mode now. Use it with `rock` mode at your own risk
+- **Avoid** using with GlowHover effect
+- **Avoid** using if you need text on images. Instead, use card image with DIV solution
+- [custom no-cardCn implementation](/cards/clickable/#newsletter-cards)
+
+```tsx
+import { cardCn, cardImageCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { Button } from '@rescui/button';
+import { Input } from '@rescui/input';
+import testImage from '@/parts/card-cn/card-background.jpg';
+
+const MyCard = () => {
+  return (
+    <div
+      className={cardCn({ isClickable: true, disableBorderTransparency: true })}
+      style={{ maxWidth: 406 }}
+    >
+      <span className={cardImageCn({ cardImageType: 'cardImageImg' })}>
+        <img src={testImage.src} alt={'test img'} />
+      </span>
+      <h3 className={textCn('rs-h3')}>
+        JetBrains Community Newsletter (Monthly)
+      </h3>
+      <Input placeholder={'Email'} className="rs-docs-offset-top-8" />
+      <p className={cn(textCn('rs-text-3'), 'rs-docs-offset-top-12')}>
+        By submitting this form, I agree that my name, email address, and
+        location data may be used by JetBrains to send me newsletters, including
+        commercial communications, and to process my personal data for this
+        purpose. I agree that JetBrains may process said data using third-party
+        services for this purpose in accordance with the JetBrains Privacy
+        Policy. I understand that I can revoke this consent at any time in my
+        profile. In addition, an unsubscribe link is included in each email.
+      </p>
+      <Button mode="rock" className={'rs-docs-offset-top-24'}>
+        Subscribe
+      </Button>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+#### With image via div tag
+
+- Use if you need to use an image with text
+- Use `cardImageCn` on sections with an image
+- Use `disableBorderTransparency` prop on the card
+- Section image always go first
+- Image height is static and equals `188px` + paddings
+- Full container size depends on card paddings and will change accordingly
+- Provide image in `css` or `inline styles` with `background-image` property
+- Can be used with both `light` and `dark` themes
+- Can be used only with `classic` mode now. Use it with `rock` mode at your own risk
+- **Avoid** using with GlowHover effect
+
+```tsx
+import { cardCn, cardImageCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { Button } from '@rescui/button';
+import { Input } from '@rescui/input';
+import testImage from '@/parts/card-cn/card-background.jpg';
+
+const MyCard = () => {
+  return (
+    <div
+      className={cardCn({
+        isClickable: false,
+        disableBorderTransparency: true
+      })}
+      style={{ maxWidth: 406 }}
+    >
+      <div
+        className={cardImageCn({ cardImageType: 'cardImageDiv' })}
+        style={{ backgroundImage: `url(${testImage.src})` }}
+      >
+        <div style={{ '--rs-theme-dark': 1 }} className={textCn('rs-h3')}>
+          IntelliJ Idea
+        </div>
+      </div>
+      <h3 className={textCn('rs-h3')}>
+        JetBrains Community Newsletter (Monthly)
+      </h3>
+      <Input placeholder="Email" className="rs-docs-offset-top-8" />
+      <p className={cn(textCn('rs-text-3'), 'rs-docs-offset-top-12')}>
+        By submitting this form, I agree that my name, email address, and
+        location data may be used by JetBrains to send me newsletters, including
+        commercial communications, and to process my personal data for this
+        purpose. I agree that JetBrains may process said data using third-party
+        services for this purpose in accordance with the JetBrains Privacy
+        Policy. I understand that I can revoke this consent at any time in my
+        profile. In addition, an unsubscribe link is included in each email.
+      </p>
+      <Button mode="rock" className={'rs-docs-offset-top-24'}>
+        Subscribe
+      </Button>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+#### Without fixed image height
+
+Use `disableFixedHeight: true` option if an aspect ratio of the image is important
+
+```tsx
+import { cardCn, cardImageCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import testImage from '@/parts/card-cn/card-fleet-background.png';
+
+const MyCard = () => {
+  return (
+    <div
+      className={cardCn({ isClickable: true, disableBorderTransparency: true })}
+      style={{ maxWidth: 506 }}
+    >
+      <span
+        className={cardImageCn({
+          cardImageType: 'cardImageImg',
+          disableFixedHeight: true
+        })}
+      >
+        <img src={testImage.src} alt={'test img'} />
+      </span>
+      <h3 className={textCn('rs-h3')}>Fleet landing page</h3>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-16')}>
+        Stylish next-generation IDE landing page with some image animation on
+        scroll and subscribing form
+      </p>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+        <a
+          className={textCn('rs-link', { external: true, mode: 'standalone' })}
+        >
+          Explore
+        </a>
+      </p>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+#### With image on the side
+
+- use custom CSS to position an image
+- use `disableBorderTransparency` prop on the card
+- image takes a fixed percentage of the card width
+- transforms into a vertical card on `--sm`
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import testImage from '@/parts/card-cn/card-fleet-background.png';
+
+const MyCard = () => {
+  return (
+    <div
+      className={cardCn({ disableBorderTransparency: true })}
+      style={{ maxWidth: 900 }}
+    >
+      <div className="card-with-img-on-left">
+        <span className="card-with-img-on-left__img">
+          <img src={testImage.src} alt={'test img'} />
+        </span>
+        <div>
+          <h3 className={textCn('rs-h3')}>Fleet landing page</h3>
+          <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-16')}>
+            Stylish next-generation IDE landing page with some image animation
+            on scroll and subscribing form
+          </p>
+          <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-24')}>
+            <a
+              className={textCn('rs-link', {
+                external: true,
+                mode: 'standalone'
+              })}
+            >
+              Explore
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+```postcss
+.card-with-img-on-left {
+  display: flex;
+
+  @media (--sm) {
+    flex-direction: column;
+  }
+
+  &__img {
+    position: relative;
+    top: calc(-1 * var(--rs-out-card-padding));
+    left: calc(-1 * var(--rs-out-card-padding));
+
+    display: flex;
+    flex: 1 0 auto;
+    justify-content: center;
+    align-items: center;
+
+    width: calc(50% + var(--rs-out-card-padding));
+    margin-bottom: calc(-2 * var(--rs-out-card-padding));
+
+    @media (--sm) {
+      top: calc(-1 * var(--rs-out-card-padding));
+      left: calc(-1 * var(--rs-out-card-padding));
+
+      width: calc(100% + var(--rs-out-card-padding) * 2);
+      margin-bottom: 0;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+```
+
+#### With Different border radius
+
+- Card can use the following border-radius values with props: `0`, `8`, `16`, and `24`
+- Default border radius value is `8`
+- If you wish to substitute border-radius property in your project, use `--rs-card-border-radius` css-var
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { WebstormLogo } from '@jetbrains/logos/react';
+import { Button } from '@rescui/button';
+
+const MyCards = () => {
+  return (
+    <div className="rs-docs-row">
+      <div className="rs-docs-col-auto-fill" style={{ maxWidth: 400 }}>
+        <div className={cardCn({ isClickable: true, borderRadius: 0 })}>
+          <WebstormLogo style={{ width: 64, height: 64 }} />
+          <h3 className={cn(textCn('rs-h3'), 'rs-docs-offset-top-16')}>
+            WebStorm
+          </h3>
+          <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-16')}>
+            The JavaScript and TypeScript IDE
+          </p>
+          <div
+            className={
+              'rs-docs-row rs-docs-row_vertical-center rs-docs-offset-top-48'
+            }
+          >
+            <Button mode="rock" className={'rs-docs-col rs-docs-col-inline'}>
+              Buy
+            </Button>
+            <span
+              className={cn(
+                textCn('rs-link', { mode: 'standalone' }),
+                'rs-docs-col rs-docs-col-inline'
+              )}
+            >
+              Learn more
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="rs-docs-col-auto-fill" style={{ maxWidth: 400 }}>
+        <div className={cardCn({ isClickable: true })}>
+          <WebstormLogo style={{ width: 64, height: 64 }} />
+          <h3 className={cn(textCn('rs-h3'), 'rs-docs-offset-top-16')}>
+            WebStorm
+          </h3>
+          <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-16')}>
+            The JavaScript and TypeScript IDE
+          </p>
+          <div
+            className={
+              'rs-docs-row rs-docs-row_vertical-center rs-docs-offset-top-48'
+            }
+          >
+            <Button mode="rock" className={'rs-docs-col rs-docs-col-inline'}>
+              Buy
+            </Button>
+            <span
+              className={cn(
+                textCn('rs-link', { mode: 'standalone' }),
+                'rs-docs-col rs-docs-col-inline'
+              )}
+            >
+              Learn more
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+render(<MyCards />);
+```
+
+#### With Different paddings
+
+- Card can use the following padding values with props: `0` (set the correct padding manually), `16`, `24`, and `32`
+- Default border radius value is `24`
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { Button } from '@rescui/button';
+
+const MyCard = () => {
+  return (
+    <div
+      className={cardCn({ isClickable: true, paddings: 32 })}
+      style={{ maxWidth: 500 }}
+    >
+      <h2 className={textCn('rs-h2')}>All ReSharper Ultimate+Rider</h2>
+      <p className={cn(textCn('rs-text-2'), 'rs-docs-offset-top-16')}>
+        Lorem ipsum dolor sit amet,duis voluptate velit esse cillum dolore empor
+        incididunt ut labore.
+      </p>
+      <p className={cn(textCn('rs-digits-2'), 'rs-docs-offset-top-16')}>
+        $27 665.00
+      </p>
+      <p className={textCn('rs-text-3')}>/user 1st year</p>
+
+      <p className={cn(textCn('rs-text-3'), 'rs-docs-offset-top-16')}>
+        $399.00 2nd year
+      </p>
+      <p className={textCn('rs-text-3')}>$299.00 3rd year onwards</p>
+      <div
+        className={
+          'rs-docs-row rs-docs-row_vertical-center rs-docs-offset-top-48'
+        }
+      >
+        <Button mode="rock" className={'rs-docs-col rs-docs-col-inline'}>
+          Buy
+        </Button>
+        <div className={'rs-docs-col rs-docs-col-auto-fill'}>
+          <div className={'rs-docs-row rs-docs-row_right '}>
+            <span
+              className={cn(
+                textCn('rs-link', { mode: 'standalone' }),
+                'rs-docs-col-inline '
+              )}
+            >
+              Get quote
+            </span>
+            <span
+              className={cn(
+                textCn('rs-link', { mode: 'standalone' }),
+                'rs-docs-col rs-docs-col-inline'
+              )}
+            >
+              Learn more
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+render(<MyCard />);
+```
+
+#### With dark theme and every available property included
+
+- This example of card (plugin content) contains all non-default properties
+- You can use `--rs-theme-dark` css variable to set the section theme. The card's theme will be set automatically
+- For plugin card layout **avoid** using plugin names longer than 2 lines
+- The layout in this example hides the rest of the name with `line-clamp` css property
+
+```tsx
+import { cardCn } from '@rescui/card';
+import { textCn } from '@rescui/typography';
+import cn from 'classnames';
+import { StarIcon } from '@rescui/icons';
+import { AmperLogo } from '@jetbrains/logos/react';
+
+const PluginCard = () => {
+  return (
+    <section
+      style={{ background: '#27282c', '--rs-theme-dark': 1 }}
+      className="doc-section-with-paddings"
+    >
+      <div
+        className={cn(
+          cardCn({
+            isClickable: true,
+            paddings: 32,
+            borderRadius: 24,
+            mode: 'rock'
+          }),
+          'card-5'
+        )}
+      >
+        <div className={cn('card-5__header-wrapper')}>
+          <AmperLogo className={'card-5__logo'} />
+          <div className="card-5__heading-info">
+            <h3 className={textCn('rs-h3')}>Amper</h3>
+            <p className={cn(textCn('rs-text-3'), 'rs-docs-rating')}>
+              {[1, 2, 3, 4, 5].map((e, i) => (
+                <StarIcon
+                  key={`star${i}`}
+                  size={'m'}
+                  className={'rs-docs-offset-top-8 rs-docs-rating-item'}
+                />
+              ))}
+            </p>
+          </div>
+        </div>
+        <p className={cn(textCn('rs-text-2'), 'card-5__text')}>
+          Provides support for Amper project configuration tool.
+        </p>
+        <div className="rs-docs-offset-top-48 rs-docs-row">
+          <span
+            className={cn(
+              textCn('rs-text-3'),
+              'rs-docs-col rs-docs-col-auto-fill card-5__text-small'
+            )}
+          >
+            2,370 downloads
+          </span>
+          <span
+            className={cn(
+              textCn('rs-text-3'),
+              'rs-docs-col rs-docs-col-inline card-5__text-small'
+            )}
+          >
+            Free
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+render(<PluginCard />);
+```
+
+```postcss attached
+.card-5 {
+  max-width: 406px;
+}
+
+.card-5__header-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.card-5__logo {
+  min-width: 72px;
+  height: 72px;
+  max-width: 100%;
+  flex-basis: auto;
+}
+
+.card-5__heading-info {
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.card-5__text {
+  margin-top: 16px;
+}
+
+.card-5__icon {
+  margin-right: 4px;
+
+  vertical-align: bottom;
+}
+
+.card-5__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 48px;
+  margin-right: -2px;
+  margin-left: -2px;
+}
+```
+
+#### With action button inside
+
+When you need to forward card states to the `Button` component inside, you can use `cardButtonCn` helper. Important details:
+
+- This method only works for `isClickable: true` card
+- Avoid using more than one dynamic element cards like this
+- [Custom no-cardCn implementation](/cards/clickable/#with-action-button-inside)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { Button } from '@rescui/button';
+import { cardCn, cardButtonCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <button
+      type="button"
+      onClick={() => console.log('Card onClick called')}
+      className={cardCn({ isClickable: true })}
+      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={cardButtonCn()}>
+          Click me
+        </Button>
+      </div>
+    </button>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With action link inside
+
+When you need to forward card states to the `rs-link` inside, you can use `cardLinkCn` helper. Important details:
+
+- This method works only for `isClickable: true` card
+- Avoid using more than one dynamic element cards like this
+- [Custom no-cardCn implementation](/cards/clickable/#with-action-link-inside)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { cardCn, cardLinkCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <a
+      href="#with-action-link-inside"
+      className={cardCn({ isClickable: true })}
+      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' }),
+            cardLinkCn()
+          )}
+        >
+          Click me
+        </span>
+      </div>
+    </a>
+  );
+};
+
+render(<Demo />);
+```
+
+## CSS API
+
+### Clickable cards
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-card-padding` | `<length>` | Inner padding of the card |
+| `--rs-card-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border radius of the card |
+| `--rs-card-static-background` | [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | Background of the card |
+| `--rs-card-static-border-width` | `<length>` | Border width of the card |
+| `--rs-card-static-border-color` | `<color>` | Border color of the card |
+| `--rs-card-hover-background` | [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | Background of the card in the `:hover` state |
+| `--rs-card-hover-border-width` | `<length>` | Border width of the card in the `:hover` state |
+| `--rs-card-hover-border-color` | `<color>` | Border color of the card in the `:hover` state |
+| `--rs-card-focus-background` | [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | Background of the card in the `:focus-visible` state |
+| `--rs-card-focus-border-width` | `<length>` | Border width of the card in the `:focus-visible` state |
+| `--rs-card-focus-border-color` | `<color>` | Border color of the card in the `:focus-visible` state |
+| `--rs-card-active-background` | [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | Background of the card in the `:active` state |
+| `--rs-card-active-border-width` | `<length>` | Border width of the card in the `:active` state |
+| `--rs-card-active-border-color` | `<color>` | Border color of the card in the `:active` state |
+
+### Non-clickable tiles
+
+| Variable | Syntax | Description |
+| --- | --- | --- |
+| `--rs-card-padding` | `<length>` | Inner padding of the card |
+| `--rs-card-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border radius of the card |
+| `--rs-card-static-background` | [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background) | Background of the card |
+| `--rs-card-static-border-width` | `<length>` | Border width of the card |
+| `--rs-card-static-border-color` | `<color>` | Border color of the card |
+
+### Examples
+
+#### Borderless card
+
+Remember to customize variables for all states when customizing clickable card
+
+[Custom no-cardCn implementation](/cards/clickable/#borderless-example)
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <a
+      href="#borderless-card"
+      className={cn(cardCn({ isClickable: true }), 'borderless-card-cn')}
+      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>
+    </a>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss attached
+.borderless-card-cn {
+  --rs-card-static-border-width: 0px;
+  --rs-card-hover-border-width: 0px;
+  --rs-card-focus-border-width: 0px;
+  --rs-card-active-border-width: 0px;
+  --rs-card-static-background: var(--rs-color-grey-5);
+  --rs-card-hover-background: var(--rs-color-grey-10);
+  --rs-card-focus-background: var(--rs-color-grey-10);
+  --rs-card-active-background: var(--rs-color-grey-20);
+}
+```
+
+#### Colorful border
+
+```tsx
+import cn from 'classnames';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ padding: 48, background: '#000', '--rs-theme-dark': '1' }}>
+      <a
+        href="#colorful-border"
+        className={cn(cardCn({ isClickable: true }), 'colorful-card-cn')}
+        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>
+      </a>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+```postcss
+.colorful-card-cn {
+  --rs-card-static-border-width: 1px;
+  --rs-card-hover-border-width: 2px;
+  --rs-card-focus-border-width: 3px;
+  --rs-card-active-border-width: 3px;
+  --rs-card-static-border-color: rgba(141, 72, 255, 0.8);
+  --rs-card-hover-border-color: rgba(141, 72, 255, 0.8);
+  --rs-card-focus-border-color: rgba(141, 72, 255, 0.8);
+  --rs-card-active-border-color: rgba(141, 72, 255, 0.8);
+  --rs-card-static-background: transparent;
+  --rs-card-hover-background: transparent;
+  --rs-card-focus-background: transparent;
+  --rs-card-active-background: transparent;
+}
+```