Empty State
Mixins
root-container
@mixin root-container() { ... }@mixin root-container() { /* stylelint-disable-next-line property-no-unknown */ container: kib-empty-state / inline-size; max-width: settings.$container-width; margin: auto; text-align: center; }
content-grid
@mixin content-grid() { ... }@mixin content-grid() { display: flex; gap: settings.$content-gap; flex-direction: column; align-items: center; /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-lg}) { @include content-grid-lg; } }
Description
Main content grid
Parameters
None.
Requires
- [mixin] 
content-grid-lg - [variable] 
content-gap - [variable] 
breakpoint-lg 
media
@mixin media() { ... }@mixin media() { width: 100%; max-width: settings.$media-size-sm; > img, > svg, > video, > canvas, > iframe, > figure, > picture { max-width: inherit; } /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-md}) { @include media-md; } /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-lg}) { @include media-lg; } }
Description
Media container
Parameters
None.
Requires
- [mixin] 
media-md - [mixin] 
media-lg - [variable] 
media-size-sm - [variable] 
breakpoint-md - [variable] 
breakpoint-lg 
content
@mixin content() { ... }@mixin content() { flex-grow: 1; display: flex; flex-direction: column; gap: spacing.get('s4'); max-width: settings.$container-width-no-media; margin: 0 auto; }
heading
@mixin heading() { ... }@mixin heading() { @include typography.style-as('display-6'); color: color.get('text', 'primary'); margin: 0; /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-md}) { @include heading-md; } /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-lg}) { @include heading-lg; } }
Description
Main heading
Parameters
None.
Requires
- [mixin] 
heading-md - [mixin] 
heading-lg - [function] 
get - [variable] 
breakpoint-md - [variable] 
breakpoint-lg 
messaging
@mixin messaging() { ... }@mixin messaging() { @include typography.style-as('paragraph-2'); color: color.get('text', 'secondary'); :last-child { margin-bottom: 0; } }
media-md
@mixin media-md() { ... }@mixin media-md() { max-width: settings.$media-size-md; }
Description
Media container medium sized
Parameters
None.
Requires
- [variable] 
media-size-md 
Used by
- [mixin] 
media 
media-lg
@mixin media-lg() { ... }@mixin media-lg() { max-width: settings.$media-size-lg; }
Description
Media container large sized
Parameters
None.
Requires
- [variable] 
media-size-lg 
Used by
- [mixin] 
media 
heading-md
@mixin heading-md() { ... }@mixin heading-md() { @include typography.style-as('display-4'); }
heading-lg
@mixin heading-lg() { ... }@mixin heading-lg() { @include typography.style-as('display-3'); margin: spacing.get('s6', 0, 0); }
content-grid-lg
@mixin content-grid-lg() { ... }@mixin content-grid-lg() { flex-direction: row; align-items: flex-start; justify-content: center; text-align: left; }
Variables
container-width
$container-width: unit.rem(688px);container-width-no-media
$container-width-no-media: unit.rem(454px);media-size-sm
$media-size-sm: unit.rem(200px);media-size-md
$media-size-md: unit.rem(250px);media-size-lg
$media-size-lg: unit.rem(270px);content-gap
$content-gap: spacing.get('s6');breakpoint-md
$breakpoint-md: unit.rem(384px);