id? | string | — | Used for the id for the card and internally as
a prefix for the brand part, children part and the status part. |
accessibleLabel? | string | false | — | Used to override the default accessible label or to deactivate it
`undefined` (default) = The card will use `aria-labelledby` and use
the `id` prop to point to the brand, children and status part.
NOTE! `id` must be set!
`false` = Deactivate the label, every part of the card is no available
for screen readers
`string` = Maps to `aria-label` to top element of the card. You must
provide the complete representation of the card.
IMPORTANT: Strive to represent the visual contents of the card in the same
order they appear visually. |
brand | LogoBrandKey | — | Select the brand logo to use.
Usage:
```ts
import { LogoBrandMap } from '@ntds/logo';
//...
<WagerCard
brand={LogoBrandMap.Lotto}
// ...
/>
``` |
subtitle? | ReactNode | — | Supplementary (to the logo) title, typically used to denote the day
of the week for the game. For example "Joker Lørag." |
status? | ReactNode | (() => ReactNode) | — | Status for the wager. For example price, prize and "klar til sjekk." If text
is provided. The card will dictate the formatting and placement. |
statusIsInteractive? | boolean | false | If set to true the status will not be
hidden from assistive technologies
Use this if you need to use button
or input elements in the status part.
This prevent touch VoiceOver to select
text that should already be read out
based on the ``accessibleLabel.
Remember: The`accessibleLabel` should provide
all the info of the card! |
noFadeOutDescription? | boolean | — | Don't fade out overflowing description (in `children)
Useful for when you use custom status/decorator that
doesn't have a white background. |
flat? | boolean | — | By setting this prop true, the card will deactivate
the default hover-effects and and shadows.
The hover-effect is activated default for convenience
since 90%+ of the usage is with an button or an anchor. |
hoverAffordance? | boolean | — | Whether or not to show hover-effect.
Has no effect when flat is set to true. |
render? | (props) => ReactNode | — | Render-method for choosing witch tag to render
EXAMPLE:
```tsx
<Card
render={() => <a href='' {...props} />}
>
Content can be passed as normal child
</Card>
```
Note that `{...props}` will include `children`
OTHER EXAMPLES:
```tsx
<Card
render={() => <p {...props} />}
>
Content can be passed as normal child
</Card>
``` |
decorator? | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | ((card: ReactNode) => Element) | — | Decorate/wrap the card inside a given container.
Makes it easier to selectively wrap the card
inside another for showing statuses or make
the card expandable.
Typically used with the `CardDecorator` (imported
from directly from `@ntds/card`)
```tsx
<Card
decorator={
someCondition && (
<CardDecorator type='warning'>
Some stuff, no?
</CardDecorator>
)
}
>
This is the content of the card.
</Card>
``` |
tw? | TwGroupKeys | — | Tailwind overrides |
children? | ReactNode | — | Can be any valid react node. The card does not apply any style to its contents. |