Article Profile
Mixins
root
@mixin root() { ... }
@mixin root() { padding: spacing.get('s3'); border-bottom-left-radius: border.get('br02'); border-bottom-right-radius: border.get('br02'); gap: spacing.get('s2'); display: flex; flex-direction: column; }
title
@mixin title() { ... }
@mixin title() { @include typography.style-as('product-text-1', 'strong'); order: 2; margin: 0; }
Description
title styles
Parameters
None.
eyebrow
@mixin eyebrow() { ... }
@mixin eyebrow() { @include typography.style-as('utility-1', 'strong'); color: color.get('text', 'primary'); order: 1; }
author
@mixin author() { ... }
@mixin author() { @include typography.style-as('utility-1'); display: flex; align-items: center; flex-direction: row; gap: spacing.get('s1'); order: 3; }
author-image
@mixin author-image() { ... }
@mixin author-image() { width: unit.rem(20px); height: unit.rem(20px); border-radius: unit.rem(100px); border: unit.rem(0.5px) solid color.get('ui-bg', '02'); }
link
@mixin link() { ... }
@mixin link() { text-decoration: none; color: color.get('text', 'primary'); order: 2; &::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } &:focus { outline: none; } &:hover { text-decoration: none; color: currentColor; } &:visited { color: currentColor; } }
transparent-landscape
@mixin transparent-landscape() { ... }
@mixin transparent-landscape() { padding: 0 spacing.get('s2'); }
landscape
@mixin landscape() { ... }
@mixin landscape() { padding: spacing.get('s2'); }
transparent
@mixin transparent() { ... }
@mixin transparent() { padding: spacing.get('s2'), 0; margin-top: spacing.get('s3'); }