@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
132 lines (131 loc) • 4.56 kB
TypeScript
import React, { HTMLAttributes } from "react";
import { LinkAnchorProps } from "../util/link-anchor";
interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
/**
* @default true
*/
arrow?: boolean;
/**
* Adjusts arrow position.
* @default "baseline"
*/
arrowPosition?: "baseline" | "center";
/**
* Changes padding and typo sizes.
* @default "medium"
*/
size?: "small" | "medium";
}
interface LinkCardComponent extends React.ForwardRefExoticComponent<LinkCardProps & React.RefAttributes<HTMLDivElement>> {
/**
* @see 🏷️ {@link LinkCardTitleProps}
*/
Title: typeof LinkCardTitle;
/**
* @see 🏷️ {@link LinkCardAnchorProps}
*/
Anchor: typeof LinkCardAnchor;
/**
* @see 🏷️ {@link LinkCardDescriptionProps}
*/
Description: typeof LinkCardDescription;
/**
* @see 🏷️ {@link LinkCardFooterProps}
*/
Footer: typeof LinkCardFooter;
/**
* @see 🏷️ {@link LinkCardIconProps}
*/
Icon: typeof LinkCardIcon;
/**
* @see 🏷️ {@link LinkCardImageProps}
*/
Image: typeof LinkCardImage;
}
/**
* Accessible clickable card as a link.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkcard)
* @see 🏷️ {@link LinkCardProps}
*
*
* @example
* ```tsx
* <LinkCard>
* <LinkCard.Icon>
* <IconOrPictogram />
* </LinkCard.Icon>
* <LinkCard.Title>
* <LinkCard.Anchor href="/href">
* LinkCard title
* </LinkCard.Anchor>
* </LinkCard.Title>
* <LinkCard.Description>
* This is a description of the link card.
* </LinkCard.Description>
* <LinkCard.Footer>Footer content</LinkCard.Footer>
* </LinkCard>
* ```
*/
export declare const LinkCard: LinkCardComponent;
type LinkCardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
children: React.ReactNode;
/**
* Heading tag. Use "span" if you want a non header defining card
* (eg. you have a lot of them all at once, such as in a grid)
* @default "span"
*/
as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
};
/**
* @see 🏷️ {@link LinkCardTitleProps}
*/
export declare const LinkCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
children: React.ReactNode;
/**
* Heading tag. Use "span" if you want a non header defining card
* (eg. you have a lot of them all at once, such as in a grid)
* @default "span"
*/
as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
} & React.RefAttributes<HTMLHeadingElement>>;
type LinkCardAnchorProps = LinkAnchorProps;
/**
* @see 🏷️ {@link LinkCardAnchorProps}
*/
export declare const LinkCardAnchor: React.ForwardRefExoticComponent<LinkAnchorProps & React.RefAttributes<HTMLAnchorElement>>;
interface LinkCardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
/**
* @see 🏷️ {@link LinkCardDescriptionProps}
*/
export declare const LinkCardDescription: React.ForwardRefExoticComponent<LinkCardDescriptionProps & React.RefAttributes<HTMLDivElement>>;
interface LinkCardFooterProps extends HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
/**
* @see 🏷️ {@link LinkCardFooterProps}
*/
export declare const LinkCardFooter: React.ForwardRefExoticComponent<LinkCardFooterProps & React.RefAttributes<HTMLDivElement>>;
interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
/**
* @see 🏷️ {@link LinkCardIconProps}
*/
export declare const LinkCardIcon: React.ForwardRefExoticComponent<LinkCardIconProps & React.RefAttributes<HTMLDivElement>>;
type ImageAspectRatio = "1/1" | "16/9" | "16/10" | "4/3" | (string & {});
interface LinkCardImageProps extends HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
/**
* The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.
* This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
*/
aspectRatio?: ImageAspectRatio;
}
/**
* @see 🏷️ {@link LinkCardImageProps}
*/
export declare const LinkCardImage: React.ForwardRefExoticComponent<LinkCardImageProps & React.RefAttributes<HTMLDivElement>>;
export type { LinkCardAnchorProps, LinkCardDescriptionProps, LinkCardFooterProps, LinkCardIconProps, LinkCardImageProps, LinkCardProps, LinkCardTitleProps, };