Profile Card
Installation
yarn add @chewy/kib-profile-stylesImport
@use '~@chewy/kib-profile-styles/src/kib-profile-card/styles' as kib-profile-card;Mixins
icon
@mixin icon() { ... }@mixin icon() { width: unit.rem(24px); height: unit.rem(24px); }
disabled
@mixin disabled() { ... }@mixin disabled() { opacity: 0.5; pointer-events: none; }
Description
disabled styles
Parameters
None.
button
@mixin button() { ... }@mixin button() { @include card.card; position: absolute; inset: 0; box-sizing: border-box; border-width: var(--kib-profile-ingress-border-width); border-style: solid; border-radius: border.get('br02'); border-color: var(--kib-profile-ingress-border-color); outline: 0; background: none; cursor: pointer; &:hover { box-shadow: none; } @media (hover: hover) and (pointer: fine) { &:hover { --kib-profile-ingress-border-color: #{color.get( 'ct', 'ingress-card', 'container', 'hover', 'border-color' )}; } } &:focus-visible { --kib-profile-ingress-border-width: #{border.get( 'ct', 'ingress-card', 'border-width', 'focused' )}; --kib-profile-ingress-border-color: #{color.get( 'ct', 'ingress-card', 'container', 'focus', 'border-color' )}; outline: 0; } &:active { --kib-profile-ingress-border-width: #{border.get( 'ct', 'ingress-card', 'border-width', 'standard' )}; --kib-profile-ingress-border-color: #{color.get( 'ct', 'ingress-card', 'container', 'pressed', 'border-color' )}; box-shadow: none; } }
Description
overlay button styles Uses the same CT ingress-card border tokens as kib-ingress-card (gray outline; not CTA blue).
Parameters
None.
Requires
- [function]
get
card
@mixin card() { ... }@mixin card() { container: kib-profile-card / inline-size; }
Description
profile card styles
Parameters
None.
card-heading
@mixin card-heading() { ... }@mixin card-heading() { display: flex; justify-content: space-between; align-items: center; margin: var(--kib-profile-card-heading-spacing, #{spacing.get('s3')}); margin-bottom: 0; }
card-heading-airy
@mixin card-heading-airy() { ... }@mixin card-heading-airy() { --kib-profile-card-heading-spacing: #{spacing.get('s4')}; margin-bottom: 0; // does not use customer properites @container kib-profile-card (max-width: #{settings.$card-condensed-max-width}) { --kib-profile-card-heading-spacing: #{spacing.get('s3')}; margin-bottom: 0; } }
Description
heading airy styles
Parameters
None.
Requires
- [function]
get - [variable]
card-condensed-max-width
card-content
@mixin card-content() { ... }@mixin card-content() { margin: var(--kib-profile-card-content-spacing, #{spacing.get('s3')}); }
card-content-airy
@mixin card-content-airy() { ... }@mixin card-content-airy() { --kib-profile-card-content-spacing: #{spacing.get('s4')}; @container (max-width: #{settings.$card-condensed-max-width}) { --kib-profile-card-content-spacing: #{spacing.get('s3')}; } }
Description
content airy styles
Parameters
None.
Requires
- [function]
get - [variable]
card-condensed-max-width