Placeholder

A placeholder component is like a digital sketchpad, providing a temporary space for users to fill in with their own content. It's a handy tool that helps users understand what kind of information is expected, without feeling overwhelmed by a blank page. With a placeholder component, you can easily guide users through your website, without having to worry about getting lost in the digital wilderness.

About

Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

Example

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.

<div class="placeholder" aria-hidden="true">
    <span class="el"></span>
    <span class="el"></span>
    <span class="el"></span>
    <span class="el"></span>
    <span class="el"></span>
</div>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$placeholder: functions.get-theme(app.$theme, 'components.placeholder');

@include mixins.generate-component(
    $placeholder,
    "placeholder",
    app.$config,
    app.$theme
);

Width

You can change the width through grid column classes, width utilities, or inline styles.

<div class="placeholder" aria-hidden="true">
    <span class="el"></span>
    <span class="el"></span>
    <span class="el" style="width: 25%;"></span>
</div>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$placeholder: functions.get-theme(app.$theme, 'components.placeholder');

@include mixins.generate-component(
    $placeholder,
    "placeholder",
    app.$config,
    app.$theme
);

Animation

Animate placeholders with .glow or .wave to better convey the perception of something being actively loaded.

<p class="placeholder glow">
    <span class="el"></span>
    <span class="el"></span>
    <span class="el"></span>
</p>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$placeholder: functions.get-theme(app.$theme, 'components.placeholder');

@include mixins.generate-component(
    $placeholder,
    "placeholder",
    app.$config,
    app.$theme
);

<p class="placeholder wave">
    <span class="el"></span>
    <span class="el"></span>
    <span class="el"></span>
</p>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$placeholder: functions.get-theme(app.$theme, 'components.placeholder');

@include mixins.generate-component(
    $placeholder,
    "placeholder",
    app.$config,
    app.$theme
);

Sass