Add new card

A dashed tile with a plus that turns on hover. The whole script is defineElement().

Take it with you

This demo also exists as a standalone project — npm install && npm run dev, no changes needed.

npx giget@latest gh:lordicondev/ui-components/add-new-card#standalone add-new-card

Copies the add-new-card folder of the standalone branch — where every demo lives on its own — into ./add-new-card.

How it works

Define the element, put the icon in the markup, set the control's state. Then the parts that make this demo different.

Define the element The whole script.

import { defineElement } from '@lordicon/element';

// Registers <lord-icon> with its built-in triggers. This is the whole script.
defineElement();

import { defineElement } from '@lordicon/element';

// Registers <lord-icon> with its built-in triggers. This is the whole script.
defineElement();

The tile target points the icon at the tile, so the whole tile is the hover area.

html

<!-- target points the icon at the tile, so the plus turns when the pointer
     reaches any part of it. hover is a built-in trigger. -->
<button class="tile" type="button">
    <span class="tile__puck">
        <lord-icon
            class="tile__mark"
            current-color
            src="icons/plus.json"
            loading="interaction"
            trigger="hover"
            target=".tile"
            state="hover-rotation"
            aria-hidden="true"
        >
            <img alt="" src="icons/plus.svg" />
        </lord-icon>
    </span>

    <span class="tile__label">Add new card</span>
</button>

Resting and hovered Five custom properties set twice. The icon colour is one of them.

css

/* Five custom properties, at rest and hovered. Everything below reads from them, the icon
   included. No transition. */
.tile {
    --tile-line: var(--border);
    --tile-fill: transparent;
    --tile-puck: var(--surface-sunken);
    --tile-mark: var(--ink);
    --icon-filter: var(--filter-ink);
    --tile-label: var(--ink-muted);
}

.tile:hover {
    --tile-line: var(--accent);
    --tile-fill: var(--accent-surface);
    --tile-puck: var(--accent-border);
    --tile-mark: var(--accent-ink);
    --tile-label: var(--ink);
}

Every file

The demo's own files, whole, at the paths the export uses.

add-new-card.css 59 lines

css

@import '@shared/styles/index.css';

.demo {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--space-64) var(--gutter);
}

/* Five custom properties, at rest and hovered. Everything below reads from them, the icon
   included. No transition. */
.tile {
    --tile-line: var(--border);
    --tile-fill: transparent;
    --tile-puck: var(--surface-sunken);
    --tile-mark: var(--ink);
    --icon-filter: var(--filter-ink);
    --tile-label: var(--ink-muted);
}

.tile:hover {
    --tile-line: var(--accent);
    --tile-fill: var(--accent-surface);
    --tile-puck: var(--accent-border);
    --tile-mark: var(--accent-ink);
    --tile-label: var(--ink);
}

/* Dashed: the card is not there yet. */
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    width: 200px;
    padding: var(--space-24);
    border: 1px dashed var(--tile-line);
    border-radius: var(--radius-md);
    background: var(--tile-fill);
    cursor: pointer;
}

.tile__puck {
    display: flex;
    padding: var(--space-8);
    border-radius: var(--radius-pill);
    background: var(--tile-puck);
}

.tile__mark {
    width: var(--icon-size-24);
    height: var(--icon-size-24);
    color: var(--tile-mark);
}

.tile__label {
    color: var(--tile-label);
    font-weight: 500;
}

index.html 34 lines

html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Add new card</title>
        <link rel="stylesheet" href="./add-new-card.css" />
        <script type="module" src="./main.ts"></script>
    </head>
    <body>
        <main class="demo">
            <!-- target points the icon at the tile, so the plus turns when the pointer
                 reaches any part of it. hover is a built-in trigger. -->
            <button class="tile" type="button">
                <span class="tile__puck">
                    <lord-icon
                        class="tile__mark"
                        current-color
                        src="icons/plus.json"
                        loading="interaction"
                        trigger="hover"
                        target=".tile"
                        state="hover-rotation"
                        aria-hidden="true"
                    >
                        <img alt="" src="icons/plus.svg" />
                    </lord-icon>
                </span>

                <span class="tile__label">Add new card</span>
            </button>
        </main>
    </body>
</html>

main.ts 4 lines

import { defineElement } from '@lordicon/element';

