Article Card
Mixins
root
@mixin root() { ... }@mixin root() { border-radius: border.get('br02f'); overflow: hidden; background-color: var(--kib-article-card-variant-background, #{color.get('ui-bg', 'primary')}); color: color.get('text', 'primary'); position: relative; &--transparent { &:hover, &:focus-within { @include elevation.elevation('none'); } } // Show focus ring only when a child element receives keyboard focus &:focus-within:has(:focus-visible) { border: unit.rem(2px) solid color.get('action', 'cta', 'primary', 'primary'); border-radius: border.get('br02f'); text-decoration: none; @include elevation.elevation('medium'); .kib-article-profile { &__title { text-decoration: underline; } } } // Remove tap highlight on mobile devices -webkit-tap-highlight-color: transparent; // Animation for pressed state (no hover scaling for Article Card) @include animation.apply('press', 'scale', 'subtle'); // Override hover scaling for Article Card @media (hover: hover) and (pointer: fine) { &:hover:not(:active) { transform: none; } } // Modern browsers: Only apply hover when card has links @supports (selector(:has(*))) { &:has(a):hover { cursor: pointer; text-decoration: none; @include elevation.elevation('medium'); .kib-article-profile { &__title { text-decoration: underline; } } } &:has(a):hover { text-decoration: none; @include elevation.elevation('medium'); } &--transparent { &:has(a):hover, &:has(a):focus-within { @include elevation.elevation('none'); } } } }
size
@mixin size($type) { ... }@mixin size($type) { @if $type == 'standard' { min-width: unit.rem(200px); max-width: unit.rem(400px); } @else if $type == 'landscape' { min-width: unit.rem(320px); max-width: unit.rem(400px); } @else if $type == 'landscape-condensed' { min-width: unit.rem(230px); max-width: unit.rem(350px); } }
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$type | Sets the size of the card based on the layout. | String | — none |
Requires
- [function]
rem
variant
@mixin variant($variant) { ... }@mixin variant($variant) { @if $variant == 'primary' { --kib-article-card-variant-background: #{color.get('ui-bg', '03')}; } @else if $variant == 'tint' { --kib-article-card-variant-background: #{color.get('ui-bg', '16')}; } @else if $variant == 'transparent' { --kib-article-card-variant-background: transparent; border-radius: 0; } }
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$variant | Sets the variant (color) of the card. | String | — none |
Requires
- [function]
get
landscape-layout
@mixin landscape-layout() { ... }@mixin landscape-layout() { display: flex; flex-direction: row-reverse; justify-content: space-between; padding: spacing.get('s2'); }
landscape-transparent
@mixin landscape-transparent() { ... }@mixin landscape-transparent() { flex-direction: row; justify-content: flex-start; }
Description
mixin for the landscape transparent layout
Parameters
None.