hds-web 1.33.2 → 1.33.3

package/src/HDS/components/Cards/Menu/flyoutC.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Typography } from '../../../foundation/Typography'
+import { HDSColor } from "../../../foundation/ColorPalette";
+import PropTypes from 'prop-types';
+
+export default function FlyoutC(props) {
+    const {
+        title,
+        title_colorClass,
+        img_url,
+        cta_link
+    } = props;
+    return (
+        <a href={cta_link ?? ''}>
+        <div className="p-6 hover:shadow-lg cursor-pointer transition-all duration-300 ease-in-out group/flyoutc">
+            <div className=" flex flex-row items-center gap-6 tb:min-w-[396px]">
+                <div className="">
+                    {
+                        img_url && (
+                                <img src={props.img_url} className='rounded-xl max-w-[128px] group-hover/flyoutc:shadow-lg transition-all duration-300 ease-in-out' alt={props.title} />
+                        )
+                    }
+                </div >
+                <Typography textStyle='body3c-medium' className={HDSColor(title_colorClass) + ' '} >{title}</Typography>
+
+            </div>
+        </div>
+        </a>
+
+    );
+}
+
+FlyoutC.defaultProps = {
+    img_url: 'text-neutral-900'
+}

package/src/HDS/components/Cards/Menu/flyoutD.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Typography } from "../../../foundation/Typography";
+import { Icon } from "../../common-components";
+export default function FlyoutD(props) {
+    return (
+        <a href={props.link} className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon">
+            {props.IconVariant && 
+            <div className="w-full h-full tb-l:pb-6">
+
+            <div
+                className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200"
+                >
+                <Icon
+                    height=' tb-l:h-12 tb-l:w-12 h-6 w-6'
+                    variant={props.IconVariant}
+                    className=' stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300'
+                    />
+                    </div>
+            </div>
+            }
+            <div className="flex flex-col gap-1 w-full h-full">
+                {props.btnLabel && 
+                <div className="flex items-center">
+                    <Typography textStyle='body3c-medium' className='text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 '>
+                        {props.btnLabel}
+                    </Typography>
+
+                        <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out invisible group-hover/icon:visible ">
+                        <Icon
+                            height={'h-4 w-4 stroke-2 transition-all ease-in-out   '}
+                            variant={'chevronright'}
+                            strokeClass={'stroke-blue-500'}
+                        />
+                    </div>
+                </div>
+                }
+                {props.description && <Typography textStyle='body3c' className='text-neutral-600 line-clamp-5'>
+                    {props.description}
+                </Typography>}
+            </div>
+        </a>
+    )
+}

package/src/HDS/components/Cards/Menu/flyoutFull.js