// Registers <lord-icon> with its built-in triggers. This is the whole script.
defineElement();

import { defineElement } from '@lordicon/element';

// Registers <lord-icon> with its built-in triggers. This is the whole script.
defineElement();

What it imports 4 shared files

shared/styles/base.css 115 lines

css

/*
 * Fonts, reset and default typography. Nothing control-specific: every demo styles its
 * own control. Only the UI face is here; the mono face is the portal's.
 */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
        U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

/* Arial with Figtree's measurements, for the moment before Figtree arrives, so the text does
   not move when it does. Measured on Figtree at 400 and 500. */
@font-face {
    font-family: 'Figtree fallback';
    src: local('Arial'), local('Liberation Sans');
    size-adjust: 100.3%;
    ascent-override: 94.7%;
    descent-override: 24.9%;
    line-gap-override: 0%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* An author `display` on a component would beat the UA rule for [hidden], and then
   `el.hidden = true` would stop working. Settled once here. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    --icon-filter: var(--filter-ink);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* A second click on a button would otherwise select its label. */
button {
    -webkit-user-select: none;
    user-select: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/*
 * In the accessibility tree but not on screen: labels and legends that the visual design
 * has no room for. Clipped rather than `display: none`, which would remove it from the
 * tree too, and it also hides live radio inputs that must stay reachable by keyboard.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Until the script defines <lord-icon> it is an unknown inline element with no size. These
 * rules give it the box it will have, so nothing moves when it is defined.
 */
lord-icon {
    display: inline-block;
    width: var(--icon-size-32);
    height: var(--icon-size-32);
}

/* A placeholder inside the icon fills it until the icon is ready. */
lord-icon:not(:defined) > img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Placeholders are black. Set --icon-filter wherever an icon's colour is set. */
lord-icon > img {
    filter: var(--icon-filter);
}

shared/styles/index.css 4 lines

css

/* The one stylesheet a demo imports. */
@import './palette.css';
@import './tokens.css';
@import './base.css';

shared/styles/palette.css 87 lines

css

/*
 * Generated from the Figma token export.
 * Raw values only — roles live in tokens.css. Edit the Figma variables, not this file.
 */
:root {
    /* color/ink */
    --gray-0: #FFFFFF;
    --gray-50: #F7F8FA;
    --gray-100: #EEF0F3;
    --gray-200: #DEE1E6;
    --gray-300: #C3C7D0;
    --gray-400: #9BA1AD;
    --gray-500: #767C89;
    --gray-600: #565C68;
    --gray-700: #3D414B;
    --gray-800: #282B33;
    --gray-900: #16181D;
    --gray-950: #0A0B0E;

    /* color/signal */
    --brand-100: #FFEEE9;
    --brand-200: #FFD7CA;
    --brand-300: #FFB199;
    --brand-400: #FF7D5C;
    --brand-500: #FF5A36;
    --brand-600: #E8431F;
    --brand-700: #C2340F;

    /* color/success */
    --green-100: #EDF9F1;
    --green-300: #A7D9BC;
    --green-700: #15803D;

    /* color/error */
    --red-100: #FDECEC;
    --red-300: #F5B5B5;
    --red-700: #DC2626;

    /* typography/font */
    --font-ui-name: 'Figtree';
    --font-mono-name: 'JetBrains Mono';

    /* typography/size */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 40px;

    /* typography/lineHeight */
    --leading-xs: 16px;
    --leading-sm: 20px;
    --leading-base: 24px;
    --leading-lg: 28px;
    --leading-xl: 32px;
    --leading-2xl: 40px;
    --leading-3xl: 48px;

    /* spacing (named after the value, the Figma scale is non-linear) */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;

    /* size/icon */
    --icon-size-16: 16px;
    --icon-size-20: 20px;
    --icon-size-24: 24px;
    --icon-size-32: 32px;
    --icon-size-40: 40px;
    --icon-size-48: 48px;
    --icon-size-64: 64px;
    --icon-size-96: 96px;

    /* radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;
}

shared/styles/tokens.css 93 lines

css

/*
 * Design tokens by role. Raw values come from palette.css (generated); which grey is a
 * border and which is muted text is decided here, and so would a dark mode be.
 */
:root {
    /* Text. `--ink*` is always a colour; `--text-*` is always a size. */
    --ink: var(--gray-950);
    /* Text that reads as done or in progress, a step lighter than a heading. */
    --ink-strong: var(--gray-800);
    /* Body copy: a step down from --ink. */
    --ink-soft: var(--gray-600);
    --ink-muted: var(--gray-500);
    --ink-subtle: var(--gray-400);
    /* What has not started yet. */
    --ink-faint: var(--gray-300);
    --ink-inverse: var(--gray-0);

    /* Backgrounds */
    --surface: var(--gray-0);
    --surface-muted: var(--gray-50);
    /* A well inside a surface: the filled shape a single icon sits in. */
    --surface-sunken: var(--gray-100);

    /* Outlines */
    --border: var(--gray-200);
    /* The edge of a box that already has a fill, such as an input. */
    --border-soft: var(--gray-100);
    --border-strong: var(--gray-300);
    --border-accent: var(--brand-400);

    /* Brand accent */
    --accent: var(--brand-500);
    --accent-strong: var(--brand-600);
    --accent-surface: var(--brand-100);
    /* The outline of a tinted box, or a small shape on one. */
    --accent-border: var(--brand-300);
    /* Text or a mark on either of the above. */
    --accent-ink: var(--brand-700);

    /* Status. Warning rides the brand ramp — that is what the designs use. */
    --success: var(--green-700);
    --success-surface: var(--green-100);
    --success-border: var(--green-300);

    --warning: var(--brand-500);
    --warning-surface: var(--brand-100);
    --warning-border: var(--brand-300);

    --danger: var(--red-700);
    --danger-surface: var(--red-100);
    --danger-border: var(--red-300);

    /* Icons. Fed straight into --lord-icon-* by the demos. */
    --icon-color: var(--gray-950);
    --icon-accent: var(--brand-500);

    /* Icon placeholders are black SVGs. Each filter turns black into the colour of the same
       name. Made with a CSS filter generator: make a new one when its colour changes. */
    --filter-ink: invert(2%) sepia(4%) saturate(4817%) hue-rotate(193deg) brightness(114%)
        contrast(96%);
    --filter-ink-soft: invert(33%) sepia(18%) saturate(323%) hue-rotate(182deg) brightness(100%)
        contrast(90%);
    --filter-ink-muted: invert(55%) sepia(23%) saturate(191%) hue-rotate(181deg) brightness(84%)
        contrast(89%);
    --filter-ink-subtle: invert(70%) sepia(11%) saturate(284%) hue-rotate(181deg) brightness(91%)
        contrast(86%);
    --filter-ink-faint: invert(76%) sepia(17%) saturate(99%) hue-rotate(184deg) brightness(99%)
        contrast(100%);
    --filter-ink-inverse: invert(100%);
    --filter-accent: invert(49%) sepia(65%) saturate(3508%) hue-rotate(337deg) brightness(106%)
        contrast(113%);
    --filter-accent-strong: invert(29%) sepia(85%) saturate(1790%) hue-rotate(350deg)
        brightness(94%) contrast(93%);
    --filter-success: invert(38%) sepia(22%) saturate(2045%) hue-rotate(94deg) brightness(92%)
        contrast(84%);
    --filter-warning: var(--filter-accent);
    --filter-danger: invert(48%) sepia(74%) saturate(7139%) hue-rotate(343deg) brightness(84%)
        contrast(105%);

    /* Type stacks. The families themselves are in palette.css. */
    --font-ui:
        var(--font-ui-name), 'Figtree fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, sans-serif;
    --font-mono: var(--font-mono-name), ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Side padding of a page. The portal uses the same value, so demo and text line up. */
    --gutter: clamp(var(--space-16), 5vw, var(--space-48));

    /* A card's halo: no offset, so it reads as lift rather than as a light source. */
    --shadow-sm: 0 0 7.5px color-mix(in srgb, var(--gray-400) 20%, transparent);
    /* The same halo under a brand-coloured element. */
    --shadow-accent: 0 0 7.5px color-mix(in srgb, var(--accent-strong) 40%, transparent);
}

Icons

Hover a preview to play it. The icons are under the Lordicon License Terms, not the MIT licence of the code.

Preview	Used as	Lordicon icon
	`plus`	system-outline-48-plus