@@ -0,0 +1,161 @@
+import React from "react";
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import {
+  BookOpenIcon,
+  BriefcaseIcon,
+  GlobeAltIcon,
+  InformationCircleIcon,
+  NewspaperIcon,
+  ShieldCheckIcon,
+  UserGroupIcon,
+  UsersIcon,
+  VideoCameraIcon,
+} from '@heroicons/react/24/outline'
+
+const engagement = [
+  { name: 'About', href: '#', icon: InformationCircleIcon },
+  { name: 'Customers', href: '#', icon: UsersIcon },
+  { name: 'Press', href: '#', icon: NewspaperIcon },
+  { name: 'Careers', href: '#', icon: BriefcaseIcon },
+  { name: 'Privacy', href: '#', icon: ShieldCheckIcon },
+]
+const resources = [
+  { name: 'Community', href: '#', icon: UserGroupIcon },
+  { name: 'Partners', href: '#', icon: GlobeAltIcon },
+  { name: 'Guides', href: '#', icon: BookOpenIcon },
+  { name: 'Webinars', href: '#', icon: VideoCameraIcon },
+]
+const recentPosts = [
+  {
+    id: 1,
+    title: 'Boost your conversion rate',
+    href: '#',
+    date: 'Mar 16, 2023',
+    datetime: '2023-03-16',
+    category: { title: 'Marketing', href: '#' },
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    description:
+      'Et et dolore officia quis nostrud esse aute cillum irure do esse. Eiusmod ad deserunt cupidatat est magna Lorem.',
+  },
+  {
+    id: 2,
+    title: 'How to use search engine optimization to drive sales',
+    href: '#',
+    date: 'Mar 10, 2023',
+    datetime: '2023-03-10',
+    category: { title: 'Sales', href: '#' },
+    imageUrl:
+      'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
+    description: 'Optio cum necessitatibus dolor voluptatum provident commodi et.',
+  },
+]
+
+export default function FlyoutFull(props) {
+    const{
+        
+    }= props;
+  return (
+    <Popover className="relative isolate z-50 shadow">
+      <div className="bg-white py-5">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+            Solutions
+            <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+          </Popover.Button>
+        </div>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 -translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 -translate-y-1"
+      >
+        <Popover.Panel className="absolute inset-x-0 top-0 -z-10 bg-white pt-16 shadow-lg ring-1 ring-gray-900/5">
+          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-y-10 gap-x-8 py-10 px-6 lg:grid-cols-2 lg:px-8">
+            <div className="grid grid-cols-2 gap-x-6 sm:gap-x-8">
+              <div>
+                <h3 className="text-sm font-medium leading-6 text-gray-500">Engagement</h3>
+                <div className="mt-6 flow-root">
+                  <div className="-my-2">
+                    {engagement.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900"
+                      >
+                        <item.icon className="h-6 w-6 flex-none text-gray-400" aria-hidden="true" />
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium leading-6 text-gray-500">Resources</h3>
+                <div className="mt-6 flow-root">
+                  <div className="-my-2">
+                    {resources.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900"
+                      >
+                        <item.icon className="h-6 w-6 flex-none text-gray-400" aria-hidden="true" />
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-10 sm:gap-8 lg:grid-cols-2">
+              <h3 className="sr-only">Recent posts</h3>
+              {recentPosts.map((post) => (
+                <article
+                  key={post.id}
+                  className="relative isolate flex max-w-2xl flex-col gap-x-8 gap-y-6 sm:flex-row sm:items-start lg:flex-col lg:items-stretch"
+                >
+                  <div className="relative flex-none">
+                    <img
+                      className="aspect-[2/1] w-full rounded-lg bg-gray-100 object-cover sm:aspect-[16/9] sm:h-32 lg:h-auto"
+                      src={post.imageUrl}
+                      alt=""
+                    />
+                    <div className="absolute inset-0 rounded-lg ring-1 ring-inset ring-gray-900/10" />
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-x-4">
+                      <time dateTime={post.datetime} className="text-sm leading-6 text-gray-600">
+                        {post.date}
+                      </time>
+                      <a
+                        href={post.category.href}
+                        className="relative z-10 rounded-full bg-gray-50 py-1.5 px-3 text-xs font-medium text-gray-600 hover:bg-gray-100"
+                      >
+                        {post.category.title}
+                      </a>
+                    </div>
+                    <h4 className="mt-2 text-sm font-semibold leading-6 text-gray-900">
+                      <a href={post.href}>
+                        <span className="absolute inset-0" />
+                        {post.title}
+                      </a>
+                    </h4>
+                    <p className="mt-2 text-sm leading-6 text-gray-600">{post.description}</p>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}

package/src/HDS/components/Cards/Menu/index.js

@@ -0,0 +1,4 @@
+export {default as FlyoutA} from './flyoutA';
+export {default as FlyoutB} from './flyoutB';
+export {default as FlyoutC} from './flyoutC';
+export {default as FlyoutD} from './flyoutD';

package/src/HDS/components/Cards/Misc/iconCard.js

@@ -0,0 +1,254 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+import ReactMarkdown from "react-markdown";
+const cardVariant = {
+    "withButton": {
+        'cardStyle': 'p-10 ',
+        'iconWidthStyle': 'h-20 w-20',
+        'iconStyle': 'h-10 w-10',
+        'titleTextStyle': 'h4',
+        'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
+        'descTextStyle': 'body1c',
+        'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
+    },
+    "withoutButton": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'h5',
+        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
+        'descTextStyle': 'body1',
+        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
+    },
+    "sm": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'body1c-semi-bold',
+        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body1c-semi-bold tb:text-hds-t-body1c-semi-bold db:text-hds-d-body1c-semi-bold',
+        'descTextStyle': 'body3',
+        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
+    }
+}
+
+export default function IconCard(props) {
+    const iconBG = HDSColor(props.iconBg);
+    return (
+        <>
+            {
+                ((props.readMoreBtn && props.button) || (!props.readMoreBtn && !props.button) || (props.button && props.button.length > 1) || !props.linkHover) ? (
+                    <div
+                        className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow')}
+                    >
+                        <div className=" self-start">
+                            <div
+                                className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+                            >
+                                <Icon
+                                    height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                                    variant={props.iconVariant}
+                                    strokeColor={props.iconStroke}
+                                    strokeClass={HDSColor(props.iconStrokeClass)} />
+                            </div>
+                            <div
+                                className="flex-1">
+
+                                {props.cardType &&
+                                    (
+                                        <>
+                                            <Typography
+                                                textStyle={cardVariant[props.cardType]['titleTextStyle']}
+                                                className={cardVariant[props.cardType]['titleClasses']}
+                                            >
+                                                {props.title}
+                                            </Typography>
+
+                                            <Typography
+                                                textStyle={cardVariant[props.cardType]['descTextStyle']}
+                                                className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
+                                            >
+                                                <ReactMarkdown>
+                                                    {props.description}
+                                                </ReactMarkdown>
+                                            </Typography>
+                                        </>
+                                    )
+                                }
+                            </div>
+                        </div>
+                        {props.readMoreBtn && (
+                          <>
+                            {
+                              props.linkHover ? (
+                                <a href={props.readMoreBtn.cta_link} className='flex self-end'>
+                                    <div className="flex">
+                                        <HDSButton
+                                            label={props.readMoreBtn.cta_text}
+                                            type='secondaryLink'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow={true}
+                                            rightAnimatedArrowColor='#3970FD'
+                                            animatedHoverStroke='#3970FD'
+                                            btnTextColorClass='text-blue-500'
+                                            btnTextHoverClass=''
+                                            className=' mt-4'
+                                        />
+                                    </div>
+                                </a>
+                              ) : (
+                                <div className="flex self-end">
+                                    <HDSButton
+                                        label={props.readMoreBtn.cta_text}
+                                        type='secondaryLink'
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='sm'
+                                        rightAnimatedArrow={false}
+                                        rightAnimatedArrowColor='#3970FD'
+                                        animatedHoverStroke='#3970FD'
+                                        btnTextColorClass='text-neutral-800'
+                                        btnTextHoverClass=''
+                                        className=' mt-4 hover:cursor-default'
+                                    />
+                                </div>
+                              )
+                            }
+                          </>
+                        )
+                        }
+                        {props.button &&
+                            <div className="flex gap-2 ">
+                                {props.button.map((btn, index) => (
+                                    <a href={btn.cta_link} key={index} className="flex self-end mt-7">
+                                        <div className="flex">
+
+
+                                            <HDSButton
+                                                label={btn.cta_text}
+                                                type={btn.cta_type || 'secondary'}
+                                                leftIconVariant='none'
+                                                rightIconVariant='none'
+                                                state='default'
+                                                size='sm'
+                                                rightAnimatedArrow={true}
+                                                rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
+                                                btnBgColorClass={btn.btnBg}
+                                                btnTextHoverClass={btn.btnTextColorClass}
+                                                animatedHoverStroke={btn.animatedHoverStroke}
+                                                btnTextColorClass={btn.btnTextColorClass}
+                                            />
+                                        </div>
+                                    </a>))
+                                }
+                            </div>
+                        }
+                    </div>
+                ) :
+
+                    (
+                        <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
+                            className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button || props.linkHover) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
+                        >
+                            <div className=" self-start">
+                                <div
+                                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+                                >
+                                    <Icon
+                                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                                        variant={props.iconVariant}
+                                        strokeColor={props.iconStroke}
+                                        strokeClass={HDSColor(props.iconStrokeClass)} />
+                                </div>
+                                <div
+                                    className="flex-1">
+
+                                    {props.cardType &&
+                                        (
+                                            <>
+                                                <Typography
+                                                    textStyle={cardVariant[props.cardType]['titleTextStyle']}
+                                                    className={cardVariant[props.cardType]['titleClasses']}
+                                                >
+                                                    {props.title}
+                                                </Typography>
+
+                                                <Typography
+                                                    textStyle={cardVariant[props.cardType]['descTextStyle']}
+                                                    className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
+                                                >
+                                                    <ReactMarkdown>
+                                                        {props.description}
+                                                    </ReactMarkdown>
+                                                </Typography>
+
+                                            </>
+                                        )
+                                    }
+                                </div>
+                            </div>
+                            {props.readMoreBtn && (
+                                <div className="flex self-end">
+                                    <HDSButton
+                                        label={props.readMoreBtn.cta_text}
+                                        type='secondaryLink'
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='sm'
+                                        rightAnimatedArrow={true}
+                                        rightAnimatedArrowColor='#3970FD'
+                                        animatedHoverStroke='#3970FD'
+                                        btnTextColorClass='text-blue-500'
+                                        btnTextHoverClass=''
+                                        className=' mt-4'
+                                    />
+                                </div>
+                            )
+                            }
+                            {props.button &&
+                                <div className="flex pt-4 gap-2 self-end">
+                                    {props.button.map((btn, index) => (
+                                        <div className="flex">
+                                            <HDSButton
+                                                label={btn.cta_text}
+                                                type={btn.cta_type || 'secondary'}
+                                                leftIconVariant='none'
+                                                rightIconVariant='none'
+                                                state='default'
+                                                size='sm'
+                                                rightAnimatedArrow={true}
+                                                rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
+                                                btnBgColorClass={btn.btnBg}
+                                                btnTextHoverClass={btn.btnTextColorClass}
+                                                animatedHoverStroke={btn.animatedHoverStroke}
+                                                btnTextColorClass={btn.btnTextColorClass}
+                                            />
+                                        </div>
+                                    ))
+                                    }
+                                </div>
+                            }
+                        </a>
+                    )
+
+            }
+        </>
+    )
+}
+
+IconCard.defaultProps = {
+    cardType: 'withoutButton',
+    iconStrokeClass: 'stroke-neutral-1000',
+    linkHover:'true'
+}
+Icon.propTypes = {
+    cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
+}

package/src/HDS/components/Cards/Misc/iconCardButton.js

@@ -0,0 +1,116 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+import ReactMarkdown from "react-markdown";
+
+const cardVariant = {
+    "withButton": {
+        'cardStyle': 'p-10 ',
+        'iconWidthStyle': 'h-20 w-20',
+        'iconStyle': 'h-10 w-10',
+        'titleTextStyle': 'h4',
+        'titleClasses': 'mb-1 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
+        'descTextStyle': 'body1c',
+        'descClasses': 'text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
+    },
+    "withoutButton": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'h5',
+        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
+        'descTextStyle': 'body1',
+        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
+    },
+    "sm": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'body3c',
+        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
+        'descTextStyle': 'body3',
+        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
+    }
+}
+
+export default function IconCardButton(props) {
+  const iconBG = props.iconBg ? HDSColor(props.iconBg) : '';
+  const titleClass = props.titleColorClass ? HDSColor(props.titleColorClass) : 'text-neutral-1000';
+  const descClass = props.descColorClass ? HDSColor(props.descColorClass) : 'text-neutral-800';
+    return (
+        <>
+          <div>
+            {
+              props.imgUrl ? (
+                <div className={`${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex items-center justify-center rounded-full mb-6`}>
+                  <img className="w-full" src={props.imgUrl} alt={props.title} />
+                </div>
+              ) : (
+                <div
+                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+                >
+                    <Icon
+                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                        variant={props.iconVariant}
+                        strokeColor={props.iconStroke}
+                        strokeClass={HDSColor(props.iconStrokeClass)} />
+                </div>
+              )
+            }
+            {props.cardType &&
+                (
+                    <>
+                        <Typography
+                            textStyle={cardVariant[props.cardType]['titleTextStyle']}
+                            className={`${cardVariant[props.cardType]['titleClasses']} ${titleClass}`}
+                        >
+                            {props.title}
+                        </Typography>
+
+                        <Typography
+                            textStyle={cardVariant[props.cardType]['descTextStyle']}
+                            className={`${cardVariant[props.cardType]['descClasses']} ${descClass} [&>p]:${descClass} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
+                        >
+                            <ReactMarkdown>
+                                {props.description}
+                            </ReactMarkdown>
+                        </Typography>
+                    </>
+                )
+            }
+          </div>
+          {
+            props.button && (
+              <div className="inline-flex pt-6">
+                  <HDSButton
+                      label={props.button.cta_text}
+                      type={props.button.cta_type || 'secondary'}
+                      leftIconVariant='none'
+                      rightIconVariant='none'
+                      state='default'
+                      size='sm'
+                      rightAnimatedArrow={true}
+                      rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+                      btnBgColorClass={props.button.btnBg}
+                      btnTextHoverClass={props.button.btnTextColorClass}
+                      animatedHoverStroke={props.button.animatedHoverStroke}
+                      btnTextColorClass={props.button.btnTextColorClass}
+                  />
+              </div>
+            )
+          }
+        </>
+    )
+}
+
+IconCardButton.defaultProps = {
+    cardType: 'withoutButton',
+    iconStrokeClass: 'stroke-neutral-1000',
+    iconVariant: 'cube01'
+}
+IconCardButton.propTypes = {
+    cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
+}

package/src/HDS/components/Cards/Misc/imageBadgeCard.js

@@ -0,0 +1,33 @@
+import React from "react"
+import { HDSColor } from "../../../foundation/ColorPalette"
+import { Typography } from "../../../foundation/Typography"
+import { Badges } from "../../BadgesCaption"
+export default function ImageBadgeCard(card) {
+
+    return (
+        <>
+            <div>
+                <a href={card.sliderLink}>
+                    <div className={`${HDSColor(card.cardBg)}bg-neutral-0 shadow hover:transition-all hover:ease-in-out hover:duration-300 hover:border-opacity-0 min-h-[443px]  min-w-[312px] tb:max-w-[763px] tb:min-h-[245px] rounded-3xl tb:p-8 p-4`}>
+
+                        <div className='flex flex-col-reverse tb:flex-row  justify-between gap-4 items-center'>
+                            <div className='tb:max-w-[393px] mt-8 tb:mt-0'>
+                                <Badges
+                                    color={card.badge.color}
+                                    children={card.badge.label}
+                                    text_color='text-neutral-0'
+                                />
+                                <Typography textStyle='h4' className='mt-2 text-neutral-1000 max-w-[326px]'>{card.title}</Typography>
+                                <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
+                            </div>
+                            <div className="flex justify-center h-full items-center">
+                                <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] rounded-lg flex items-center justify-center tb:max-h-[181px]' />
+
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </>
+    )
+}