From 401b2d82c3bab8ee45870fc8cbb32fce9a50fb8a Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 08:43:24 -0600 Subject: [PATCH 01/52] Cover Frame - Add new color state for cover-frame header --- packages/ui/src/8-grids/_cover-frame.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/ui/src/8-grids/_cover-frame.scss b/packages/ui/src/8-grids/_cover-frame.scss index 86fc712009..a4ee9f405e 100644 --- a/packages/ui/src/8-grids/_cover-frame.scss +++ b/packages/ui/src/8-grids/_cover-frame.scss @@ -1,12 +1,21 @@ @use '../abstract/index' as *; .cover-frame { + --p-cover-frame-bg-header: var(--transparent); + display:flex; flex-direction:column; block-size:100vh; block-size:100lvh; &-header { padding-inline:pxToRem(32); padding-block:pxToRem(20); border-block-end:solid pxToRem(1) hsl(var(--color-border)); + background-color: hsl(var(--p-cover-frame-bg-header)); } &-content { flex:1; padding:pxToRem(32); overflow:hidden; } + + /* state */ + &.is-color-header { + --p-cover-frame-bg-header:var(--color-neutral-0); + #{$theme-dark} & { --p-cover-frame-bg-header:var(--color-neutral-500); } + } } \ No newline at end of file From fb74e5568f2dcaf534a19663dbefb5526eca1281 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 08:59:37 -0600 Subject: [PATCH 02/52] Wizard - Add disabled state for steps - update demo page in kitchen-sync - wizard.html --- apps/kitchensink/wizard.html | 8 ++++++++ packages/ui/src/7-components/_steps.scss | 5 ++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/kitchensink/wizard.html b/apps/kitchensink/wizard.html index 969bda5db5..103c25dc44 100644 --- a/apps/kitchensink/wizard.html +++ b/apps/kitchensink/wizard.html @@ -287,6 +287,14 @@

Optional Header

+
  • +
    +
    +
    +
    Set permissions
    +
    +
    +
  • diff --git a/packages/ui/src/7-components/_steps.scss b/packages/ui/src/7-components/_steps.scss index 6ca0c94709..bc672750a2 100644 --- a/packages/ui/src/7-components/_steps.scss +++ b/packages/ui/src/7-components/_steps.scss @@ -7,12 +7,13 @@ --p-step-bullet-sep-color: var(--color-neutral-50); + // Done step --p-step-bullet-icon-color-done: var(--color-neutral-0); --p-step-bullet-content-color-done: var(--color-neutral-50); --p-step-bullet-padding-color-done: var(--color-neutral-50); //--p-step-bullet-border-color-done: var(--color-neutral-50); - + // Current Step //--p-step-bullet-icon-color-current: var(--color-neutral-0); --p-step-bullet-content-color-current: var(--color-primary-100); //--p-step-bullet-padding-color-current:var(--color-neutral-0); @@ -75,6 +76,8 @@ min-block-size: 0; .steps-item-wrapper::after {display:none;} } + + &.is-disabled { opacity:0.38; } } &-sub { From 078def8c589b7537ca0d06698e837ef310ce9a67 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 10:12:20 -0600 Subject: [PATCH 03/52] New Grid - for page with side-nav and cube-boxes - added demo - layout-1-2.html - New utility class added --- apps/kitchensink/layout-1-2.html | 397 +++++++++++++++++++ packages/ui/src/8-grids/_grid-300px-1fr.scss | 10 + packages/ui/src/8-grids/_index.scss | 1 + packages/ui/src/_9-utilities.scss | 1 + 4 files changed, 409 insertions(+) create mode 100644 apps/kitchensink/layout-1-2.html create mode 100644 packages/ui/src/8-grids/_grid-300px-1fr.scss diff --git a/apps/kitchensink/layout-1-2.html b/apps/kitchensink/layout-1-2.html new file mode 100644 index 0000000000..a1e68fcfbe --- /dev/null +++ b/apps/kitchensink/layout-1-2.html @@ -0,0 +1,397 @@ + + + + + + @appwrite/kitchensink - collection demo + + + +
    + {{> topNav}} {{> sideNav}} +
    +
    +
    +
    + +

    + DemoColl +

    + + Click to copy +
    +
    + +
    +
    +
    + +
    +
    +
    +

    Filter templates

    + +
    + + + +
    + +
      +
    • +
      + + + Use case + +
      + +
      +       +
      +

      + Collapsible +

      +
      +
      +
      • +
    • +
      + + + Runtime + +
      + +
      +       +
      +

      + Collapsible +

      +
      +
      +
      • +
    + +
    +

    Contribute

    +

    + Have an idea for a function template? View our contribution guidelines. +

    +
    +
    +
    +
      +
    • +
      +
      +

      This is a log template name ehich is very long

      + +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +2 +
        +
        • +
      + +
      + +

      Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

      + +
      + + +
      + +
      +
      • +
    • +
      +
      +

      This is a log template name ehich is very long

      + +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +2 +
        +
        • +
      + +
      + +

      Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

      + +
      + + +
      + +
      +
      • +
    • +
      +
      +

      This is a log template name ehich is very long

      + +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +2 +
        +
        • +
      + +
      + +

      Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

      + +
      + + +
      + +
      +
      • +
    • +
      +
      +

      This is a log template name ehich is very long

      + +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +2 +
        +
        • +
      + +
      + +

      Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

      + +
      + + +
      + +
      +
      • +
    • +
      +
      +

      This is a log template name ehich is very long

      + +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +2 +
        +
        • +
      + +
      + +

      Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

      + +
      + + +
      + +
      +
      • +
    • +
      +
      +

      This is a log template name ehich is very long

      + +
        +
      • +
        + +
        +
        • +
      • +
        + +
        +
        • +
      • +
        + +2 +
        +
        • +
      + +
      + +

      Lorem ipsum dolor sit amet. This is a brief, two line description for this template.

      + +
      + + +
      + +
      +
      • +
    +
    +
    + +
    +

    Total results: 1

    + + +
    +
    + + +
    +
    +
    + + + diff --git a/packages/ui/src/8-grids/_grid-300px-1fr.scss b/packages/ui/src/8-grids/_grid-300px-1fr.scss new file mode 100644 index 0000000000..2ea2dcedee --- /dev/null +++ b/packages/ui/src/8-grids/_grid-300px-1fr.scss @@ -0,0 +1,10 @@ +@use '../abstract' as *; + +.grid-300px-1fr { + display: grid; + gap: pxToRem(32); + + @media #{$break3open} { + grid-template-columns: pxToRem(300) 1fr; + } +} \ No newline at end of file diff --git a/packages/ui/src/8-grids/_index.scss b/packages/ui/src/8-grids/_index.scss index d807da4d40..c0e0e490da 100644 --- a/packages/ui/src/8-grids/_index.scss +++ b/packages/ui/src/8-grids/_index.scss @@ -4,6 +4,7 @@ @forward "grid-code"; @forward "grid-1-1"; @forward "grid-1-2"; +@forward "grid-300px-1fr"; @forward "grid-dashboard-1s-2m-6l"; @forward "wizard"; diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index c7c7bbafab..b4fdcc7f8e 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -254,6 +254,7 @@ .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; } .u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; } +.u-padding-block-start-28 { padding-block-start:pxToRem(28)!important; } .u-padding-block-end-32 { padding-block-end:pxToRem(32)!important; } .u-padding-block-end-56 { padding-block-end:pxToRem(56)!important; } From ffb901c79d6a18efe36ba407bf1288071fb60ca0 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 10:55:22 -0600 Subject: [PATCH 04/52] Wizard - Add new layout demo template - wizard-1-1.html --- apps/kitchensink/vite.config.js | 1 + apps/kitchensink/wizard-1-1.html | 402 +++++++++++++++++++++++++++ packages/ui/src/8-grids/_wizard.scss | 8 + packages/ui/src/_9-utilities.scss | 1 + 4 files changed, 412 insertions(+) create mode 100644 apps/kitchensink/wizard-1-1.html diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js index f5ffa53851..b823891685 100644 --- a/apps/kitchensink/vite.config.js +++ b/apps/kitchensink/vite.config.js @@ -20,6 +20,7 @@ const config = { noSide: new URL("./no-side.html", import.meta.url).pathname, wizard: new URL("./wizard.html", import.meta.url).pathname, wizardForm: new URL("./wizard-form.html", import.meta.url).pathname, + wizard11: new URL("./wizard-1-1.html", import.meta.url).pathname, coverFrame: new URL("./cover-frame.html", import.meta.url).pathname, users: new URL("./users.html", import.meta.url).pathname, user: new URL("./user.html", import.meta.url).pathname, diff --git a/apps/kitchensink/wizard-1-1.html b/apps/kitchensink/wizard-1-1.html new file mode 100644 index 0000000000..dc14d4095d --- /dev/null +++ b/apps/kitchensink/wizard-1-1.html @@ -0,0 +1,402 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
    + {{> topNav}} +
    +
    +
    +
    +
    +
    +
    + Eldad Test +
    Eldad Test
    +
    Unverified
    +
    +
    + eldad@appwrite.io +

    Joined: June 11, 2022

    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    Update Name
    +

    Free text in here

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Update Email
    +

    Free text

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Update Password
    +

    + Enter a new password. A password must contain + at least 8 characters. +

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    User Preferences
    +

    + You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

    +
    +
    +
    +
      +
    • +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      + +
      +
      • +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Danger Zone
    +

    + The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

    +
    +
    +
    +
    + Eldad Test +
    +
    Eldad Test
    +

    eldad@appwrite.io

    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + + +
    + +
    + + + + +
    +
    Create Document
    + +
    + +
    +
    +

    Choose your [style? type?]

    +

    Lorem ipsum dolor sit amet. Some kinda short description here..

    +
    +
    +
    +

    Import Git repository

    +

    Create and deploy a function with a connected git repository.

    +
    +
    +
    +

    Quick start

    +

    Use a starter templates to begin with the basics.

    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • + +
    +
    +
    +

    Templates

    +

    Choose from a selection of templates to find the right one for your use case.

    + +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    +

    You can also create a function manually. Learn more.

    + +
    + + +
    + + + + diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss index f6d372452f..9140351bbd 100644 --- a/packages/ui/src/8-grids/_wizard.scss +++ b/packages/ui/src/8-grids/_wizard.scss @@ -41,6 +41,7 @@ background-color: hsl(var(--p-end-color)); } } + @media #{$break1} { display: grid; grid-template-rows: var(--p-header-height); @@ -75,6 +76,13 @@ &-side { grid-row:2; grid-column:2; } &-main { grid-row:2 / 4; grid-column:4; } &-media { grid-row:3; grid-column:1 / 3; } + + /* full layout */ + &.is-full-center-layout { + .wizard-container { + grid-column:2 / 5; padding-inline:pxToRem(32); + } + } } diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index b4fdcc7f8e..ea53c0466a 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -255,6 +255,7 @@ .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; } .u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; } .u-padding-block-start-28 { padding-block-start:pxToRem(28)!important; } +.u-padding-block-start-48 { padding-block-start:pxToRem(48)!important; } .u-padding-block-end-32 { padding-block-end:pxToRem(32)!important; } .u-padding-block-end-56 { padding-block-end:pxToRem(56)!important; } From a83aefd5e4c63ccde54a948560a375146035f4d8 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 12:22:21 -0600 Subject: [PATCH 05/52] Wizard - update, work in progress --- apps/kitchensink/wizard-1-1.html | 43 ++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/apps/kitchensink/wizard-1-1.html b/apps/kitchensink/wizard-1-1.html index dc14d4095d..8a23055a6d 100644 --- a/apps/kitchensink/wizard-1-1.html +++ b/apps/kitchensink/wizard-1-1.html @@ -264,6 +264,49 @@

    Choose your [style? type?]

    Import Git repository

    Create and deploy a function with a connected git repository.

    + +
    + +
    + + +
    + + +
    + + + +
    + +
    + +

    + Can’t see your repos? Manage GitHub application. +

    + +
    +
    + aaaa +
    +
    From ea299a0b58ed9ea986f0e7350211fc4fa5b6f0d6 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 12:30:45 -0600 Subject: [PATCH 06/52] Wizard - update demo with all partials --- apps/kitchensink/wizard-1-1.html | 99 +++++++++++++++++++++++++++++-- packages/ui/src/_9-utilities.scss | 1 + 2 files changed, 96 insertions(+), 4 deletions(-) diff --git a/apps/kitchensink/wizard-1-1.html b/apps/kitchensink/wizard-1-1.html index 8a23055a6d..d3f56ee9d5 100644 --- a/apps/kitchensink/wizard-1-1.html +++ b/apps/kitchensink/wizard-1-1.html @@ -302,10 +302,101 @@

    Import Git repository

    Can’t see your repos? Manage GitHub application.

    -
    -
    - aaaa -
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    + +
    +

    Total results: 1

    + +
    diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index ea53c0466a..fa79697b53 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -251,6 +251,7 @@ .u-padding-block-8 { padding-block:pxToRem(8)!important; } .u-padding-block-12 { padding-block:pxToRem(12)!important; } +.u-padding-block-16 { padding-block:pxToRem(16)!important; } .u-padding-block-start-16 { padding-block-start:pxToRem(16)!important; } .u-padding-block-start-20 { padding-block-start:pxToRem(20)!important; } From 9829b7ba246c0cfaa249ce5abae8ddd2e59782f7 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 20 Jul 2023 12:36:39 -0600 Subject: [PATCH 07/52] Wizard - update demo with all partials --- apps/kitchensink/wizard-1-1.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/kitchensink/wizard-1-1.html b/apps/kitchensink/wizard-1-1.html index d3f56ee9d5..2987acc8e8 100644 --- a/apps/kitchensink/wizard-1-1.html +++ b/apps/kitchensink/wizard-1-1.html @@ -265,7 +265,7 @@

    Choose your [style? type?]

    Import Git repository

    Create and deploy a function with a connected git repository.

    -
    +
    -

    Netherlands

    +

    UK

    • @@ -78,7 +78,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    Canada

    @@ -87,7 +87,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    US

    @@ -96,7 +96,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    +

    Germany

    @@ -105,16 +105,7 @@ description: A representation of content uploaded as an attachment.
    -

    Netherlands

    -
    - - -
  • -
    • From 63690d221a608b10397530bf0388b4cd673a00a9 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 17 Aug 2023 13:53:33 +0200 Subject: [PATCH 30/52] fix: use css vars for icons --- apps/pink/public/search.json | 2 +- package-lock.json | 484 +++++++++++++++++- package.json | 5 +- packages/icons/package.json | 2 +- packages/icons/scripts.js | 3 +- .../icons/templates/__variables.scss.template | 1 - .../templates/_{{filename}}.css.template | 3 +- .../templates/_{{filename}}.scss.template | 3 +- .../6-elements/form/_radio-and-checkbox.scss | 3 +- 9 files changed, 485 insertions(+), 21 deletions(-) delete mode 100644 packages/icons/templates/__variables.scss.template diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json index 07eeb8b170..55f7058398 100644 --- a/apps/pink/public/search.json +++ b/apps/pink/public/search.json @@ -1 +1 @@ -{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,202],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,475],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,358],"45":[2,119],"46":[3,155],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.03333333333336],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me Netherlands Netherlands Netherlands Netherlands Netherlands Singapore Netherlands Notify me Netherlands Netherlands Netherlands Netherlands Netherlands Singapore \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Netherlands </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Singapore </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Philipp Hausleiter @phaus Everly Precia Suresh @everly-gif Software Engineer at Appwrite Carla @heyCarla Product Designer at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Steven Nguyen @stnguyen90 Software Engineer at Appwrite Rahul Singh @drph4nt0m Elad Shechter @elad2412 Web Developer at Appwrite Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Christy Jacob @christyjacob4 Engineering Lead at Appwrite Hardik Sachan @hardiksachan Brandon @brandonroberts achintya @achintya-7 Aditya Rana @codingsamurai-10 Thomas G. Lopes @tglide Frontend Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Eldad Fux @eldadfux Appwrite's Founder Wess Cope @wess Software Engineer at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 345 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jake",{"1":{"44":1}}],["jacob",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":7,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":7,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":18,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":10,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["345",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":7,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":13,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":7,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":7,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":10,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":8,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wess",{"1":{"44":2}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["wen",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":10,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":20}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":118,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":7,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":3}}],["engineer",{"1":{"44":9}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":20,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["us",{"1":{"37":1,"44":4}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":114,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":10,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":8,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":3}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":20,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":131,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lopes",{"1":{"44":1}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":23,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"53":2,"57":2}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":8,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":7}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":39,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":8,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":7,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":22,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":10,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":14,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":1}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":21,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":611,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":18,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":1}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":11,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":14,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":26,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":15,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":10,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["rahul",{"1":{"44":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":11,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":21,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":10,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":21,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":7,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":21,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":8}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shechter",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shield",{"1":{"8":3,"40":2}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":7,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["singapore",{"1":{"10":3}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":11,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":13,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kristin",{"1":{"44":4}}],["kotlin",{"1":{"40":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":134,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":8,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":9,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["carla",{"1":{"44":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":34,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":1}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":55,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":7}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file +{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,206],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,476],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,360],"45":[2,120],"46":[3,156],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.18333333333334],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Christy Jacob @christyjacob4 Engineering Lead at Appwrite Rahul Singh @drph4nt0m Elad Shechter @elad2412 Web Developer at Appwrite achintya @achintya-7 Matej Bačo @Meldiron Software Engineer at Appwrite Wess Cope @wess Software Engineer at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Shmuel Fogel @fogelito Software Engineer at Appwrite Brandon @brandonroberts Everly Precia Suresh @everly-gif Software Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite Eldad Fux @eldadfux Appwrite's Founder Jake Barnby @abnegate Engineering Lead at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Shimon Newman @shimonewman Full Stack Engineer at Appwrite Thomas G. Lopes @tglide Frontend Engineer at Appwrite Philipp Hausleiter @phaus Chen Parnasa @chenparnasa Product Designer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Carla @heyCarla Product Designer at Appwrite Hardik Sachan @hardiksachan Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jake",{"1":{"44":1}}],["jacob",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["346",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wen",{"1":{"44":1}}],["wess",{"1":{"44":2}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineer",{"1":{"44":11}}],["engineering",{"1":{"44":2}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":1}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":30,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":19}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":2}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lopes",{"1":{"44":1}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parhi",{"1":{"44":1}}],["parnasa",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rahul",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["shmuel",{"1":{"44":1}}],["shechter",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kristin",{"1":{"44":4}}],["kotlin",{"1":{"40":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["carla",{"1":{"44":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ec94e6b060..760990228e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,6 @@ "apps/*", "packages/*" ], - "dependencies": { - "@appwrite.io/pink-icons": "^0.0.7-next.1" - }, "devDependencies": { "@changesets/cli": "^2.26.1", "prettier": "^2.8.2", @@ -2884,6 +2881,15 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.30.tgz", "integrity": "sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==" }, + "node_modules/@types/jsonfile": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.1.tgz", + "integrity": "sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/mdast": { "version": "3.0.10", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz", @@ -3071,9 +3077,9 @@ "dev": true }, "node_modules/acorn": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz", - "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==", + "version": "8.10.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", + "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", "bin": { "acorn": "bin/acorn" }, @@ -3247,6 +3253,12 @@ "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==", "dev": true }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true + }, "node_modules/anymatch": { "version": "3.1.3", "devOptional": true, @@ -3596,6 +3608,33 @@ "node": ">= 4.5.0" } }, + "node_modules/auto-config-loader": { + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/auto-config-loader/-/auto-config-loader-1.7.4.tgz", + "integrity": "sha512-lx+kW0YFck2+sACl2wOhJUua298aC3/xz7TEYjMgHrtSlhXIR8vDun4kuYaa1BJbK5IgjwfN+6uswAkcimVC0w==", + "dev": true, + "dependencies": { + "ini": "^4.1.1", + "jiti": "^1.18.2", + "jsonc-eslint-parser": "^2.3.0", + "lodash.merge": "^4.6.2", + "sucrase": "^3.32.0", + "toml-eslint-parser": "^0.6.0", + "yaml-eslint-parser": "^1.2.2" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/auto-config-loader/node_modules/ini": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.1.tgz", + "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==", + "dev": true, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -5979,6 +6018,35 @@ "node": ">=0.8.0" } }, + "node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, + "dependencies": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -8271,6 +8339,15 @@ "regenerator-runtime": "^0.13.3" } }, + "node_modules/jiti": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz", + "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==", + "dev": true, + "bin": { + "jiti": "bin/jiti.js" + } + }, "node_modules/jpeg-js": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz", @@ -8332,6 +8409,24 @@ "node": ">=6" } }, + "node_modules/jsonc-eslint-parser": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-2.3.0.tgz", + "integrity": "sha512-9xZPKVYp9DxnM3sd1yAsh/d59iIaswDkai8oTxbursfKYbg/ibjX0IzFt35+VZ8iEW453TVTXztnRvYUQlAfUQ==", + "dev": true, + "dependencies": { + "acorn": "^8.5.0", + "eslint-visitor-keys": "^3.0.0", + "espree": "^9.0.0", + "semver": "^7.3.5" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, "node_modules/jsonc-parser": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz", @@ -8480,6 +8575,12 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/lodash.startcase": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.startcase/-/lodash.startcase-4.4.0.tgz", @@ -10106,6 +10207,17 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, "node_modules/nan": { "version": "2.17.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz", @@ -10381,6 +10493,15 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -10990,6 +11111,15 @@ "node": ">=6" } }, + "node_modules/pirates": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", + "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/pixelmatch": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz", @@ -13616,6 +13746,71 @@ "node": ">=8" } }, + "node_modules/sucrase": { + "version": "3.34.0", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", + "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "glob": "7.1.6", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", + "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/sucrase/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sucrase/node_modules/glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/suf-log": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz", @@ -14270,6 +14465,27 @@ "resolved": "https://registry.npmjs.org/the-new-css-reset/-/the-new-css-reset-1.8.2.tgz", "integrity": "sha512-qM5W+nEI8EqR7NUmO3+rO210uPTb+1Ne4PB/a4cnJcA2heFnMTX5baYZw0U7IsoLsE+/htaz8Wr5qxZGFIzsFA==" }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -14451,6 +14667,21 @@ "node": ">=0.10.0" } }, + "node_modules/toml-eslint-parser": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/toml-eslint-parser/-/toml-eslint-parser-0.6.0.tgz", + "integrity": "sha512-aTmQa0RFb+2URe8IZOfo/oxt3b5rlXlpG9xE+6FmeI8immCGLnZYvKVxbnCYJx4bIKIaEwl0BnCDhwO70yeWSA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.0.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, "node_modules/totalist": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.0.tgz", @@ -14486,6 +14717,12 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true + }, "node_modules/tsconfig-resolver": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/tsconfig-resolver/-/tsconfig-resolver-3.0.1.tgz", @@ -16136,6 +16373,32 @@ "node": ">= 6" } }, + "node_modules/yaml-eslint-parser": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.2.2.tgz", + "integrity": "sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.0.0", + "lodash": "^4.17.21", + "yaml": "^2.0.0" + }, + "engines": { + "node": "^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ota-meshi" + } + }, + "node_modules/yaml-eslint-parser/node_modules/yaml": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz", + "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, "node_modules/yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -16255,7 +16518,214 @@ "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^2.2.0", - "svgtofont": "^3.22.0" + "svgtofont": "^4.0.0" + } + }, + "packages/icons/node_modules/@types/fs-extra": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.1.tgz", + "integrity": "sha512-MxObHvNl4A69ofaTRU8DFqvgzzv8s9yRtaPPm5gud9HDNvpB3GPQFvNuTWAI59B9huVGV5jXYJwbCsmBsOGYWA==", + "dev": true, + "dependencies": { + "@types/jsonfile": "*", + "@types/node": "*" + } + }, + "packages/icons/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "packages/icons/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "packages/icons/node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "packages/icons/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "packages/icons/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "packages/icons/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "packages/icons/node_modules/fs-extra": { + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "packages/icons/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "packages/icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "packages/icons/node_modules/svgtofont": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/svgtofont/-/svgtofont-4.0.0.tgz", + "integrity": "sha512-8K0e/4BcJRhBcmQ9d5O5GC7WdNW0sLi7G1egvnzvPi5orICAcAQg/SF3n03DYMLkAGXhJ+UsKfJnC8ovv8/xiw==", + "dev": true, + "dependencies": { + "@types/cheerio": "~0.22.31", + "@types/ejs": "~3.1.0", + "@types/fs-extra": "^11.0.1", + "@types/svg2ttf": "~5.0.1", + "@types/svgicons2svgfont": "~10.0.1", + "@types/ttf2eot": "~2.0.0", + "@types/ttf2woff": "~2.0.2", + "@types/ttf2woff2": "~2.0.0", + "auto-config-loader": "^1.7.4", + "cheerio": "~1.0.0-rc.12", + "colors-cli": "~1.0.28", + "copy-template-dir": "~1.4.0", + "del": "~6.1.0", + "ejs": "~3.1.6", + "fs-extra": "~11.1.0", + "image2uri": "~1.0.5", + "move-file": "~2.1.0", + "svg2ttf": "~6.0.3", + "svgicons2svgfont": "~12.0.0", + "svgo": "~3.0.0", + "ttf2eot": "~3.1.0", + "ttf2woff": "~3.0.0", + "ttf2woff2": "~5.0.0", + "yargs": "~17.7.1" + }, + "bin": { + "svgtofont": "lib/cli.js" + }, + "engines": { + "node": ">=16.0.0" + }, + "funding": { + "url": "https://jaywcjlove.github.io/sponsor.html" + } + }, + "packages/icons/node_modules/ttf2woff2": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ttf2woff2/-/ttf2woff2-5.0.0.tgz", + "integrity": "sha512-FplhShJd3rT8JGa8N04YWQuP7xRvwr9AIq+9/z5O/5ubqNiCADshKl8v51zJDFkhDVcYpdUqUpm7T4M53Z2JoQ==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "bindings": "^1.5.0", + "bufferstreams": "^3.0.0", + "nan": "^2.14.2", + "node-gyp": "^9.0.0" + }, + "bin": { + "ttf2woff2": "bin/ttf2woff2.js" + }, + "engines": { + "node": ">=14" + } + }, + "packages/icons/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "packages/icons/node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" } }, "packages/ui": { diff --git a/package.json b/package.json index e85bf46b55..b9fcd0d779 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,5 @@ "npm": ">=7.0.0", "node": ">=16.0.0" }, - "packageManager": "npm@8.1.2", - "dependencies": { - "@appwrite.io/pink-icons": "^0.0.7-next.1" - } + "packageManager": "npm@8.1.2" } diff --git a/packages/icons/package.json b/packages/icons/package.json index 33bafdce84..a000ff2fbb 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -13,7 +13,7 @@ "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^2.2.0", - "svgtofont": "^3.22.0" + "svgtofont": "^4.0.0" }, "main": "dist/icon.css", "style": "dist/icon.css", diff --git a/packages/icons/scripts.js b/packages/icons/scripts.js index 64083688d3..6a9a1a1661 100644 --- a/packages/icons/scripts.js +++ b/packages/icons/scripts.js @@ -26,7 +26,8 @@ export const generateIcons = async () => { generateInfoData: true, svgoOptions: { full: false - } + }, + useCSSVars: true }); } diff --git a/packages/icons/templates/__variables.scss.template b/packages/icons/templates/__variables.scss.template deleted file mode 100644 index a9af3c012c..0000000000 --- a/packages/icons/templates/__variables.scss.template +++ /dev/null @@ -1 +0,0 @@ -{{cssToVars}} \ No newline at end of file diff --git a/packages/icons/templates/_{{filename}}.css.template b/packages/icons/templates/_{{filename}}.css.template index 4fb38f4e71..fd37b324d0 100644 --- a/packages/icons/templates/_{{filename}}.css.template +++ b/packages/icons/templates/_{{filename}}.css.template @@ -10,8 +10,7 @@ } [class^="{{prefix}}-"], [class*=" {{prefix}}-"] { - font-family: '{{fontname}}' !important; - font-size: {{fontSize}}; + font-family: '{{fontname}}' !important;{{fontSize}} font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/packages/icons/templates/_{{filename}}.scss.template b/packages/icons/templates/_{{filename}}.scss.template index 311cdba7aa..421d3ed253 100644 --- a/packages/icons/templates/_{{filename}}.scss.template +++ b/packages/icons/templates/_{{filename}}.scss.template @@ -8,8 +8,7 @@ } [class^="{{prefix}}-"], [class*=" {{prefix}}-"] { - font-family: '{{fontname}}' !important; - font-size: {{fontSize}}; + font-family: '{{fontname}}' !important;{{fontSize}} font-display: swap; font-style: normal; -webkit-font-smoothing: antialiased; diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss index b3148b2ab6..cb009bd46b 100644 --- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss +++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss @@ -1,5 +1,4 @@ @use '../../abstract' as *; -@use '@appwrite.io/pink-icons/dist/variables' as icons; [type="checkbox"], [type="radio"] { @@ -127,7 +126,7 @@ &:where(:checked) { &::before { font-family: 'icon' !important; - content: icons.$icon-check; + content: var(--icon-check); vertical-align: middle; margin-bottom: calc(var(--p-size) / 8 * -1); font-size: var(--p-icon-size); From 9d9bac900676b2baa83266f5e3689c6bb6295faf Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Thu, 17 Aug 2023 12:57:14 +0100 Subject: [PATCH 31/52] version bump --- .changeset/brown-shirts-judge.md | 6 ++++++ .changeset/pre.json | 2 ++ apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 10 ++++++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 13 +++++++++++++ packages/ui/package.json | 4 ++-- 8 files changed, 38 insertions(+), 7 deletions(-) create mode 100644 .changeset/brown-shirts-judge.md diff --git a/.changeset/brown-shirts-judge.md b/.changeset/brown-shirts-judge.md new file mode 100644 index 0000000000..3d6268ffba --- /dev/null +++ b/.changeset/brown-shirts-judge.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +Fix desynced icons diff --git a/.changeset/pre.json b/.changeset/pre.json index db38b8e8df..77931f3380 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -9,6 +9,8 @@ "@appwrite.io/pink": "0.0.6" }, "changesets": [ + "brown-shirts-judge", + "neat-cats-cough", "ten-snakes-teach", "three-waves-cheer" ] diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index a33e356e5e..a8038f1589 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.0.7-next.1", - "@appwrite.io/pink-icons": "0.0.7-next.1", + "@appwrite.io/pink": "0.1.0-next.2", + "@appwrite.io/pink-icons": "0.1.0-next.2", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index a544a638f0..d9a4d27433 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.0.7-next.1", - "@appwrite.io/pink-icons": "0.0.7-next.1", + "@appwrite.io/pink": "0.1.0-next.2", + "@appwrite.io/pink-icons": "0.1.0-next.2", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 53e667f4b9..596e11eea2 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,15 @@ # @appwrite.io/pink-icons +## 0.1.0-next.2 + +### Minor Changes + +- 805af37e: add divider + +### Patch Changes + +- Fix desynced icons + ## 0.0.7-next.1 ### Patch Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index a000ff2fbb..1527ccddfc 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.0.7-next.1", + "version": "0.1.0-next.2", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 18af4db8f7..3ae2e3b2a7 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,18 @@ # @appwrite.io/pink +## 0.1.0-next.2 + +### Minor Changes + +- 805af37e: add divider + +### Patch Changes + +- Fix desynced icons +- Updated dependencies +- Updated dependencies [805af37e] + - @appwrite.io/pink-icons@0.1.0-next.2 + ## 0.0.7-next.1 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 968f067635..7ca20ac428 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.0.7-next.1", + "version": "0.1.0-next.2", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.0.7-next.1", + "@appwrite.io/pink-icons": "0.1.0-next.2", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From 3644ee1f6e876bedf5d4b51ebc25c46aaeda99b9 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Thu, 17 Aug 2023 13:14:08 +0100 Subject: [PATCH 32/52] new version --- .changeset/pre.json | 1 + .changeset/ten-pandas-share.md | 6 ++++++ apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 8 ++++++++ packages/ui/package.json | 4 ++-- 8 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 .changeset/ten-pandas-share.md diff --git a/.changeset/pre.json b/.changeset/pre.json index 77931f3380..73edcdeabf 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -11,6 +11,7 @@ "changesets": [ "brown-shirts-judge", "neat-cats-cough", + "ten-pandas-share", "ten-snakes-teach", "three-waves-cheer" ] diff --git a/.changeset/ten-pandas-share.md b/.changeset/ten-pandas-share.md new file mode 100644 index 0000000000..87d6b0f489 --- /dev/null +++ b/.changeset/ten-pandas-share.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +fix desync issue diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index a8038f1589..2ab90de9a0 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.2", - "@appwrite.io/pink-icons": "0.1.0-next.2", + "@appwrite.io/pink": "0.1.0-next.3", + "@appwrite.io/pink-icons": "0.1.0-next.3", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index d9a4d27433..5bdb7d61db 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.2", - "@appwrite.io/pink-icons": "0.1.0-next.2", + "@appwrite.io/pink": "0.1.0-next.3", + "@appwrite.io/pink-icons": "0.1.0-next.3", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 596e11eea2..caa3ae9f4b 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.3 + +### Patch Changes + +- fix desync issue + ## 0.1.0-next.2 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 1527ccddfc..fb38879116 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.2", + "version": "0.1.0-next.3", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 3ae2e3b2a7..9b268715c7 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @appwrite.io/pink +## 0.1.0-next.3 + +### Patch Changes + +- fix desync issue +- Updated dependencies + - @appwrite.io/pink-icons@0.1.0-next.3 + ## 0.1.0-next.2 ### Minor Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 7ca20ac428..bb7c51b567 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.2", + "version": "0.1.0-next.3", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.2", + "@appwrite.io/pink-icons": "0.1.0-next.3", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From dcf463b8d61650b4fe2e54239bd758ee316cf01f Mon Sep 17 00:00:00 2001 From: Arman Date: Tue, 22 Aug 2023 10:44:39 +0200 Subject: [PATCH 33/52] chore: bump version --- .changeset/sweet-turtles-hope.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/sweet-turtles-hope.md diff --git a/.changeset/sweet-turtles-hope.md b/.changeset/sweet-turtles-hope.md new file mode 100644 index 0000000000..881f167445 --- /dev/null +++ b/.changeset/sweet-turtles-hope.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Fix: font cropping From ebe0adf016c59ca68b61320d564bdd7907c2af4c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 22 Aug 2023 08:45:41 +0000 Subject: [PATCH 34/52] Version Packages (next) --- .changeset/pre.json | 1 + apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 11 +++++++++++ packages/ui/package.json | 4 ++-- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 73edcdeabf..526a64a910 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -11,6 +11,7 @@ "changesets": [ "brown-shirts-judge", "neat-cats-cough", + "sweet-turtles-hope", "ten-pandas-share", "ten-snakes-teach", "three-waves-cheer" diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index 2ab90de9a0..95794af578 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.3", - "@appwrite.io/pink-icons": "0.1.0-next.3", + "@appwrite.io/pink": "0.1.0-next.4", + "@appwrite.io/pink-icons": "0.1.0-next.4", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index 5bdb7d61db..35d71789b7 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.3", - "@appwrite.io/pink-icons": "0.1.0-next.3", + "@appwrite.io/pink": "0.1.0-next.4", + "@appwrite.io/pink-icons": "0.1.0-next.4", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index caa3ae9f4b..4077255a52 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.4 + +### Minor Changes + +- dcf463b: Fix: font cropping + ## 0.1.0-next.3 ### Patch Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index fb38879116..e06c209225 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.3", + "version": "0.1.0-next.4", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 9b268715c7..1de8d7e1bc 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,16 @@ # @appwrite.io/pink +## 0.1.0-next.4 + +### Minor Changes + +- dcf463b: Fix: font cropping + +### Patch Changes + +- Updated dependencies [dcf463b] + - @appwrite.io/pink-icons@0.1.0-next.4 + ## 0.1.0-next.3 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index bb7c51b567..9ee025a565 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.3", + "version": "0.1.0-next.4", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.3", + "@appwrite.io/pink-icons": "0.1.0-next.4", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From 828aba23b6fc7b8d017a887b1e2c91cf90194293 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 23 Aug 2023 08:18:14 -0500 Subject: [PATCH 35/52] Utility classes - break-word move forward in utility list - table update line-height --- packages/ui/src/6-elements/_table.scss | 2 +- packages/ui/src/_9-utilities.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss index 00df128e37..82fadd59e2 100644 --- a/packages/ui/src/6-elements/_table.scss +++ b/packages/ui/src/6-elements/_table.scss @@ -19,7 +19,7 @@ border-radius: var(--p-border-radius); box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border)), var(--shadow-small); inline-size: 100%; - line-height: 1; + line-height: 1.2; &-with-scroll { @include tableScroll; overflow:hidden; diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index 7e4bae6d7a..703356dbfc 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -29,13 +29,13 @@ .u-line-height-1-25 { line-height:1.25; } .u-line-height-1-5 { line-height:1.5; } .u-line-height-2 { line-height:2; } -.u-break-word { @include break-word; white-space:initial; } -.u-break-all { @include break-all; white-space:initial; } .u-trim { @include trim; } .u-trim-1 { @include trim(1); } .u-trim-2 { @include trim(2); } .u-trim-3 { @include trim(3); } .u-trim-start { @include trim; direction:rtl; text-align:left; } +.u-break-word { @include break-word; white-space:initial; } +.u-break-all { @include break-all; white-space:initial; } .u-un-break-text { white-space:nowrap!important; } .u-capitalize { text-transform:capitalize; } .u-icon-small { font-size:var(--icon-size-small); } From 146f86fc379ba618eedcb9b4d0e71488c7069686 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 23 Aug 2023 08:20:25 -0500 Subject: [PATCH 36/52] Avatar - update sizing styles --- packages/ui/src/6-elements/_avatar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss index 16ca23e6cf..9a93d7bbdb 100644 --- a/packages/ui/src/6-elements/_avatar.scss +++ b/packages/ui/src/6-elements/_avatar.scss @@ -97,7 +97,7 @@ line-height: 1; [class*="icon"] { font-size:var(--p-text-size); } - img, svg { inline-size:var(--p-text-size); aspect-ratio:1 / 1; } + img, svg { inline-size:var(--p-text-size); block-size:var(--p-text-size); } &-link { display:block; border-radius:var(--border-radius-circular); &:focus-visible { box-shadow:var(--focus-box-shadow); } From 61e832d29905dffe6e4ae638635356b906cbd5cc Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Wed, 23 Aug 2023 08:44:56 -0500 Subject: [PATCH 37/52] Utility for equal lines size - u-grid-equal-row-size --- packages/ui/src/_9-utilities.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss index 703356dbfc..05f4f59831 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -177,6 +177,7 @@ .u-grid-columns-auto-1fr { display:grid; grid-template-columns:auto 1fr; } .u-grid-cols-2 { display:grid; grid-template-columns:1fr 1fr; } +.u-grid-equal-row-size { display:grid; grid-auto-rows:1fr; align-items:center; } .u-width-fit-content { inline-size:fit-content; } .u-width-full-line { inline-size:100%; } From 05f6f7e923ef36862ed3306d5961a47751d87ac3 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 23 Aug 2023 16:01:28 +0200 Subject: [PATCH 38/52] chore: bump version --- .changeset/witty-bulldogs-repeat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/witty-bulldogs-repeat.md diff --git a/.changeset/witty-bulldogs-repeat.md b/.changeset/witty-bulldogs-repeat.md new file mode 100644 index 0000000000..0be3064993 --- /dev/null +++ b/.changeset/witty-bulldogs-repeat.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Changes for 1.4 from other branch From cc6edda09af3eba93534ac9257e4402230ab5e25 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 23 Aug 2023 14:02:51 +0000 Subject: [PATCH 39/52] Version Packages (next) --- .changeset/pre.json | 3 ++- apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 11 +++++++++++ packages/ui/package.json | 4 ++-- 7 files changed, 26 insertions(+), 8 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 526a64a910..1d85723c2e 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -14,6 +14,7 @@ "sweet-turtles-hope", "ten-pandas-share", "ten-snakes-teach", - "three-waves-cheer" + "three-waves-cheer", + "witty-bulldogs-repeat" ] } diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index 95794af578..faa493e1d3 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.4", - "@appwrite.io/pink-icons": "0.1.0-next.4", + "@appwrite.io/pink": "0.1.0-next.5", + "@appwrite.io/pink-icons": "0.1.0-next.5", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index 35d71789b7..f85e369a9f 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.4", - "@appwrite.io/pink-icons": "0.1.0-next.4", + "@appwrite.io/pink": "0.1.0-next.5", + "@appwrite.io/pink-icons": "0.1.0-next.5", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 4077255a52..d6fcc125af 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.5 + +### Minor Changes + +- 05f6f7e: Changes for 1.4 from other branch + ## 0.1.0-next.4 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index e06c209225..7d350e677f 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.4", + "version": "0.1.0-next.5", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 1de8d7e1bc..53e02b6fab 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,16 @@ # @appwrite.io/pink +## 0.1.0-next.5 + +### Minor Changes + +- 05f6f7e: Changes for 1.4 from other branch + +### Patch Changes + +- Updated dependencies [05f6f7e] + - @appwrite.io/pink-icons@0.1.0-next.5 + ## 0.1.0-next.4 ### Minor Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 9ee025a565..09810b3e65 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.4", + "version": "0.1.0-next.5", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.4", + "@appwrite.io/pink-icons": "0.1.0-next.5", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From afc7f5ce2da65718385a8575e272a2dee0f699ac Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 25 Aug 2023 05:23:08 -0500 Subject: [PATCH 40/52] Switch button - Add flex-shrink:0 in order to prevent shrinking when it is inside of flexbox container --- packages/ui/src/6-elements/form/_switch.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/6-elements/form/_switch.scss b/packages/ui/src/6-elements/form/_switch.scss index b17f736fee..fb702f8b3a 100644 --- a/packages/ui/src/6-elements/form/_switch.scss +++ b/packages/ui/src/6-elements/form/_switch.scss @@ -20,7 +20,7 @@ --p-bg-color-checked-disabled: var(--color-information-50); - all:unset; position:relative; display:inline-flex; box-sizing:border-box; + all:unset; position:relative; display:inline-flex; box-sizing:border-box; flex-shrink:0; inline-size:pxToRem(36); block-size:pxToRem(20); border-radius:var(--border-radius-medium); padding:pxToRem(2); background-color:hsl(var(--p-bg-color)); cursor:pointer; transition:var(--transition); From b1d391f66c898ac916a88527cca441cfe4f21159 Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 25 Aug 2023 12:33:27 +0200 Subject: [PATCH 41/52] chore: bump version --- .changeset/pretty-gorillas-cough.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/pretty-gorillas-cough.md diff --git a/.changeset/pretty-gorillas-cough.md b/.changeset/pretty-gorillas-cough.md new file mode 100644 index 0000000000..42be9fa9db --- /dev/null +++ b/.changeset/pretty-gorillas-cough.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Fix switch button From c2d2f7685733c65d185fd714246621eb422f591b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 25 Aug 2023 10:34:51 +0000 Subject: [PATCH 42/52] Version Packages (next) --- .changeset/pre.json | 1 + apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 11 +++++++++++ packages/ui/package.json | 4 ++-- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 1d85723c2e..bbf0de79f8 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -11,6 +11,7 @@ "changesets": [ "brown-shirts-judge", "neat-cats-cough", + "pretty-gorillas-cough", "sweet-turtles-hope", "ten-pandas-share", "ten-snakes-teach", diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index faa493e1d3..8f7cba54b6 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.5", - "@appwrite.io/pink-icons": "0.1.0-next.5", + "@appwrite.io/pink": "0.1.0-next.6", + "@appwrite.io/pink-icons": "0.1.0-next.6", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index f85e369a9f..7a099d433b 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.5", - "@appwrite.io/pink-icons": "0.1.0-next.5", + "@appwrite.io/pink": "0.1.0-next.6", + "@appwrite.io/pink-icons": "0.1.0-next.6", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index d6fcc125af..35d1325503 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.6 + +### Minor Changes + +- b1d391f6: Fix switch button + ## 0.1.0-next.5 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 7d350e677f..6c4aec4a84 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.5", + "version": "0.1.0-next.6", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 53e02b6fab..bc88af75bd 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,16 @@ # @appwrite.io/pink +## 0.1.0-next.6 + +### Minor Changes + +- b1d391f6: Fix switch button + +### Patch Changes + +- Updated dependencies [b1d391f6] + - @appwrite.io/pink-icons@0.1.0-next.6 + ## 0.1.0-next.5 ### Minor Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 09810b3e65..4ce6cd3ffd 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.5", + "version": "0.1.0-next.6", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.5", + "@appwrite.io/pink-icons": "0.1.0-next.6", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From 1b1279ee0980af0b75c6e6eef4abf37d0d6fe5e3 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 25 Aug 2023 06:16:44 -0500 Subject: [PATCH 43/52] Avatar - Update icon size for 20px foe default (medium size) --- packages/ui/src/6-elements/_avatar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss index 9a93d7bbdb..d8a4117add 100644 --- a/packages/ui/src/6-elements/_avatar.scss +++ b/packages/ui/src/6-elements/_avatar.scss @@ -1,7 +1,7 @@ @use '../abstract' as *; .avatar { - --p-text-size: var(--text-size, var(--font-size-1)); + --p-text-size: var(--text-size, var(--font-size-3)); $default-size: pxToRem(40); --p-size: var(--size, #{$default-size} ); /* default is medium size */ --p-avatar-text-color: var(--p-avatar-text-color-default); @@ -109,7 +109,7 @@ } &.is-size-small { --p-text-size:var(--font-size-00); $size:pxToRem(32); --p-size:#{$size}; - [class*="icon"] { --p-text-size:var(--font-size-0); } + [class*="icon"] { --p-text-size:var(x-); } } &.is-size-medium { /* default */ From cad1b4305e8462e8dc89c3e76fe176e3cd746685 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Fri, 25 Aug 2023 06:18:39 -0500 Subject: [PATCH 44/52] Avatar - Update icon size for 20px foe default (medium size) --- packages/ui/src/6-elements/_avatar.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss index d8a4117add..c4dc7e44a5 100644 --- a/packages/ui/src/6-elements/_avatar.scss +++ b/packages/ui/src/6-elements/_avatar.scss @@ -97,7 +97,7 @@ line-height: 1; [class*="icon"] { font-size:var(--p-text-size); } - img, svg { inline-size:var(--p-text-size); block-size:var(--p-text-size); } + img, svg { inline-size:var(--p-text-size); aspect-ratio:1 / 1; } &-link { display:block; border-radius:var(--border-radius-circular); &:focus-visible { box-shadow:var(--focus-box-shadow); } @@ -109,7 +109,7 @@ } &.is-size-small { --p-text-size:var(--font-size-00); $size:pxToRem(32); --p-size:#{$size}; - [class*="icon"] { --p-text-size:var(x-); } + [class*="icon"] { --p-text-size:var(--font-size-0); } } &.is-size-medium { /* default */ @@ -202,7 +202,7 @@ .avatars-group { --p-avatar-group-border-color: var(--avatar-group-border-color, var(--color-neutral-5)); - position:relative; z-index:0; display:flex; padding-inline-end:.6rem; + position:relative; z-index:0; display:flex; &-item { position: relative; display: inline-flex; @@ -214,13 +214,13 @@ } .avatar { border:solid pxToRem(2) hsl(var(--p-avatar-group-border-color)); border-radius:var(--border-radius-circular); - margin-inline-end: -.6rem; + margin-inline-start: -.6rem; } - .image-item { margin-inline-end: -.6rem; } + .image-item { margin-inline-start: -.6rem; } - .is-size-x-small { margin-inline-end: -.5rem; } - .is-size-small { margin-inline-end: -.5rem; } - .is-size-large { margin-inline-end: -0.8rem; } + .is-size-x-small { margin-inline-start: -.5rem; } + .is-size-small { margin-inline-start: -.5rem; } + .is-size-large { margin-inline-start: -0.8rem; } } &.is-with-border .avatar { --p-avatar-group-border-color:var(--p-avatar-border-color-default)!important; From 4cb0e109cc5ea7ddc604dfdc89e1622dd1a57b45 Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 25 Aug 2023 13:37:58 +0200 Subject: [PATCH 45/52] chore: bump version --- .changeset/pretty-feet-return.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/pretty-feet-return.md diff --git a/.changeset/pretty-feet-return.md b/.changeset/pretty-feet-return.md new file mode 100644 index 0000000000..3785a7ac23 --- /dev/null +++ b/.changeset/pretty-feet-return.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Fix avatar icons From 3cad0ccee3ca6c9b13726c6f0b6704f8106b936c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 25 Aug 2023 11:38:57 +0000 Subject: [PATCH 46/52] Version Packages (next) --- .changeset/pre.json | 1 + apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 11 +++++++++++ packages/ui/package.json | 4 ++-- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index bbf0de79f8..c455c844d9 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -11,6 +11,7 @@ "changesets": [ "brown-shirts-judge", "neat-cats-cough", + "pretty-feet-return", "pretty-gorillas-cough", "sweet-turtles-hope", "ten-pandas-share", diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index 8f7cba54b6..1e74b0e33f 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.6", - "@appwrite.io/pink-icons": "0.1.0-next.6", + "@appwrite.io/pink": "0.1.0-next.7", + "@appwrite.io/pink-icons": "0.1.0-next.7", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index 7a099d433b..f4036f7181 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.6", - "@appwrite.io/pink-icons": "0.1.0-next.6", + "@appwrite.io/pink": "0.1.0-next.7", + "@appwrite.io/pink-icons": "0.1.0-next.7", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 35d1325503..c92c944029 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.7 + +### Minor Changes + +- 4cb0e109: Fix avatar icons + ## 0.1.0-next.6 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 6c4aec4a84..3cc08e0b1c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.6", + "version": "0.1.0-next.7", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index bc88af75bd..496f734a68 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,16 @@ # @appwrite.io/pink +## 0.1.0-next.7 + +### Minor Changes + +- 4cb0e109: Fix avatar icons + +### Patch Changes + +- Updated dependencies [4cb0e109] + - @appwrite.io/pink-icons@0.1.0-next.7 + ## 0.1.0-next.6 ### Minor Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 4ce6cd3ffd..612724266b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.6", + "version": "0.1.0-next.7", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.6", + "@appwrite.io/pink-icons": "0.1.0-next.7", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From ee890198aba7c44813a8ebdb7230c690bf8173b0 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 28 Aug 2023 10:23:47 -0500 Subject: [PATCH 47/52] Code Panel - Added light mode - added demo --- .../kitchensink/cover-frame-light-mode-2.html | 309 ++++++++++++++++++ apps/kitchensink/cover-frame-light-mode.html | 309 ++++++++++++++++++ apps/pink/public/search.json | 2 +- package-lock.json | 14 +- packages/ui/src/7-components/_code-panel.scss | 15 +- 5 files changed, 638 insertions(+), 11 deletions(-) create mode 100644 apps/kitchensink/cover-frame-light-mode-2.html create mode 100644 apps/kitchensink/cover-frame-light-mode.html diff --git a/apps/kitchensink/cover-frame-light-mode-2.html b/apps/kitchensink/cover-frame-light-mode-2.html new file mode 100644 index 0000000000..86ecb86f7e --- /dev/null +++ b/apps/kitchensink/cover-frame-light-mode-2.html @@ -0,0 +1,309 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
    + {{> topNav}} +
    +
    +
    +
    +
    +
    +
    + Eldad Test +
    Eldad Test
    +
    Unverified
    +
    +
    + eldad@appwrite.io +

    Joined: June 11, 2022

    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    Update Name
    +

    Free text in here

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Update Email
    +

    Free text

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Update Password
    +

    + Enter a new password. A password must contain + at least 8 characters. +

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    User Preferences
    +

    + You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

    +
    +
    +
    +
      +
    • +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      + +
      +
      • +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Danger Zone
    +

    + The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

    +
    +
    +
    +
    + Eldad Test +
    +
    Eldad Test
    +

    eldad@appwrite.io

    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +

    Function ID: 0123456789012abcdefg

    + +
    +
    +
    +
    + Chrome +
    +
    +

    Deployment ID: 0123456789012

    + +
    Size 555KB
    +
    +
    + + Ready + +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    +
    +
    + + +
    +
    + + +
    + 
    blahFunction = {
    + +
    + 
        firstName: "hello"
    + +
    + 
    }
    +     +
    +
    +
    +
    + + + + diff --git a/apps/kitchensink/cover-frame-light-mode.html b/apps/kitchensink/cover-frame-light-mode.html new file mode 100644 index 0000000000..fd5a0a9fd2 --- /dev/null +++ b/apps/kitchensink/cover-frame-light-mode.html @@ -0,0 +1,309 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
    + {{> topNav}} +
    +
    +
    +
    +
    +
    +
    + Eldad Test +
    Eldad Test
    +
    Unverified
    +
    +
    + eldad@appwrite.io +

    Joined: June 11, 2022

    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    Update Name
    +

    Free text in here

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Update Email
    +

    Free text

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Update Password
    +

    + Enter a new password. A password must contain + at least 8 characters. +

    +
    +
    +
    +
      +
    • + +
      + +
      +
      • +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    User Preferences
    +

    + You can update your user preferences by storing information + on the user's objects so they can easily be shared across + devices and sessions. +

    +
    +
    +
    +
      +
    • +
      + +
      + +
      +
      +
      + +
      + +
      +
      +
      + +
      +
      • +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Danger Zone
    +

    + The user will be permanently deleted, including all data + associated with this user. This action is irreversible. +

    +
    +
    +
    +
    + Eldad Test +
    +
    Eldad Test
    +

    eldad@appwrite.io

    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +

    Function ID: 0123456789012abcdefg

    + +
    +
    +
    +
    + Chrome +
    +
    +

    Deployment ID: 0123456789012

    + +
    Size 555KB
    +
    +
    + + Ready + +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    +
    +
    + + +
    +
    + + +
    + 
    blahFunction = {
    + +
    + 
        firstName: "hello"
    + +
    + 
    }
    +     +
    +
    +
    +
    + + + + diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json index 55f7058398..3afeabf1be 100644 --- a/apps/pink/public/search.json +++ b/apps/pink/public/search.json @@ -1 +1 @@ -{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,206],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,476],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,360],"45":[2,120],"46":[3,156],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.18333333333334],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Christy Jacob @christyjacob4 Engineering Lead at Appwrite Rahul Singh @drph4nt0m Elad Shechter @elad2412 Web Developer at Appwrite achintya @achintya-7 Matej Bačo @Meldiron Software Engineer at Appwrite Wess Cope @wess Software Engineer at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Shmuel Fogel @fogelito Software Engineer at Appwrite Brandon @brandonroberts Everly Precia Suresh @everly-gif Software Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite Eldad Fux @eldadfux Appwrite's Founder Jake Barnby @abnegate Engineering Lead at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Shimon Newman @shimonewman Full Stack Engineer at Appwrite Thomas G. Lopes @tglide Frontend Engineer at Appwrite Philipp Hausleiter @phaus Chen Parnasa @chenparnasa Product Designer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Carla @heyCarla Product Designer at Appwrite Hardik Sachan @hardiksachan Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 346 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jake",{"1":{"44":1}}],["jacob",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["346",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wen",{"1":{"44":1}}],["wess",{"1":{"44":2}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineer",{"1":{"44":11}}],["engineering",{"1":{"44":2}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":1}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":30,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":19}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":2}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lopes",{"1":{"44":1}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parhi",{"1":{"44":1}}],["parnasa",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rahul",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["shmuel",{"1":{"44":1}}],["shechter",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kristin",{"1":{"44":4}}],["kotlin",{"1":{"40":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["carla",{"1":{"44":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file +{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,206],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,476],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,359],"45":[2,120],"46":[3,155],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.15],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Brandon @brandonroberts Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Brandon @kodumbeats Shmuel Fogel @fogelito Software Engineer at Appwrite Eldad Fux @eldadfux Appwrite's Founder Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Thomas G. Lopes @tglide Frontend Engineer at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Wess Cope @wess Software Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite achintya @achintya-7 Philipp Hausleiter @phaus Hardik Sachan @hardiksachan Steven Nguyen @stnguyen90 Software Engineer at Appwrite Christy Jacob @christyjacob4 Engineering Lead at Appwrite Aditya Rana @codingsamurai-10 Everly Precia Suresh @everly-gif Software Engineer at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Shimon Newman @shimonewman Full Stack Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jacob",{"1":{"44":1}}],["jake",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["347",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wess",{"1":{"44":2}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["wen",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":3}}],["engineer",{"1":{"44":10}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":3}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["lopes",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":1}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":1}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":2}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":8}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["shechter",{"1":{"44":1}}],["shmuel",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":4}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 760990228e..a90802497b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,8 +29,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.0.7-next.1", - "@appwrite.io/pink-icons": "0.0.7-next.1", + "@appwrite.io/pink": "0.1.0-next.7", + "@appwrite.io/pink-icons": "0.1.0-next.7", "vite-plugin-handlebars": "^1.6.0" } }, @@ -55,8 +55,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.0.7-next.1", - "@appwrite.io/pink-icons": "0.0.7-next.1", + "@appwrite.io/pink": "0.1.0-next.7", + "@appwrite.io/pink-icons": "0.1.0-next.7", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" @@ -16514,7 +16514,7 @@ }, "packages/icons": { "name": "@appwrite.io/pink-icons", - "version": "0.0.7-next.1", + "version": "0.1.0-next.7", "license": "ISC", "devDependencies": { "oslllo-svg-fixer": "^2.2.0", @@ -16730,10 +16730,10 @@ }, "packages/ui": { "name": "@appwrite.io/pink", - "version": "0.0.7-next.1", + "version": "0.1.0-next.7", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.0.7-next.1", + "@appwrite.io/pink-icons": "0.1.0-next.7", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss index 41958e3d12..bb75d0d645 100644 --- a/packages/ui/src/7-components/_code-panel.scss +++ b/packages/ui/src/7-components/_code-panel.scss @@ -1,15 +1,17 @@ @use "../abstract" as *; .code-panel { - --p-code-panel-header: var(--color-neutral-200); - --p-code-panel-content: var(--color-neutral-300); - --p-code-panel-text-color: var(--color-neutral-5); + --p-code-panel-header: var(--color-neutral-5); + --p-code-panel-border-color: var(--color-neutral-30); + --p-code-panel-content: var(--color-neutral-0); + --p-code-panel-text-color: var(--color-neutral-150); display: flex; flex-direction: column; block-size: 100%; flex-shrink: 0; overflow: hidden; + border: solid 1px hsl(var(--p-code-panel-border-color)); border-radius: var(--border-radius-xsmall); color: hsl(var(--p-code-panel-text-color)); &-header { @@ -17,6 +19,7 @@ padding: pxToRem(16); user-select: none; background-color: hsl(var(--p-code-panel-header)); + border-block-end: solid 1px hsl(var(--p-code-panel-border-color)); } &-content { flex: 1; @@ -24,4 +27,10 @@ overflow: auto; background-color: hsl(var(--p-code-panel-content)); } + #{$theme-dark} & { + --p-code-panel-header: var(--color-neutral-200); + --p-code-panel-border-color: var(--transparent); + --p-code-panel-content: var(--color-neutral-300); + --p-code-panel-text-color: var(--color-neutral-5); + } } From 5b6d41a4a761a5c56eafb320073c33271fec1ad1 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Mon, 28 Aug 2023 10:26:43 -0500 Subject: [PATCH 48/52] Code Panel - Remove user-select --- packages/ui/src/7-components/_code-panel.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss index bb75d0d645..0363ecb0b5 100644 --- a/packages/ui/src/7-components/_code-panel.scss +++ b/packages/ui/src/7-components/_code-panel.scss @@ -17,7 +17,6 @@ &-header { display: flex; padding: pxToRem(16); - user-select: none; background-color: hsl(var(--p-code-panel-header)); border-block-end: solid 1px hsl(var(--p-code-panel-border-color)); } From 4c43c17d621ffe96060b592b1ac93c8d33bacd5f Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 28 Aug 2023 17:48:38 +0200 Subject: [PATCH 49/52] chore: release version --- .changeset/pre.json | 1 + .changeset/rotten-carpets-joke.md | 6 ++++++ apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- apps/pink/public/search.json | 2 +- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 8 ++++++++ packages/ui/package.json | 4 ++-- 9 files changed, 29 insertions(+), 8 deletions(-) create mode 100644 .changeset/rotten-carpets-joke.md diff --git a/.changeset/pre.json b/.changeset/pre.json index c455c844d9..ef0d974af6 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -13,6 +13,7 @@ "neat-cats-cough", "pretty-feet-return", "pretty-gorillas-cough", + "rotten-carpets-joke", "sweet-turtles-hope", "ten-pandas-share", "ten-snakes-teach", diff --git a/.changeset/rotten-carpets-joke.md b/.changeset/rotten-carpets-joke.md new file mode 100644 index 0000000000..d9b17f1333 --- /dev/null +++ b/.changeset/rotten-carpets-joke.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": patch +"@appwrite.io/pink": patch +--- + +fixes for 1.4.x release diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index 1e74b0e33f..7735388640 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.7", - "@appwrite.io/pink-icons": "0.1.0-next.7", + "@appwrite.io/pink": "0.1.0-next.8", + "@appwrite.io/pink-icons": "0.1.0-next.8", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index f4036f7181..8bfb6e9e48 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.7", - "@appwrite.io/pink-icons": "0.1.0-next.7", + "@appwrite.io/pink": "0.1.0-next.8", + "@appwrite.io/pink-icons": "0.1.0-next.8", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json index 3afeabf1be..45316138cc 100644 --- a/apps/pink/public/search.json +++ b/apps/pink/public/search.json @@ -1 +1 @@ -{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,206],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,476],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,359],"45":[2,120],"46":[3,155],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.15],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Brandon @brandonroberts Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Brandon @kodumbeats Shmuel Fogel @fogelito Software Engineer at Appwrite Eldad Fux @eldadfux Appwrite's Founder Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Thomas G. Lopes @tglide Frontend Engineer at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Wess Cope @wess Software Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite achintya @achintya-7 Philipp Hausleiter @phaus Hardik Sachan @hardiksachan Steven Nguyen @stnguyen90 Software Engineer at Appwrite Christy Jacob @christyjacob4 Engineering Lead at Appwrite Aditya Rana @codingsamurai-10 Everly Precia Suresh @everly-gif Software Engineer at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Shimon Newman @shimonewman Full Stack Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jacob",{"1":{"44":1}}],["jake",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["347",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wess",{"1":{"44":2}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["wen",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":3}}],["engineer",{"1":{"44":10}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":3}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["lopes",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":1}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["hausleiter",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":1}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":2}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":8}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["shechter",{"1":{"44":1}}],["shmuel",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":4}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file +{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,206],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,476],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,359],"45":[2,120],"46":[3,155],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.15],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Rahul Singh @drph4nt0m Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Shimon Newman @shimonewman Full Stack Engineer at Appwrite Aditya Rana @codingsamurai-10 Jake Barnby @abnegate Engineering Lead at Appwrite Brandon @brandonroberts Steven Nguyen @stnguyen90 Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Christy Jacob @christyjacob4 Engineering Lead at Appwrite Hardik Sachan @hardiksachan Aditya Oberai @adityaoberai Developer Advocate at Appwrite Eldad Fux @eldadfux Appwrite's Founder Damodar Lohani @lohanidamodar Software Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Philipp Hausleiter @phaus Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite achintya @achintya-7 Carla @heyCarla Product Designer at Appwrite Shmuel Fogel @fogelito Software Engineer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jacob",{"1":{"44":1}}],["jake",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["347",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wen",{"1":{"44":1}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":3}}],["engineer",{"1":{"44":9}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":3}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":1}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parhi",{"1":{"44":1}}],["parnasa",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hausleiter",{"1":{"44":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["rahul",{"1":{"44":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":8}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shmuel",{"1":{"44":1}}],["shechter",{"1":{"44":1}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kristin",{"1":{"44":4}}],["kotlin",{"1":{"40":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["carla",{"1":{"44":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index c92c944029..cc33e526b9 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.8 + +### Patch Changes + +- fixes for 1.4.x release + ## 0.1.0-next.7 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 3cc08e0b1c..4e0b2e0753 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.7", + "version": "0.1.0-next.8", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 496f734a68..731e73b2d1 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @appwrite.io/pink +## 0.1.0-next.8 + +### Patch Changes + +- fixes for 1.4.x release +- Updated dependencies + - @appwrite.io/pink-icons@0.1.0-next.8 + ## 0.1.0-next.7 ### Minor Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 612724266b..183be062dd 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.7", + "version": "0.1.0-next.8", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.7", + "@appwrite.io/pink-icons": "0.1.0-next.8", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" }, From a73903f44b63987216f7adec9c0fd3a6a89dcdbf Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 28 Aug 2023 17:51:13 +0200 Subject: [PATCH 50/52] chore: update search --- apps/pink/public/search.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json index 45316138cc..53023f1e92 100644 --- a/apps/pink/public/search.json +++ b/apps/pink/public/search.json @@ -1 +1 @@ -{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,133],"1":[2,262],"2":[2,244],"3":[3,132],"4":[3,148],"5":[2,179],"6":[3,204],"7":[3,150],"8":[3,188],"9":[3,136],"10":[3,206],"11":[2,251],"12":[3,146],"13":[3,130],"14":[2,200],"15":[3,161],"16":[3,181],"17":[4,209],"18":[3,139],"19":[2,130],"20":[2,267],"21":[2,194],"22":[2,206],"23":[3,119],"24":[3,136],"25":[3,394],"26":[2,112],"27":[2,140],"28":[2,111],"29":[2,178],"30":[3,187],"31":[2,130],"32":[2,192],"33":[2,340],"34":[2,242],"35":[2,154],"36":[3,190],"37":[2,212],"38":[3,159],"39":[2,185],"40":[2,476],"41":[2,215],"42":[2,223],"43":[2,158],"44":[1,359],"45":[2,120],"46":[3,155],"47":[3,151],"48":[2,132],"49":[2,168],"50":[3,164],"51":[2,128],"52":[2,99],"53":[2,231],"54":[2,167],"55":[3,148],"56":[2,122],"57":[2,172],"58":[2,103],"59":[2,121]},"averageFieldLength":[2.4,183.15],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Rahul Singh @drph4nt0m Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Shimon Newman @shimonewman Full Stack Engineer at Appwrite Aditya Rana @codingsamurai-10 Jake Barnby @abnegate Engineering Lead at Appwrite Brandon @brandonroberts Steven Nguyen @stnguyen90 Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Christy Jacob @christyjacob4 Engineering Lead at Appwrite Hardik Sachan @hardiksachan Aditya Oberai @adityaoberai Developer Advocate at Appwrite Eldad Fux @eldadfux Appwrite's Founder Damodar Lohani @lohanidamodar Software Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Philipp Hausleiter @phaus Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite achintya @achintya-7 Carla @heyCarla Product Designer at Appwrite Shmuel Fogel @fogelito Software Engineer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K 347 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jacob",{"1":{"44":1}}],["jake",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["347",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wen",{"1":{"44":1}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineering",{"1":{"44":3}}],["engineer",{"1":{"44":9}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["abnegate",{"1":{"44":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":3}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":1}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":2}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parhi",{"1":{"44":1}}],["parnasa",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hausleiter",{"1":{"44":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["rahul",{"1":{"44":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["barnby",{"1":{"44":1}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":8}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shmuel",{"1":{"44":1}}],["shechter",{"1":{"44":1}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kristin",{"1":{"44":4}}],["kotlin",{"1":{"40":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["carla",{"1":{"44":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file +{"documentCount":60,"nextId":60,"documentIds":{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"6":6,"7":7,"8":8,"9":9,"10":10,"11":11,"12":12,"13":13,"14":14,"15":15,"16":16,"17":17,"18":18,"19":19,"20":20,"21":21,"22":22,"23":23,"24":24,"25":25,"26":26,"27":27,"28":28,"29":29,"30":30,"31":31,"32":32,"33":33,"34":34,"35":35,"36":36,"37":37,"38":38,"39":39,"40":40,"41":41,"42":42,"43":43,"44":44,"45":45,"46":46,"47":47,"48":48,"49":49,"50":50,"51":51,"52":52,"53":53,"54":54,"55":55,"56":56,"57":57,"58":58,"59":59},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[3,132],"1":[2,261],"2":[2,243],"3":[3,131],"4":[3,147],"5":[2,178],"6":[3,203],"7":[3,149],"8":[3,187],"9":[3,135],"10":[3,205],"11":[2,250],"12":[3,145],"13":[3,129],"14":[2,199],"15":[3,160],"16":[3,180],"17":[4,208],"18":[3,138],"19":[2,129],"20":[2,266],"21":[2,193],"22":[2,205],"23":[3,118],"24":[3,135],"25":[3,393],"26":[2,111],"27":[2,139],"28":[2,110],"29":[2,177],"30":[3,186],"31":[2,129],"32":[2,191],"33":[2,339],"34":[2,241],"35":[2,153],"36":[3,189],"37":[2,211],"38":[3,158],"39":[2,184],"40":[2,475],"41":[2,214],"42":[2,222],"43":[2,157],"44":[1,360],"45":[2,119],"46":[3,155],"47":[3,150],"48":[2,131],"49":[2,167],"50":[3,163],"51":[2,127],"52":[2,98],"53":[2,230],"54":[2,166],"55":[3,147],"56":[2,121],"57":[2,171],"58":[2,102],"59":[2,120]},"averageFieldLength":[2.4,182.2],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components action bar Action bar The floating action bar is a tool that appears on top of the main layout and enables action execution. Class Type action-bar Action Bar A class representing an action bar container action-bar-start Action Bar start side The content located on the start side of the action bar action-bar-end Action Bar end side The content located on the end side of the action bar Preview HTML 4 documents selected Cancel Delete selection 4 documents selected Cancel Delete selection \"> < section class = \" action-bar \" > < div class = \" action-bar-start u-flex u-gap-8 \" > < span class = \" inline-tag is-info \" > < span class = \" text \" > 4 </ span > </ span > < span class = \" text \" > < span class = \" is-not-mobile \" > documents </ span > selected </ span > </ div > < div class = \" action-bar-end u-flex u-gap-8 \" > < button class = \" button is-text \" > < span class = \" text \" > Cancel </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Delete < span class = \" is-not-mobile \" > selection </ span > </ span > </ button > </ div > </ section > tooltip alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/action-bar"},"1":{"title":"components - alert","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components alert Alert Alerts display both task-generated and system-generated messages. They can persist in the UI, or they can be dismissed by the user. Types In the Appwrite console, we use two types of alerts: Class Type alert Inline Inline alerts present additional information to the user related to content within a form or a body of text. alert is-standalone Standalone Alert Standalone is based Alert type Inline alert is-action Action Alert action is based Alert type Inline alert-sticky Sticky Sticky alerts are used to notify the user about a change in the system status, or about a recently performed action. States In the Appwrite console, we use five states of alerts: Class Type - Default Use this alert to provide general information to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-info Info Use this alert to provide additional information or tips to the user. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-info \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-info \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-info \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-success \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-success \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-success \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-warning \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-warning \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-warning \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. Preview HTML This is a default alert Some description about the alert sent to the user. Action 1 Action 2 This is a default alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 This is a standalone alert Some description about the alert sent to the user. Action 1 Action 2 \"> < section class = \" alert is-standalone is-danger \" > < div class = \" alert-grid \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a standalone alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > < div class = \" alert-buttons u-flex \" > < button class = \" button is-text \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ div > </ div > </ section > Preview HTML This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action This is a default alert Some description about the alert sent to the user. Secondary call to action Call to action \"> < section class = \" alert is-action is-danger \" > < div class = \" alert-grid \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < div class = \" alert-content \" > < h6 class = \" alert-title \" > This is a default alert </ h6 > < p class = \" alert-message \" > Some description about the alert sent to the user. </ p > </ div > < div class = \" alert-buttons u-flex u-gap-16 u-cross-child-center \" > < button class = \" button is-text is-full-width-mobile \" > < span class = \" text \" > Secondary call to action </ span > </ button > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Call to action </ span > </ button > </ div > </ div > </ section > Preview HTML Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 Alert Sticky Title Provide contextual feedback messages for typical user actions. Action 1 Action 2 \"> < section class = \" alert-sticky is-danger \" > < button class = \" button is-text is-only-icon \" style = \" --button-size : 1.5rem ; \" aria-label = \" close alert \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < div class = \" alert-sticky-image \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > </ div > < div class = \" alert-sticky-content \" > < h4 class = \" alert-sticky-title \" > Alert Sticky Title </ h4 > < p > Provide contextual feedback messages for typical user actions. </ p > </ div > < div class = \" alert-sticky-buttons u-flex \" > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 1 </ span > </ button > < button class = \" button is-text is-small \" > < span class = \" text \" > Action 2 </ span > </ button > </ div > </ section > Best Practice Alerts should contain at minimum a description to give the user enough information to help them understand the purpose of the alert and if something needs to be done. Where necessary, a title can provide context. Alert messaging should be consistent across the application. Do Use human-readable language in your alerts to explain the purpose of the alert, and provide a call to action where necessary. Don't Show overly generic or patronizing messages in your alerts. action bar avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"2":{"title":"components - avatar","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components avatar Avatar Avatars are a graphical representation of a person or object using an icon, image, or a string with initials. Class Type avatar Avatar A class representing an avatar Types Avatars have three different types: Class Type is-color-empty Empty The empty avatar can be used when an avatar cannot be shown yet, for example in pending mode. - Text A text avatar can display up to two letters, typically a user’s or team’s initials. - Icon One icon can be displayed in the center of an icon avatar. - Image Avatars can display a preview of a file or the user’s profile picture. Preview HTML aa aa \"> < div class = \" avatar is-color-empty \" > </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar \" > < span class = \" icon-pencil \" > </ span > </ div > < img class = \" avatar \" src = \" https://unsplash.it/40 \" alt = \" \" /> Sizes There are five different sizes used for avatars: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px is-size-x-large xlarge 64px Preview HTML aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-size-x-small \" > aa </ div > < div class = \" avatar is-size-small \" > aa </ div > < div class = \" avatar is-size-medium \" > aa </ div > < div class = \" avatar is-size-large \" > aa </ div > < div class = \" avatar is-size-x-large \" > aa </ div > Colors In the Appwrite console, apart from empty avatars and default gray-colored avatars, avatars can use five more colors: class Type is-color-empty Empty - Default is-color-orange Orange is-color-green Green is-color-blue Blue is-color-pink Pink is-color-red Red Preview HTML aa aa aa aa aa aa aa aa aa aa aa aa aa aa \"> < div class = \" avatar is-color-empty \" > aa </ div > < div class = \" avatar \" > aa </ div > < div class = \" avatar is-color-orange \" > aa </ div > < div class = \" avatar is-color-green \" > aa </ div > < div class = \" avatar is-color-blue \" > aa </ div > < div class = \" avatar is-color-pink \" > aa </ div > < div class = \" avatar is-color-red \" > aa </ div > Avatars Groups avatars-group Sizes Avatar groups have four different sizes: class Type is-size-x-small x-small 24px is-size-small small 32px - medium 40px is-size-large large 48px Preview HTML aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 aa aa aa +2 \"> < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-x-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-small \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > +2 </ div > </ li > </ ul > < ul class = \" avatars-group \" > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-blue \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-orange \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large is-color-green \" > aa </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar is-size-large \" > +2 </ div > </ li > </ ul > Avatar Group - icon with border Avatar groups have four different sizes: class Type Size is-with-border add border 1px Preview HTML \"> < ul class = \" avatars-group is-with-border \" > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-github \" aria-hidden = \" true \" aria-label = \" GitHub \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-gitlab \" aria-hidden = \" true \" aria-label = \" GitLab \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-bitBucket \" aria-hidden = \" true \" aria-label = \" BitBucket \" > </ span > </ div > </ li > < li class = \" avatars-group-item \" > < div class = \" avatar \" > < span class = \" icon-azure \" aria-hidden = \" true \" aria-label = \" Azure \" > </ span > </ div > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency in avatars: Do Use icons that have universal meanings and are easily recognizable. Don't Do not use Icons that are less recognizable and inconsistent. Do Use up to 2 uppercase letters and high color contrast Don't Do not use more than 2 letters or lowercase alert clickable list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"3":{"title":"components - clickable list","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components clickable list Clickable List Class Type clickable-list List Container Define clickable list clickable-list-item Item Container Define item clickable-list-button Button Clickable zone clickable-list-title Title clickable-list-title-sep Title seperator clickable-list-desc Description Preview HTML Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 Cameron Williamson | One of the most visually innovative films of all times 63f1ec68ac3515e4bc06 \"> < ul class = \" clickable-list \" > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > < li class = \" clickable-list-item \" > < a href = \" / \" class = \" clickable-list-button \" > < h5 class = \" clickable-list-title u-trim-1 \" > < span class = \" \" > Cameron Williamson </ span > < span class = \" clickable-list-title-sep \" > | </ span > < span class = \" \" > One of the most visually innovative films of all times </ span > </ h5 > < div class = \" clickable-list-desc \" > < p class = \" text u-margin-block-start-8 \" > 63f1ec68ac3515e4bc06 </ p > </ div > </ a > </ li > </ ul > avatar code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/clickable-list"},"4":{"title":"components - code panel","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components code panel Code Panel Code panels are used to create a focused view of a block of code, for example to display logs. Class Type code-panel Code Panel A class representing a code panel Preview HTML Raw data Scroll to top function = { firstName: “hello” } Raw data Scroll to top function = { firstName: “hello” } \"> < section class = \" code-panel u-min-width-100-percent theme-dark \" > < header class = \" code-panel-header \" > < div class = \" u-flex u-gap-16 u-margin-inline-start-auto \" > < button class = \" button is-text \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Raw data </ span > </ button > < button class = \" button is-secondary is-disabled \" > < span class = \" icon-arrow-narrow-up \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Scroll to top </ span > </ button > </ div > </ header > < code class = \" code-panel-content grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > </ section > Code Grid A grid of code lines, used inside the code panel. Preview HTML function = { firstName: “hello” } function = { firstName: “hello” } \"> < code class = \" grid-code \" > < div class = \" grid-code-line-number \" > </ div > < pre > function = { </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > firstName: “hello” </ pre > < div class = \" grid-code-line-number \" > </ div > < pre > } </ pre > </ code > clickable list collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"5":{"title":"components - collapsible","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components collapsible Collapsible Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow you to progressively display information as desired. Class Type collapsible Collapsible A class representing a collapsible Components Collapsible consist of five components: Class Type collapsible-item Item collapsible-wrapper Wrapper collapsible-button Button collapsible-button-optional Optional Label collapsible-content Content Preview HTML Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options one (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Options two (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Option three (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options one </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Options two </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < span class = \" text \" > Option three </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ p > </ div > </ details > </ li > </ ul > Collapsible with Checkboxes In the Appwrite console, collapsibles can contain checkboxes: Preview HTML Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Subheading A clear description of what will happen if you select this option Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. Advanced Options (optional) Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. \"> < ul class = \" collapsible u-width-full-line \" > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" open > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content u-margin-block-start-8 u-padding-inline-32 \" > < div class = \" form \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > < li class = \" form-item \" > < label class = \" choice-item \" > < input type = \" checkbox \" /> < div class = \" choice-item-content \" > < div class = \" choice-item-title \" > Subheading </ div > < p class = \" choice-item-paragraph \" > A clear description of what will happen if you select this option </ p > </ div > </ label > </ li > </ ul > </ div > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > < li class = \" collapsible-item \" > < details class = \" collapsible-wrapper \" > < summary class = \" collapsible-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Advanced Options </ span > < span class = \" collapsible-button-optional \" > (optional) </ span > < div class = \" icon \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ summary > < div class = \" collapsible-content \" > < p class = \" text u-margin-block-start-8 \" > Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired. </ p > </ div > </ details > </ li > </ ul > code panel drop list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/collapsible"},"6":{"title":"components - drop list","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components drop list Drop List Drop lists allow users to select one option from a popover menu. Class Type drop Drop List A class representing a drop list Components Drop Lists consist of four components: Class Type drop-wrapper Wrapper drop-section Section drop-list List drop-list-item List item Alignment In the Appwrite console, we use three alignments: Class Type - Block Start + Inline Start is-block-end Block End is-inline-end Inline End Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-inline-start : 6rem ; \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-block-end is-inline-end is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > Arrow Placement Use the classes below to control the arrow placement of the drop list: Class Type - Start is-arrow-center Center is-arrow-end End is-no-arrow No Arrow Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" grid-box u-cross-start \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-center \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-center \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem \" > < div class = \" u-flex u-main-end \" style = \" min-inline-size : 12rem \" > < button class = \" button is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-arrow-end \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ div > </ div > Drop List with Checkboxes In the Appwrite console, drop list can contain checkboxes: Preview HTML Text button Item 1 Item 2 Text button Item 1 Item 2 \"> < div class = \" drop-wrapper \" style = \" margin-block-start : 8rem ; \" > < div class = \" u-flex \" style = \" min-inline-size : 12rem \" > < button class = \" button is-full-width is-text \" > < span class = \" text \" > Text button </ span > </ button > < div class = \" drop is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 1 </ span > </ label > </ li > < li class = \" drop-list-item \" > < label class = \" drop-button \" > < input type = \" checkbox \" /> < span class = \" text \" > Item 2 </ span > </ label > </ li > </ ul > </ section > </ div > </ div > </ div > Best Practice We recommend using icons in cases where they have strong universal meaning and aid in the recognition of an action. Do Use icons only if they help the user understand the action. Don't To avoid confusion, do not use icons if you can’t think of a unique icon for each action. collapsible file preview Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/drop-list"},"7":{"title":"components - file preview","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components file preview File Preview A representation of content uploaded as an attachment. Class Type file-preview File Preview A class representing a file preview Types There are 2 types of content representation: Class Type is-no-file No Image Use in cases the uploaded file is not an image and a preview is not available. file-preview-content Content Use in cases an image (.png, .jpeg, .jpg, etc.) was uploaded. Image will appear as a thumbnail. Preview HTML Preview not available Preview not available \"> < a href = \" \" class = \" file-preview is-with-image \" aria-label = \" open file in new window \" > < div class = \" file-preview-image \" > < img src = \" https://unsplash.it/600 \" alt = \" \" /> </ div > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > </ div > </ div > </ a > < a href = \" \" class = \" file-preview is-no-file \" aria-label = \" file \" > < div class = \" file-preview-content \" > < div class = \" avatar \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < p > Preview not available </ p > </ div > </ a > drop list grid item Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/file-preview"},"8":{"title":"components - grid item","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components grid item Grid Item To simplify complex cards, a grid item is used to position elements. Class Type grid-item-1 Grid Item A class representing a grid item Positions There are four positions within a grid item: Class Type grid-item-1-start-start Top-Left grid-item-1-start-end Top-Right grid-item-1-end-start Bottom-Left grid-item-1-end-end Bottom-Right Preview HTML sub-header Header All services disabled Complete Interactive sub-header Header All services disabled Complete Interactive \"> < div class = \" card u-margin-auto \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > Multiple Grid Items Display multiple grid items by using the wrapper class grid-box : Preview HTML sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive sub-header Header All services disabled Interactive sub-header Header All services disabled Disabled Interactive \"> < ul class = \" grid-box \" style = \" --grid-gap : 2rem ; --grid-item-size : 18rem ; --grid-item-size-small-screens : 16rem ; \" > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > < li > < div class = \" card \" > < div class = \" grid-item-1 \" > < div class = \" grid-item-1-start-start \" > < div class = \" eyebrow-heading-3 \" > sub-header </ div > < h2 class = \" heading-level-6 u-margin-block-start-4 \" > Header </ h2 > < p class = \" u-flex u-cross-baseline u-gap-4 u-margin-block-start-16 \" > < span class = \" icon-exclamation u-color-text-warning \" aria-hidden = \" true \" > </ span > < span class = \" u-color-light-only-text-neutral-70 u-color-dark-only-text-neutral-50 \" > All services disabled </ span > </ p > </ div > < div class = \" grid-item-1-start-end \" > < div class = \" status \" > < button class = \" tag \" disabled > < span class = \" text \" > Disabled </ span > </ button > </ div > </ div > < div class = \" grid-item-1-end-start \" > < div class = \" u-flex u-gap-16 u-flex-wrap \" > < div class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ div > </ div > </ div > < div class = \" grid-item-1-end-end \" > < ul class = \" icons u-flex u-gap-8 \" > < li > < span class = \" icon-lock-closed u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Secure [OR] unsecure \" > </ span > </ li > < li > < span class = \" icon-shield-check u-opacity-20 \" aria-hidden = \" true \" aria-label = \" Safe [OR] unsafe \" > </ span > </ li > </ ul > </ div > </ div > </ div > </ li > </ ul > file preview inline loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"9":{"title":"components - inline loader","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components inline loader Inline loader Pending/Waiting Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Loading Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Failed Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-exclamation-circle u-color-text-danger \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Success Preview HTML Provide contextual message Button Provide contextual message Button \"> < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > Multiple Loader Boxes Preview HTML Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button Provide contextual message Button \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-clock u-color-text-offline \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < div class = \" loader \" style = \" --loader-size : 1rem ; --loader-border-size : 0.09375rem \" > </ div > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > < div class = \" box u-flex u-cross-center u-gap-16 \" style = \" --p-box-padding : 1rem 1.5rem ; \" > < span class = \" icon-check-circle u-color-text-success \" aria-hidden = \" true \" > </ span > < span class = \" u-trim u-stretch \" > Provide contextual message </ span > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > grid item label card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/inline-loader"},"10":{"title":"components - label card","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components label card Label Card A representation of content uploaded as an attachment. Plan Cards Preview HTML Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited Pro plan For projects you want to scale easily. $25/month + Add-ons Free plan For personal, passion projects. Totally free Disabled plan Unlimited \"> < ul class = \" u-flex u-flex-vertical u-gap-24 u-max-width-350 \" > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Pro plan </ h4 > < p class = \" u-color-text-gray \" > For projects you want to scale easily. < b > $25/month + Add-ons </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-cursor-pointer \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" /> < div class = \" u-flex u-flex-vertical u-gap-4 \" > < h4 class = \" body-text-2 u-bold \" > Free plan </ h4 > < p class = \" u-color-text-gray \" > For personal, passion projects. < b > Totally free </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > < li > < label class = \" card \" style = \" --card-padding : 1rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < div class = \" u-flex u-gap-16 \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" plan \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-4 u-opacity-50 \" > < h4 class = \" body-text-2 u-bold \" > Disabled plan </ h4 > < p class = \" u-color-text-gray \" > < b > Unlimited </ b > </ p > </ div > < span class = \" icon-lightning-bolt u-margin-inline-start-auto u-opacity-50 \" aria-hidden = \" true \" > </ span > </ div > </ label > </ li > </ ul > Region Cards Preview HTML Netherlands Notify me UK Canada US Germany India Netherlands Notify me UK Canada US Germany India \"> < ul class = \" grid-box \" style = \" --p-grid-item-size : 10em ; --p-grid-item-size-small-screens : 10rem ; \" > < li > < label class = \" card u-height-100-percent u-flex u-flex-vertical u-gap-16 \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" disabled /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/netherlands.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto u-opacity-20 \" alt = \" \" /> < p class = \" u-opacity-20 \" > Netherlands </ p > < button class = \" tag u-cross-child-center \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Notify me </ span > </ button > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/united-kingdom.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > UK </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/canada.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Canada </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/usa.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > US </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/germany.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > Germany </ p > </ div > </ label > </ li > < li > < label class = \" card is-allow-focus u-height-100-percent u-flex u-flex-vertical u-gap-16 u-cursor-pointer \" style = \" --card-padding : 0.5rem ; --card-border-radius : var ( --border-radius-small ) ; \" > < input class = \" is-small u-margin-block-start-2 \" type = \" radio \" name = \" country \" /> < div class = \" u-flex u-flex-vertical u-gap-12 u-text-center \" > < img src = \" /flags/india.svg \" width = \" 40 \" height = \" 30 \" class = \" u-margin-inline-auto \" alt = \" \" /> < p > India </ p > </ div > </ label > </ li > </ ul > inline loader modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/label-card"},"11":{"title":"components - modal","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components modal Modal Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed. Class Type modals Modal A class representing a modal Components Modals consist of five components: Class Type modal-form Form modal-header Header modal-title Title modal-content Content modal-footer Footer Preview HTML Open Modal Modal title Modal label text. Button Button Open Modal Modal title Modal label text. Button Button \"> < button class = \" button \" > < span > Open Modal </ span > </ button > < dialog class = \" modal \" id = \" dialog \" > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < div class = \" avatar is-color-orange is-medium \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > </ div > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > To open or close a modal, use the native <dialog> element’s show() , showModal() and close() methods. For more information, please refer to the MDN documentation . Sizes In the Appwrite console, we use three sizes of modals: class Type is-small Small - Medium is-big Big Preview HTML Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button Modal title Modal label text. Button Button \"> < dialog id = \" dialog4 \" class = \" modal is-small \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > < dialog id = \" dialog5 \" class = \" modal is-big \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ header > < div class = \" modal-content u-small \" > Modal label text. </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Separate Header State class which allow to seperate the header with border. class Type is-separate-header Add Border bottom to header of Modal Preview HTML Modal title Provide contextual feedback messages for complex modals. Label Label Button Button Modal title Provide contextual feedback messages for complex modals. Label Label Button Button \"> < dialog id = \" dialog6 \" class = \" modal is-big is-separate-header \" open > < form class = \" modal-form \" method = \" dialog \" > < header class = \" modal-header \" > < div class = \" u-flex u-main-space-between u-cross-center u-gap-16 \" > < h4 class = \" modal-title heading-level-5 \" > Modal title </ h4 > < button class = \" button is-text is-small is-only-icon u-cross-center u-margin-inline-start-auto \" aria-label = \" Close modal \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > < p > Provide contextual feedback messages for complex modals. </ p > </ header > < div class = \" modal-content \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ div > < div class = \" modal-footer \" > < div class = \" u-flex u-main-end u-gap-16 \" > < button class = \" button is-text \" > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Button </ span > </ button > </ div > </ div > </ form > </ dialog > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. label card progress bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"12":{"title":"components - progress bar","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components progress bar Progress Bar Preview HTML Bandwidth 50% 50.01GB 100GB Bandwidth 50% 50.01GB 100GB \"> < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > Full Progress Bar Options Preview HTML Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs Bandwidth 50% 50.01GB 100GB Storage 85% 50.01GB 100GB Compute 105% 3.50hrs 100hrs \"> < ul class = \" u-flex-vertical u-gap-24 \" > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-chart-bar \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Bandwidth </ span > </ h3 > < p class = \" u-medium u-bold \" > 50% </ p > </ div > < div class = \" progress-bar-container \" style = \" --graph-size : 50% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-folder \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Storage </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-warning \" > 85% </ p > </ div > < div class = \" progress-bar-container is-warning \" style = \" --graph-size : 85% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 50.01GB </ span > < span class = \" progress-bar-text-max \" > 100GB </ span > </ div > </ section > </ li > < li > < section class = \" progress-bar \" > < div class = \" progress-bar-top-line u-flex u-gap-8 u-main-space-between \" > < h3 class = \" body-text-1 u-flex u-cross-baseline u-gap-4 \" > < span class = \" icon-lightning-bolt \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Compute </ span > </ h3 > < p class = \" u-medium u-bold u-color-text-danger \" > 105% </ p > </ div > < div class = \" progress-bar-container is-danger \" style = \" --graph-size : 105% \" > </ div > < div class = \" u-flex u-gap-8 u-main-space-between u-cross-baseline \" > < span class = \" progress-bar-text-used \" > 3.50hrs </ span > < span class = \" progress-bar-text-max \" > 100hrs </ span > </ div > </ section > </ li > </ ul > modal secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/progress-bar"},"13":{"title":"components - secondary tabs","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components secondary tabs Secondary Tabs Secondary tabs allows users to switch between multiple sections of content within a single section/container. Class Type secondary-tabs Secondary Tabs A class representing secondary tabs Components Secondary Tabs consist of two components: Class Type secondary-tabs-item Item secondary-tabs-button Button Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Stretch Tabs Tabs stretch to fill all line: Class Behave is-stretch Stretch Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-stretch \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > Sizes Class Type is-large Large Used for big sections or to switch between code snippets Preview HTML Item Item Item Item Item Item \"> < ul class = \" secondary-tabs is-large \" > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" disabled > < span class = \" text \" > Item </ span > </ button > </ li > < li class = \" secondary-tabs-item \" > < button class = \" secondary-tabs-button \" > < span class = \" text \" > Item </ span > </ button > </ li > </ ul > progress bar tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"14":{"title":"components - tabs","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components tabs Tabs Tab navigation allows users to switch between multiple sections of content within a single screen. Class Type tabs Tabs A class representing tabs Components Tabs consist of four components: Class Type tabs-list List - tabs-item Item - tabs-button Button - tabs-button-scroll Scroll Used when there is not enough space to display all tabs, mostly on mobile devices. The tabs-button-scroll element can be hidden by adding u-hide class to it. Preview HTML Overview Sessions Activity Settings Overview Sessions Activity Settings \"> < div class = \" tabs \" style = \" width : 350px \" > < button class = \" tabs-button-scroll is-start \" aria-label = \" Show items in start side \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > </ button > < button class = \" tabs-button-scroll is-end \" aria-label = \" Show items in end side \" > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < ul class = \" tabs-list \" > < li class = \" tabs-item \" > < a class = \" tabs-button is-selected \" href = \" # \" > < span class = \" text \" > Overview </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Sessions </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Activity </ span > </ a > </ li > < li class = \" tabs-item \" > < a class = \" tabs-button \" href = \" # \" > < span class = \" text \" > Settings </ span > </ a > </ li > </ ul > </ div > Best Practice In most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If the amount of tabs exceeds the space that is available, adding a horizontal scrolling element is recommended. The right arrow should always be visible. If the user can scroll right, the arrow is active, otherwise the arrow should be disabled. The left arrow should only visible if the user can scroll left. secondary tabs toggle button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"15":{"title":"components - toggle button","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components toggle button Toggle Button Icon toggle is used to switch between two possible states displayed with icons. Class Type toggle-button Icon Toggle A class representing an icon toggle. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Components Icons Toggle inner parts are: Class Type toggle-button-list A class that wraps both toggle items toggle-button-item A class that wraps one toggle item toggle-button-element An icon button States To disable the toggle, add the following attribute: Attribute Type disabled Disabled Use whenever clicking on a toggle isn’t allowed. Preview HTML \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" disabled aria-label = \" List View \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" disabled aria-label = \" Grid View \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > Icon Toggle with Tooltip In the Appwrite console, we display a tooltip on hover, as shown below: Preview HTML List View Grid View List View Grid View \"> < div class = \" toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element tooltip \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > List View </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected tooltip \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup is-bottom is-center \" role = \" tooltip \" > Grid View </ span > </ button > </ li > </ ul > </ div > < br /> tabs upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/toggle-button"},"16":{"title":"components - upload box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload box Upload Box Upload Box displays the status of all uploaded files. Class Type upload-box Upload Box A class representing an upload box Components Upload Boxes consist of six components: Class Type upload-box-header Header upload-box-title Title upload-box-content Content upload-box-list List upload-box-item Item is-open Open State Preview HTML File Uploads 3 % hello.mp4 & % hello.mp4 & % hello.mp4 & File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 File Uploads 3 % hello.mp4 &amp; % hello.mp4 &amp; % hello.mp4 &amp; File Uploads 3 30% hello.mp4 pending 60% hello.mp4 failed hello.mp4 \"> < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > % </ span > </ div > < label for = \" file1 \" class = \" file-name \" > hello.mp4 </ label > < button class = \" upload-box-button \" aria-label = \" Uploading \" > < span class = \" icon \" > &amp; </ span > </ button > </ li > </ ul > </ div > </ section > < section class = \" upload-box u-width-full-line \" > < header class = \" upload-box-header \" > < h4 class = \" upload-box-title \" > < span class = \" text \" > File Uploads </ span > < span class = \" amount \" > 3 </ span > </ h4 > < button class = \" upload-box-button \" aria-label = \" toggle upload box \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > < button class = \" upload-box-button \" aria-label = \" close upload box \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ header > < div class = \" upload-box-content is-open \" > < ul class = \" upload-box-list \" > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 30% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-warning \" > pending </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 70 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" text \" > 60% </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < div class = \" tag is-danger \" > failed </ div > < button class = \" upload-box-button \" aria-label = \" cancel upload \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" upload-box-item \" > < div class = \" upload-image is-finished u-margin-inline-end-16 \" > < div class = \" progress \" style = \" --progress-value : 100 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > </ div > < label for = \" file1 \" class = \" file-name \" > < p class = \" text u-margin-block-start-8 \" > hello.mp4 </ p > </ label > < button class = \" icon-button u-color-text-success \" aria-label = \" Uploaded \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ section > Upload Loader Class Type upload-image Upload Loader Upload Loader displays the uploading progress of a specific file. Preview HTML \"> < div class = \" upload-image \" > < div class = \" progress \" style = \" --progress-value : 20 \" role = \" progressbar \" aria-valuenow = \" 20 \" aria-valuemin = \" 0 \" aria-valuemax = \" 100 \" > </ div > < span class = \" icon \" > </ span > </ div > toggle button upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"17":{"title":"components - upload file-box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components upload file box Upload File Box Upload File Box allows users to select and upload a file to a specific location. Class Type upload-file-box Upload File Box A class representing an upload file box Components Upload File Boxes consist of eight components: Class Type upload-file-box Partial container upload-file-box-image Image upload-file-box-title Title upload-file-box-info Info upload-file-box-list List upload-file-box-name File Name upload-file-box-size File Size is-hover-with-file Hover State Default Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > </ div > </ div > File Added Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > Error Preview HTML Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here Drag and drop files here to upload Upload a File Only PNGs accepted. Max file size: 10MB Choose a file pink-floyd-cover .png 4MB Display a contextual error message here \"> < div class = \" box is-border-dashed is-no-shadow u-padding-24 \" style = \" --box-border-radius : var ( --border-radius-xsmall ) ; \" > < div class = \" upload-file-box \" > < div class = \" upload-file-box-image \" > < span class = \" icon-upload \" aria-hidden = \" true \" > </ span > </ div > < div class = \" u-min-width-0 u-text-center \" > < h5 class = \" upload-file-box-title heading-level-7 u-inline \" > < span class = \" is-only-desktop \" > Drag and drop files here to upload </ span > < span class = \" is-not-desktop \" > Upload a File </ span > </ h5 > < button class = \" tooltip u-inline u-margin-inline-start-4 \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Only PNGs accepted. </ span > </ button > </ div > < div class = \" u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile \" > < p class = \" upload-file-box-info body-text-2 \" > Max file size: 10MB </ p > < button class = \" button is-secondary is-full-width-mobile \" > < span class = \" text \" > Choose a file </ span > </ button > </ div > < ul class = \" upload-file-box-list u-min-width-0 \" > < li class = \" u-flex u-cross-center u-min-width-0 \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" upload-file-box-name u-trim u-min-width-0 \" > pink-floyd-cover </ span > < span class = \" upload-file-box-name u-min-width-0 u-flex-shrink-0 \" > .png </ span > < span class = \" upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16 \" > 4MB </ span > < button type = \" button \" class = \" button is-text is-only-icon u-margin-inline-start-auto \" aria-label = \" remove file \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > </ div > < p class = \" helper u-color-text-danger u-margin-block-start-8 \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Display a contextual error message here </ span > </ p > upload box user profile Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-file-box"},"18":{"title":"components - user profile","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile components user profile User Profile User profile popover shows extra details about a user or a team. Class Type user-profile User Profile A class representing a user profile Components User profiles consist of three components: Class Type user-profile-info Info user-profile-sep Separator user-profile-empty-column Empty Column Preview HTML UN User Name User ID Extra description UN User Name User ID Extra description \"> < div class = \" card \" > < div class = \" user-profile \" > < span class = \" avatar \" > UN </ span > < span class = \" user-profile-info \" > < span class = \" name \" > User Name </ span > < div class = \" interactive-text-output u-padding-inline-0 \" > < span class = \" text \" > User ID </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ span > < span class = \" user-profile-sep \" > </ span > < span class = \" user-profile-empty-column \" > </ span > < span class = \" user-profile-info \" > < span class = \" text \" > Extra description </ span > </ span > </ div > </ div > upload file box border radius Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/user-profile"},"19":{"title":"elements - box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements box Box Boxes apply spacing, a border, and rounded corners to content areas. Class Type box Box A class representing a box Preview HTML Box element Box element \"> < div class = \" box \" > Box element </ div > Multiple Boxes You stack multiple boxes on each other by using the boxes-wrapper class. Middle boxes will appear without a border radius. Preview HTML Top Box Middle Box Middle Box Bottom Box Top Box Middle Box Middle Box Bottom Box \"> < div class = \" boxes-wrapper \" > < div class = \" box u-flex u-gap-16 u-cross-center \" > Top Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Middle Box </ div > < div class = \" box u-flex u-gap-16 u-cross-center \" > Bottom Box </ div > </ div > pagination button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/box"},"20":{"title":"elements - button","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements button Button Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it. Class Type button Button A class representing a button Types In the Appwrite console, we use four types of buttons: Class Type - Primary We recommend you use primary buttons for the principal call to action in a page or screen. is-secondary Secondary Secondary buttons can be used in conjunction with a primary button. As part of a pair with primary button, a secondary button will often perform a negative action, such as “Cancel”. is-text Text Text buttons can be used to complete an action inside another component. is-only-icon Icon Icon button with rounded corners Preview HTML Primary Secondary Text Primary Secondary Text \"> < button class = \" button \" > < span class = \" text \" > Primary </ span > </ button > < button class = \" button is-secondary \" > < span class = \" text \" > Secondary </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > Text </ span > </ button > < button class = \" button is-only-icon \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" style = \" --button-size : 2.5rem ; \" aria-label = \" Remove item \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > Sizes There are two sizes of buttons; large and medium. Each size has its own purpose, so make sure you use every size correctly. class Type - Medium The most commonly used size (default size). Pink Design’s input fields are 40px tall, which is why we use medium size buttons next to input fields. is-big Large Use in a case of call to action that should stand out and have a lot of attention, mostly used on landing pages. Preview HTML Medium Large Medium Large \"> < button class = \" button \" > < span class = \" text \" > Medium </ span > </ button > < button class = \" button is-big \" > < span class = \" text \" > Large </ span > </ button > Buttons With Icons Use icons in cases where they have a strong universal meaning and aid in the recognition of a button. In Appwrite, the icon is placed on the left by default. Preview HTML Button Button Button Button Button Button Button Button Button Button Button Button Button Button \"> < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" text \" > Button </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-download \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > < button class = \" button is-secondary \" aria-label = \" Add new item \" > < span class = \" icon-external-link \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Button </ span > </ button > Buttons List Preview HTML Button 1 Button 2 Button 3 Button 4 Button 1 Button 2 Button 3 Button 4 \"> < ul class = \" buttons-list u-margin-auto \" > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 1 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 2 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 3 </ span > </ button > </ li > < li class = \" buttons-list-item \" > < button class = \" button is-text \" > < span class = \" text \" > Button 4 </ span > </ button > </ li > </ ul > Best Practice Tips to keep in mind to increase consistency and readability in buttons: Do Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. Don't Avoid using specific icons, uppercase in every word and long sentences. box card Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/button"},"21":{"title":"elements - card","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements card Card Cards are used to group related content in a single container. This can include text, images, lists, buttons, and other elements. Class Type card Card A class representing a card. Styles In the Appwrite console, we use two styles of card borders: Class Type - Solid Solid borders should be the default for cards. is-border-dashed Dashed Use dashed borders only for empty state cards. Special state Class Type is-allow-focus focus If card as this class, is something inside focus, the card will be focus as well (keyboared focus) Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > Focus label card Play with the tab key to see focus of card according to the focus of checkbox. In components section you can see more complex demo of “Label Card”. Preview HTML some text some text some text some text \"> < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > < label class = \" card is-allow-focus u-flex u-gap-8 \" > < input type = \" checkbox \" /> < span class = \" text \" > some text </ span > </ label > Best Practice Cards are used to show empty states, to update or delete objects and to display overviews. A card can include avatars, buttons, illustrations, lists, tags and text. For example: Create your first file to get started. Need a hand? Check out our documentation. Documentation Create file button checkbox Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/card"},"22":{"title":"elements - checkbox","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements checkbox Checkbox Checkboxes allow users to select one or more items from a set. Preview HTML \"> < input type = \" checkbox \" /> < input type = \" checkbox \" checked = \" true \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state States To disable a checkbox, add the following class: Attribute Type disabled Disabled Use whenever clicking on a checkbox isn’t allowed. Preview HTML \"> < input type = \" checkbox \" disabled /> < input type = \" checkbox \" checked = \" true \" disabled /> < input type = \" checkbox \" disabled class = \" js-indeterminate \" /> < script > Array . from ( document . getElementsByClassName ( 'js-indeterminate' ) ) . forEach ( el => el . indeterminate = true ) </ script > Note: Javascript is used to implement the indeterminate state Sizes There are three sizes of checkboxes; small, medium and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" is-small \" /> < input type = \" checkbox \" /> < input type = \" checkbox \" class = \" is-large \" /> < br /> < input type = \" checkbox \" class = \" is-small js-indeterminate \" /> < input type = \" checkbox \" class = \" js-indeterminate \" /> < input type = \" checkbox \" class = \" is-large js-indeterminate \" /> Note: Javascript is used to implement the indeterminate state Best Practice We recommend checkboxes next to labels should have at minimum 8px of space in between for legibility. Checkboxes should be aligned to the center of a single line of text. If there are multiple lines in a label should be aligned to the center of the first line in the label. Checkboxes allow users to select multiple items from a set. Do Use checkboxes to allow users select one or more options from a list with related items. Don't Do not use switches; they imply enabling/disabling an item and take up more visual space. card inline code Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/checkbox"},"23":{"title":"elements - inline code","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline code Inline Code Inline code snippets can be used within text to create visual emphasis on code snippets, or indicate text that can be copied verbatim like file names and IDs. Class Type inline-code Inline Code A class representing an inline code Preview HTML keyword or part of a code keyword or part of a code \"> < code class = \" inline-code \" > keyword or part of a code </ code > checkbox inline tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"24":{"title":"elements - inline tag","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements inline tag Inline Tag An inline tag is used as a number label inside a button. Some possible use cases are indicating the number of columns in a table or the number of related items. Class Type inline-tag Inline Tag A class representing an Inline Tag Preview HTML 4 4 \"> < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > Color State Class Type is-info info state blue color for inline tag Preview HTML 2 2 \"> < span class = \" inline-tag is-info \" > < span class = \" text \" > 2 </ span > </ span > Usage with Buttons Incorporate the inline tag into secondary buttons or text buttons by doing the following: Preview HTML button 4 button 4 button 4 button 4 button 4 button 4 button 4 button 4 \"> < button class = \" button is-secondary \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-secondary \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > < button class = \" button is-text \" disabled > < span class = \" text \" > button </ span > < span class = \" inline-tag \" > < span class = \" text \" > 4 </ span > </ span > </ button > inline code input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-tag"},"25":{"title":"elements - input field","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements input field Input Field Input fields are an easily discoverable, efficient, and accessible way for users to input information. They typically appear in forms or dialogue modals. Types There are a few different types of input field that the user can interact with: Input Type Type text Text Default text input Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type text Search Used to input one or more terms to conduct a search. Preview HTML \"> < div class = \" input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 \" > < input type = \" search \" placeholder = \" Search \" /> < div class = \" icon-search \" aria-hidden = \" true \" > </ div > < button class = \" button is-text is-only-icon \" aria-label = \" Clear search \" style = \" --button-size : 1.5rem ; \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > Input Type Type password Password Used to input passwords or other sensitive data. - Input with two buttons Displays up to two trailing icons to provide additional functionality to the text (for example: clear, copy, hide, edit). Preview HTML Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" password \" class = \" input-text \" placeholder = \" Placeholder \" /> < button class = \" show-password-button \" aria-label = \" show password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" show password / hide password \" type = \" button \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" type = \" button \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ li > </ ul > </ form > Input Type Type numeric Numeric Used for numeric input - Input with two buttons Display with two buttons Preview HTML Label Disabled Label Disabled \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > < li class = \" form-item \" > < label class = \" label \" > Disabled </ label > < div class = \" input-text-wrapper u-width-full-line u-max-width-500 \" style = \" --amount-of-buttons : 1 ; \" > < input type = \" number \" class = \" input-text u-remove-input-number-buttons \" placeholder = \" Placeholder \" disabled /> < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-start-4 u-inset-inline-end-8 \" aria-label = \" Up value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-up u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text u-height-auto u-padding-0 u-position-absolute u-inset-block-end-4 u-inset-inline-end-8 \" aria-label = \" Down value of numeric field \" type = \" button \" disabled > < span class = \" icon-cheveron-down u-line-height-0-7 \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ form > Input Type Type file Upload file Used in case upload a file is necessary. Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" file \" name = \" file \" id = \" file-file \" size = \" 1 \" /> </ li > </ ul > </ form > Input Type Type text Multi Select Used to create ‘tags’ when the user types in the input field. Preview HTML Label role Label role \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" tags-input \" > < div class = \" tags \" > < ul class = \" tags-list \" > < li class = \" tags-item \" > < div class = \" input-tag \" > < span class = \" tag-text \" > role < div > </ div > </ span > < button class = \" input-tag-delete-button \" aria-label = \" delete all:role tag \" type = \" button \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > </ div > </ li > </ ul > </ div > < input type = \" text \" class = \" tags-input-text \" placeholder = \" Placeholder \" /> </ div > </ li > </ ul > </ form > Input Type Type select Dropdown Allows users to choose one option from a list of values. Preview HTML Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Label Select option Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" select u-width-full-line \" > < select name = \" pets \" id = \" pet-select \" > < option value = \" \" > Select option </ option > < option value = \" 1 \" > Option 1 </ option > < option value = \" 2 \" > Option 2 </ option > < option value = \" 3 \" > Option 3 </ option > < option value = \" 4 \" > Option 4 </ option > < option value = \" 5 \" > Option 5 </ option > < option value = \" 6 \" > Option 6 </ option > </ select > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ li > </ ul > </ form > Custom Select Dropdown is made with drop-list . To hide items use the u-hide class. Preview HTML Label Placeholder Item 1 Item 2 Label Placeholder Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < button class = \" input-text-wrapper u-width-full-line \" type = \" button \" style = \" --amount-of-buttons : 1 \" > < span class = \" input-text \" > < span class = \" text \" > Placeholder </ span > </ span > < div class = \" options-list is-no-separator \" > < div class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ div > </ div > </ button > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Custom Select with Search Dropdown is made with drop-list . To hide items use the u-hide class. To adjust arrow upl add the is-open class, where the element with custom-select class. To show/hide the button clear field, toggle the u-hide class. Preview HTML Label Item 1 Item 2 Label Item 1 Item 2 \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 1 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 1 </ span > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < span class = \" text \" > Item 2 </ span > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com Label 63f1efg667fg6fg67fc68ac3515e4bc06 Bessie, Cooper, bessiecooper@gmail.com , bessiecooper.com 63f1efg6673515e4bc06 Baseball, Football, ball@gmail.com , playingball.com \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select is-open \" > < div class = \" input-text-wrapper \" style = \" --amount-of-buttons : 2 \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" value = \" bessie \" /> < div class = \" options-list \" > < button class = \" options-list-button \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg667fg6fg67fc68ac3515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Bessie, Cooper, < a class = \" link \" href = \" mailto:bessiecooper@gmail.com \" > bessiecooper@gmail.com </ a > , bessiecooper.com </ span > </ div > </ button > </ li > < li class = \" drop-list-item \" > < button class = \" drop-button \" > < div class = \" u-flex u-cross-baseline u-gap-12 \" > < span class = \" u-width-140 u-flex-shrink-0 u-text-start u-trim-start u-x-small u-color-text-gray \" > 63f1efg6673515e4bc06 </ span > < span class = \" u-flex-1 u-trim-1 \" > Baseball, Football, < a class = \" link \" href = \" mailto:ball@gmail.com \" > ball@gmail.com </ a > , playingball.com </ span > </ div > </ button > </ li > </ ul > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Preview HTML Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search Label Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ There are no documents that match your search. Clear Search \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < div class = \" custom-select \" > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text \" placeholder = \" Placeholder \" /> < div class = \" options-list \" > < button class = \" options-list-button u-hide \" aria-label = \" clear field \" > < span class = \" icon-x \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" > < span class = \" icon-cheveron-down \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" drop is-block-end is-no-arrow \" > < section class = \" drop-section \" > < div class = \" u-flex u-flex-vertical u-cross-center \" > < div > < img class = \" u-only-light \" src = \" /empty-state-light.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> < img class = \" u-only-dark \" src = \" /empty-state-dark.svg \" alt = \" \" aria-hidden = \" true \" height = \" 120 \" width = \" 128 \" /> </ div > < div class = \" u-text-center u-margin-block-start-4 \" > < h2 class = \" body-text-2 u-bold u-trim-1 \" > < span class = \" text \" > Sorry we couldn’t find ‘63f1ec68ac3515e4bc0663f1’ </ span > </ h2 > < p class = \" text \" > There are no documents that match your search. </ p > </ div > < div class = \" u-flex u-gap-16 u-main-center u-margin-block-start-16 \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" text \" > Clear Search </ span > </ button > </ div > </ div > </ section > </ div > </ div > </ li > </ ul > < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> < br /> </ form > Input Type Type textarea Textarea For inputs containing more than two lines of text (for example: articles, blog posts, user feedback). Preview HTML Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < textarea class = \" input-text \" placeholder = \" Type here... \" > </ textarea > </ li > </ ul > </ form > States States can be applied to all inputs fields: Attribute Type - Default Default text input disabled Disabled Used in case the user can’t interact with an input field readonly Readonly Used in case the user can’t change the content in the input field. Sometimes in read-only fields there is a copy button. Preview HTML Label Label Label Label Label Label \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" disabled /> </ li > < li class = \" form-item \" > < label class = \" label \" > Label </ label > < input type = \" text \" class = \" input-text \" value = \" placeholder text \" readonly /> </ li > </ ul > </ form > Helper Text Helper text provides information and feedback about what to enter in an input. Use the helper class to add helper text below an input field. Class Type - Default Used to provide information about what should be entered into the input field. u-success Success An indication that the information entered into a field is valid/correct. u-warning Warning Used underneath the input field when the user provides incorrect information. This message should provide contextual instructions on how to fix the error. u-error Error An indication that the information entered into a field is invalid/incorrect. Preview HTML This is a helper This is success This is a warning This is an error This is a helper This is success This is a warning This is an error \"> < p class = \" helper \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a helper </ span > </ p > < p class = \" helper u-color-text-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is success </ span > </ p > < p class = \" helper u-color-text-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > < p class = \" helper u-color-text-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is an error </ span > </ p > Input with All Parameters Applied Preview HTML Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning Label (optional) Set variables or secret keys that will be passed as env vars to your function at runtime. 4 20 NULL This is a warning \"> < form class = \" form u-width-full-line u-max-width-500 \" > < ul class = \" form-list \" > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-56 \" placeholder = \" placeholder text \" /> < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < input type = \" text \" class = \" input-text is-warning u-padding-inline-end-120 \" placeholder = \" placeholder text \" /> < ul class = \" buttons-list u-cross-center u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12 \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > < li class = \" form-item \" > < label class = \" label is-required \" > Label </ label > < span class = \" optional \" > (optional) </ span > < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys that will be passed as env vars to your function at runtime. </ p > </ span > </ button > < div class = \" input-text-wrapper \" > < textarea class = \" input-text is-warning u-padding-block-end-32 \" placeholder = \" Type here... \" style = \" --amount-of-buttons : 0.25 ; \" > </ textarea > < ul class = \" buttons-list u-cross-center u-position-absolute d u-inset-block-end-1 u-inset-inline-end-1 u-padding-block-8 u-padding-inline-12 \" style = \" border-end-end-radius : 0.0625rem ; \" > < li class = \" buttons-list-item \" > < span class = \" text-counter \" > < span class = \" text-counter-count \" > 4 </ span > < span class = \" text-counter-separator \" > </ span > < span class = \" text-counter-max \" > 20 </ span > </ span > </ li > < li class = \" buttons-list-item u-margin-inline-start-8 \" > < label class = \" u-flex u-cross-center u-gap-8 u-margin-inline-start-8 \" > < input type = \" checkbox \" class = \" is-small \" /> < span class = \" eyebrow-heading-3 u-x-small u-color-text-gray \" > NULL </ span > </ label > </ li > </ ul > </ div > < p class = \" helper u-color-text-warning u-margin-block-start-8 \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > This is a warning </ span > </ p > </ li > </ ul > </ form > inline tag keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"26":{"title":"elements - keyboard","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements keyboard Keyboard This element displays keyboard shortcuts. Class Type kbd Keyboard shortcuts A class representing a keyboard element Preview HTML To open search box please press ⌘ + K buttons. To open search box please press ⌘ + K buttons. \"> < p class = \" text u-margin-block-start-8 \" > To open search box please press < kbd class = \" kbd \" > ⌘ </ kbd > + < kbd class = \" kbd \" > K </ kbd > buttons. </ p > input field list Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/keyboard"},"27":{"title":"elements - list","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements list List A list is a vertical grouping of related content. Class Type list List A class representing a list Types In the Appwrite console we use two types of list items: Class Type list-item List Item Use in cases list items begin with an icon numeric-list-item Numeric List Item Use in cases list items begin with a number Preview HTML List Item List Item (link) List Item (button) List Item List Item (link) List Item (button) \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < a href = \" # \" class = \" link \" > < span class = \" text \" > List Item (link) </ span > </ a > </ li > < li class = \" list-item \" > < span class = \" icon-arrow-circle-right \" aria-hidden = \" true \" > </ span > < button class = \" link \" > < span class = \" text \" > List Item (button) </ span > </ button > </ li > </ ul > Preview HTML List Item List Item List Item List Item List Item List Item \"> < ul class = \" list \" > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > < li class = \" list-item \" > < span class = \" icon-check \" aria-hidden = \" true \" > </ span > < span class = \" text \" > List Item </ span > </ li > </ ul > Preview HTML Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item Numeric List Item \"> < ol class = \" numeric-list \" > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > < p class = \" text u-margin-block-start-8 \" > Numeric List Item </ p > </ span > </ li > < li class = \" numeric-list-item \" > < span class = \" text \" > Numeric List Item </ span > </ li > </ ol > keyboard loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"28":{"title":"elements - loader","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements loader Loader Use loaders to indicate to users that something is in progress and still needs to complete. Class Type loader Loader A class representing a loader Preview HTML \"> < div class = \" loader \" > </ div > Small Loader Preview HTML \"> < div class = \" loader is-small \" > </ div > list output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/loader"},"29":{"title":"elements - output","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements output Output Interactive text outputs allow users to interact with the displayed text. Copying and hiding are the two most common actions in this element. Class Type interactive-text-output Output A class representing an interactive text output Components Interactive text output contains buttons: Class Type interactive-text-output-buttons Button/s Wrapper interactive-text-output-button Button Buttons can be hidden (will appear on hover) or displayed next to the content. Preview HTML visible text •••••• visible text •••••• \"> < div class = \" interactive-text-output \" > < span class = \" text u-break-word \" > visible text </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > Buttons On Top Preview HTML This is the visible text which is very long This is the visible text which is very long \"> < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-width-200 \" > < span class = \" text u-trim-start \" > This is the visible text which is very long </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > The following style can be applied to textareas using the is-textarea class: Preview HTML 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi \"> < div class = \" interactive-text-output is-textarea \" > < span class = \" text u-line-height-1-5 u-break-word \" > < p class = \" text u-margin-block-start-8 \" > 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73 c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi 13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi </ p > </ span > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > loader radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"30":{"title":"elements - radio button","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements radio button Radio Button Radio buttons allow users to select one item from a set. Preview HTML \"> < input type = \" radio \" name = \" radio-1 \" /> < input type = \" radio \" name = \" radio-1 \" checked = \" true \" /> States To disable a radio button, add the following class: Attribute Type disabled Disabled Use whenever clicking on a radio button isn’t allowed. Preview HTML \"> < input type = \" radio \" name = \" radio-2 \" disabled /> < input type = \" radio \" name = \" radio-2 \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" radio \" class = \" is-small \" name = \" size \" /> < input type = \" radio \" name = \" size \" checked = \" true \" /> < input type = \" radio \" class = \" is-large \" name = \" size \" /> Best Practice Radio buttons next to labels should have at minimum 8px of space in between for legibility. Radio buttons should be aligned to the center of a single line of text. If there are multiple lines in a label, the radio button should be aligned to the center of the first line in the label. Radio buttons refer to a single item and allow selecting only one item from a list. Do Use radio buttons to allow users make a single selection from a list of options. Don't Do not use checkboxes when only one item can be selected. output status Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/radio-button"},"31":{"title":"elements - status","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements status Status Status indicates the current state of a multi-state process. Class Type status Status A class representing a status Components Status contains an icon: Class Type status-icon Icon States There are a few different states available for a status: Class Type - Default is-warning Waiting is-pending Pending is-failed Failed is-complete Complete is-processing Processing Preview HTML Ready Waiting Pending Failed Complete Processing Ready Waiting Pending Failed Complete Processing \"> < div class = \" status \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Ready </ span > </ div > < div class = \" status is-waiting \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Waiting </ span > </ div > < div class = \" status is-pending \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Pending </ span > </ div > < div class = \" status is-failed \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Failed </ span > </ div > < div class = \" status is-complete \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Complete </ span > </ div > < div class = \" status is-processing \" > < span class = \" status-icon \" > </ span > < span class = \" text \" > Processing </ span > </ div > radio button switch Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/status"},"32":{"title":"elements - switch","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements switch Switch Switches are used to quickly toggle between two possible states. They are commonly used for “on/off” switches. Class Type switch Switch A class representing a switch Preview HTML \"> < input type = \" checkbox \" class = \" switch \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> States To disable a switch, add the following class: Attribute Type disabled Disabled Use whenever clicking on a switch isn’t allowed. Preview HTML \"> < input type = \" checkbox \" class = \" switch \" disabled /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" disabled /> Sizes There are three sizes of selectors: small, medium, and large. Each size has its own purpose, so make sure you use every size correctly. class Type is-small Small - Medium is-large Large Preview HTML \"> < input type = \" checkbox \" class = \" switch is-small \" /> < input type = \" checkbox \" class = \" switch \" checked = \" true \" /> < input type = \" checkbox \" class = \" switch is-large \" /> Best Practice Switches next to labels should have at minimum 8px of space in between for legibility. Switches should be aligned to the center of a single line of text. If there are multiple lines in a label, switches should be aligned to the center of the first line in the label. Switches refer to a single item and allow turning an item on or off. Do If each item in a set can be independently controlled, use switches to allow on or off options. Don't Do not use radio buttons to allow on or off options. status table Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/switch"},"33":{"title":"elements - table","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements table Table Tables are used throughout the Appwrite console to organize and display data. Class Type table Table A class representing a table Components Tables consist of five components: Class Type table-thead Head table-thead-col Head Column table-tbody Body table-row Row table-col Column Styles In the Appwrite console, we use three styles of tables: Class Type - Default Table The default table can have two or more columns. If the table width exceeds the size of the user’s screen, it should scroll horizontally. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-selected-columns-mobile \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-table-row-medium-size Narrow rows Change heght from 72px to 54px Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < table class = \" table is-table-row-medium-size \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ th > < th class = \" table-thead-col is-only-desktop \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/41 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col u-overflow-visible \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > Mobile illustration - dark.png </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/442 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ td > < td class = \" table-col is-only-desktop \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ td > < td class = \" table-col \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ td > </ tr > </ tbody > </ table > Class Type is-remove-outer-styles Without Outer Styles Secondary table - in the Appwrite console used mostly inside a card or a wizard. Preview HTML Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable Name Value Lorem Numquam exercitationem. Ipsum •••••• Create variable \"> < section class = \" card \" > < table class = \" table is-remove-outer-styles \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" > < span class = \" eyebrow-heading-3 \" > Value </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 40 \" > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Lorem </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > Numquam exercitationem. </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye-off \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Ipsum </ span > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" value \" > < div class = \" interactive-text-output \" > < span class = \" text \" > •••••• </ span > < div class = \" u-flex u-cross-child-start u-gap-8 \" > < button class = \" interactive-text-output-button \" aria-label = \" show hidden text \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" interactive-text-output-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ td > < td class = \" table-col u-overflow-visible \" data-title = \" options \" > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ td > </ tr > </ tbody > </ table > < div class = \" u-flex u-margin-block-start-16 \" > < button class = \" button is-text u-padding-inline-0 \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create variable </ span > </ button > </ div > </ section > Class Type is-sticky-scroll Inner Scroll Used in case the content of a table exceeds the maximum width and the first column should be sticky. Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Preview HTML Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 Collection ID Name Updated Created 637a40ba7a703e3936e1 Movie May 3, 2023, 17:32 May 3, 2023, 16:59 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table is-sticky-scroll \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cross-center u-cursor-pointer \" aria-label = \" select/deselect all visible item on table \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" /> </ div > </ label > < span class = \" eyebrow-heading-3 \" > Collection ID </ span > </ div > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" \" > < span class = \" eyebrow-heading-3 \" > Updated </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Collection ID \" > < div class = \" u-flex u-cross-center u-gap-16 \" > < label class = \" u-flex u-cursor-pointer \" > < div class = \" u-padding-16 u-margin-16-negative \" > < input type = \" checkbox \" aria-label = \" select item that start in: 637a4 \" /> </ div > </ label > < div class = \" interactive-text-output is-buttons-on-top u-padding-inline-end-12 u-max-width-250 \" > < div class = \" text u-trim \" > 637a40ba7a703e3936e1 </ div > < div class = \" interactive-text-output-buttons \" > < button class = \" interactive-text-output-button is-hidden \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ div > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Movie </ span > </ td > < td class = \" table-col \" data-title = \" Updated \" > < time class = \" text \" > May 3, 2023, 17:32 </ time > </ td > < td class = \" table-col \" data-title = \" Created \" > < time class = \" text \" > May 3, 2023, 16:59 </ time > </ td > </ tr > </ tbody > </ table > </ div > </ div > Scrolling tables without a sticky column should be wrapped by <div class="table-with-scroll"> and <div class="table-wrapper"> . Preview HTML Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 Document ID Name Year Stars[] Directions[] Duration[] …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 …y-first-collection Hustle 2022 Adam Sandler Jeremiah Zagar 1.57 \"> < div class = \" table-with-scroll \" > < div class = \" table-wrapper \" > < table class = \" table \" > < thead class = \" table-thead \" > < tr class = \" table-row \" > < th class = \" table-thead-col \" style = \" --p-col-width : 230 \" > < span class = \" eyebrow-heading-3 \" > Document ID </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Name </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Year </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Stars[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Directions[] </ span > </ th > < th class = \" table-thead-col \" style = \" --p-col-width : 185 \" > < span class = \" eyebrow-heading-3 \" > Duration[] </ span > </ th > </ tr > </ thead > < tbody class = \" table-tbody \" > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > < tr class = \" table-row \" > < td class = \" table-col \" data-title = \" Document ID \" > < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > …y-first-collection </ span > </ button > </ td > < td class = \" table-col \" data-title = \" Name \" > < span class = \" text \" > Hustle </ span > </ td > < td class = \" table-col \" data-title = \" Year \" > < span class = \" text \" > 2022 </ span > </ td > < td class = \" table-col \" data-title = \" Stars[] \" > < span class = \" text \" > Adam Sandler </ span > </ td > < td class = \" table-col \" data-title = \" Directors[] \" > < span class = \" text \" > Jeremiah Zagar </ span > </ td > < td class = \" table-col \" data-title = \" Duration[] \" > < span class = \" text \" > 1.57 </ span > </ td > </ tr > </ tbody > </ table > </ div > </ div > Clickable Row Tables Clickable rows allow you to use rows as links. They are useful when you want to maintain native browser behavior for links, like opening in a new tab. Preview HTML Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Filename Type Size Created airport.jpg image/jpeg 336.6 kB 11 Mar 2022 Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022 airport.jpg image/jpeg 336.6 kB 11 Mar 2022 \"> < div class = \" table \" role = \" table \" > < div class = \" table-thead \" role = \" rowheader \" > < div class = \" table-row \" role = \" row \" > < div class = \" table-thead-col \" role = \" columnheader \" > < span class = \" eyebrow-heading-3 \" > Filename </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 140 \" > < span class = \" eyebrow-heading-3 \" > Type </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 100 \" > < span class = \" eyebrow-heading-3 \" > Size </ span > </ div > < div class = \" table-thead-col is-only-desktop \" role = \" columnheader \" style = \" --p-col-width : 120 \" > < span class = \" eyebrow-heading-3 \" > Created </ span > </ div > < div class = \" table-thead-col \" role = \" columnheader \" style = \" --p-col-width : 40 \" > </ div > </ div > </ div > < div class = \" table-tbody \" role = \" rowgroup \" > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/40 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > < p class = \" text u-margin-block-start-8 \" > Mobile illustration - dark.png </ p > </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > < a class = \" table-row \" role = \" row \" href = \" # \" > < div class = \" table-col \" role = \" cell \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" image \" > < img class = \" avatar \" width = \" 32 \" height = \" 32 \" src = \" https://unsplash.it/39 \" alt = \" \" /> </ span > < span class = \" text u-break-word u-line-height-1-5 \" > airport.jpg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Type \" > < div class = \" tag \" > < span class = \" text \" > image/jpeg </ span > </ div > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Size \" > < span class = \" text \" > 336.6 kB </ span > </ div > < div class = \" table-col is-only-desktop \" role = \" cell \" data-title = \" Created \" > < time class = \" text \" > 11 Mar 2022 </ time > </ div > < div class = \" table-col \" role = \" cell \" date-title = \" Options \" > < div class = \" u-flex \" > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" refresh \" > < span class = \" icon-refresh \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon u-hide \" aria-label = \" delete item \" > < span class = \" icon-trash \" aria-hidden = \" true \" > </ span > </ button > < button class = \" button is-text is-only-icon \" aria-label = \" more options \" > < span class = \" icon-dots-horizontal \" aria-hidden = \" true \" > </ span > </ button > </ div > </ div > </ a > </ div > </ div > switch tag Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/table"},"34":{"title":"elements - tag","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tag Tag Tags help organize and differentiate between different categories of content. In the Appwrite console, tags may be interactive or static. Class Type tags Tag A class representing a tag Informative Tags Informative tags are used to visually label information for easy understanding and/or navigation. In the Appwrite console, we use our system colours for each type of tag (gray, blue, green, orange, red) depending on context. Class Type - Default Use this tag to provide general details to the user. In the Appwrite console this style is typically used for ‘disabled’ state tags. is-info Info Use this tag to provide additional information or ‘tips’ to the user. is-success Success Use this tag to inform the user of a task that has been completed or verified successfully. is-warning Warning Use this tag to warn the user that action may be required, or a task is currently processing, depending on the context. is-danger Danger / Error Use this tag to warn the user about an error that may have occured or a task has failed. Preview HTML default info success warning error Beta default info success warning error Beta \"> < div class = \" tag \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > default </ span > </ div > < div class = \" tag is-info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" text \" > info </ span > </ div > < div class = \" tag is-success \" > < span class = \" icon-check-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > success </ span > </ div > < div class = \" tag is-warning \" > < span class = \" icon-exclamation \" aria-hidden = \" true \" > </ span > < span class = \" text \" > warning </ span > </ div > < div class = \" tag is-danger \" > < span class = \" icon-exclamation-circle \" aria-hidden = \" true \" > </ span > < span class = \" text \" > error </ span > </ div > < div class = \" tag eyebrow-heading-3 \" > < span class = \" text u-x-small \" > Beta </ span > </ div > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. Interactive Tags Interactive tags are clickable or tappable. In the Appwrite console these are typically used to allow users to copy or edit an element’s ID. Use an icon to clarify the action (e.g. the ‘duplicate’ icon for copy and ‘pencil’ icon for edit). Preview HTML Interactive Interactive Interactive Interactive Interactive Interactive \"> < button class = \" tag \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > < a href = \" # \" class = \" tag is-selected \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ a > < button class = \" tag \" disabled > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Interactive </ span > </ button > Best Practice We recommend the use of icons within informative tags only when necessary to convey context. Do Keep tag text short and simple so as not to distract the user who may be scanning for information. Don't If you choose to use icons, don’t mix and match their placement. table tooltip Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tag"},"35":{"title":"elements - tooltip","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile elements tooltip Tooltip Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus. Class Type tooltip Tooltip A class representing a tooltip Components Tooltips consist of two components: Class Type tooltip-popup Text is-bottom Align Bottom The tooltip will appear below the element. is-center Align Center The tooltip will be align center to the partial is-end Align Center The tooltip will be align end of the partial Preview HTML Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. Set variables or secret keys. User ID Set variables or secret keys. User ID Set variables or secret keys. \"> < button class = \" tooltip \" aria-label = \" variables info \" > < span class = \" icon-info \" aria-hidden = \" true \" > </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup \" role = \" tooltip \" > < p class = \" text u-margin-block-start-8 \" > Set variables or secret keys. </ p > </ span > </ button > < button class = \" tag tooltip \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > < span class = \" text \" > User ID </ span > < span class = \" tooltip-popup is-bottom \" role = \" tooltip \" > Set variables or secret keys. </ span > </ button > tag action bar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"36":{"title":"foundations - border radius","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations border radius Border Radius Different sizes of border radius are used throughout the Appwrite UI according to the component size. Sizes In Appwrite console we use 4 sizes of border radius: Variable Value --border-radius-xsmall 4px Designed to soften the corners of small components, such as checkboxes, input fields, buttons, alerts and tooltips. Preview HTML - -border-radius-xsmall \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-xsmall ) ; \" > </ div > Variable Value --border-radius-small 8px Designed to soften the corners of small components that are part of a bigger one or for medium components, such as items in the sidebar menu and popovers. Preview HTML - -border-radius-small \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-small ) ; \" > </ div > Variable Value --border-radius-medium 16px Used when a UI element is large or needs to float above the underlying UI, such as cards, modals and tables. Preview HTML - -border-radius-medium \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-medium ) ; \" > </ div > Variable Value --border-radius-circular 50% Used only on specific elements that needs to be rounded, such as icon buttons, avatars, tags and switches. Preview HTML - -border-radius-circular \"> < div class = \" card \" style = \" border-radius : var ( --border-radius-circular ) ; \" > </ div > Best Practice Tips to keep in mind while using border radius: Do Use medium corner radius on large elements. Don't Do not use extra small or small corner radius on large elements, it will make them look too sharp and serious. user profile colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/border-radius"},"37":{"title":"foundations - colors","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations colors Colors Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level. Usage All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100 is 343, 87%, 56% . Colors can be used as follows: < style > div { color : hsl ( var ( --color-primary-100 ) ) ; /* To control opacity: */ color : hsl ( var ( --color-primary-100 ) / 0.5 ) ; } </ style > Brand Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions. - -color-primary-100 - -color-primary-200 - -color-primary-300 Neutrals Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators. - -color-neutral-0 - -color-neutral-5 - -color-neutral-10 - -color-neutral-30 - -color-neutral-50 - -color-neutral-70 - -color-neutral-100 - -color-neutral-120 - -color-neutral-150 - -color-neutral-200 - -color-neutral-300 - -color-neutral-400 - -color-neutral-500 System Colors In the Appwrite console, we use 4 system colors: Type Information Blue often used for informative alerts and ‘selected’ mode in selectors. Success Green often used for success alerts. Warning Orange often used for warning alerts and modals. Error Red often used for danger/error alerts. - -color-information-10 - -color-information-50 - -color-information-100 - -color-information-120 - -color-information-200 - -color-success-10 - -color-success-50 - -color-success-100 - -color-success-120 - -color-success-200 - -color-warning-10 - -color-warning-50 - -color-warning-100 - -color-warning-120 - -color-warning-200 - -color-danger-10 - -color-danger-50 - -color-danger-100 - -color-danger-120 - -color-danger-200 Additional Colors In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets. - -color-blue-100 - -color-green-100 - -color-orange-100 - -color-red-100 - -color-purple-100 - -color-pink-100 Special Colors - -color-text-disabled - -color-text-info - -color-text-danger - -color-text-warning - -color-text-success - -color-border border radius dark theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/colors"},"38":{"title":"foundations - dark theme","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations dark theme Dark Theme Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance. CSS Class SCSS Variable Theme Default - Light .theme-dark $theme-dark Dark Global Sass variable This global CSS class is declared as a Sass variable in order to be used inside partials < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; </ style > Implementation to a SCSS Partial < style language = \" scss \" > $ theme-dark : \".theme-dark\" ; .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; /* Dark Theme */ # { $theme-dark } & { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } } </ style > Compiled CSS < style > .partial { --p-partial-bg-color : var ( --color-neutral-0 ) ; --p-partial-color : var ( --color-neutral-100 ) ; background-color : hsl ( var ( --partial-bg-color ) ) ; color : hsl ( var ( --partial-color ) ) ; } /* Dark Theme */ .theme-dark .partial { --p-partial-bg-color : var ( --color-neutral-400 ) ; --p-partial-color : var ( --color-neutral-50 ) ; } </ style > Theme Utility Classes Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used. colors elevation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/dark-theme"},"39":{"title":"foundations - elevation","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations elevation Elevation Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy. Types In the Appwrite console we use two types of elevation: Variable Type shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component. shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. Preview HTML shadow-small shadow-large shadow-small shadow-large \"> < div class = \" card \" style = \" box-shadow : var ( --shadow-small ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-small </ p > </ div > < div class = \" card \" style = \" box-shadow : var ( --shadow-large ) ; \" > < p class = \" text u-margin-block-start-8 \" > shadow-large </ p > </ div > Best Practice Small shadows should be used with standard layout components (e.g. cards, tables). We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals). Do To create contrast between a floating surface and the surface beneath, use shadow-large. Don't Do not make floating elements look flat by not using shadows. dark theme icons Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/elevation"},"40":{"title":"foundations - icons","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations icons Icons An icon is a visual representation of a command, device, directory, or common action. General Icons In Appwrite we use a subset of the heroicons library. To use them, use the class name of the icon you want shown below. icon-academic-cap icon-adjustments icon-akamai icon-annotation icon-anonymous icon-archive icon-arrow-circle-down icon-arrow-circle-left icon-arrow-circle-right icon-arrow-circle-up icon-arrow-down icon-arrow-expand icon-arrow-left icon-arrow-narrow-down icon-arrow-narrow-left icon-arrow-narrow-right icon-arrow-narrow-up icon-arrow-right icon-arrow-sm-down icon-arrow-sm-left icon-arrow-sm-right icon-arrow-sm-up icon-arrow-up icon-astro icon-at-symbol icon-backspace icon-badge-check icon-ban icon-beaker icon-bell icon-bitBucket icon-book-open icon-bookmark-alt icon-bookmark icon-briefcase icon-cake icon-calculator icon-calendar icon-camera icon-cash icon-chart-bar icon-chart-pie icon-chart-square-bar icon-chat-alt-2 icon-chat-alt icon-chat icon-check-circle icon-check icon-cheveron-down icon-cheveron-left icon-cheveron-right icon-cheveron-up icon-chevron-double-down icon-chevron-double-left icon-chevron-double-right icon-chevron-double-up icon-chip icon-clipboard-arrow icon-clipboard-check icon-clipboard-copy icon-clipboard-list icon-clock icon-cloud-download icon-cloud-upload icon-cloud icon-cog icon-collection icon-color-swatch icon-credit-card icon-cube-transparent icon-cube icon-currency-bangladesh icon-currency-dollar icon-currency-euro icon-currency-pound icon-currency-rupee icon-currency-yen icon-cursor-click icon-database icon-desktop-computer icon-device-ipad icon-device-mobile icon-document-add icon-document-download icon-document-duplicate icon-document-remove icon-document-report icon-document-search icon-document-text icon-document icon-dots-circle-horizontal icon-dots-horizontal icon-dots-vertical icon-download icon-duplicate icon-emoji-happy icon-emoji-sad icon-exclamation-circle icon-exclamation icon-external-link icon-eye-off icon-eye icon-fast-forward icon-film icon-filter-line icon-filter icon-finger-print icon-flag icon-folder-add icon-folder-download icon-folder-open icon-folder-remove icon-folder icon-gift icon-git-branch icon-git-commit icon-globe-alt icon-globe icon-graphql icon-hand icon-hashtag icon-heart icon-home icon-identification icon-inbox-in icon-inbox icon-info icon-ionic icon-key icon-light-bulb icon-lightning-bolt icon-list icon-location-marker icon-lock-closed icon-lock-open icon-logout-left icon-logout-right icon-mail-open icon-mail icon-map icon-md-library icon-menu-alt-1 icon-menu-alt-2 icon-menu-alt-3 icon-menu-alt-4 icon-menu icon-microphone icon-minus-circle icon-minus-sm icon-minus icon-mode icon-moon icon-ms_yammer icon-msg91 icon-music-note icon-newspaper icon-nextjs icon-node_js icon-null icon-nuxt icon-office-building icon-openid icon-paper-airplane icon-paper-clip icon-pause icon-pencil-alt icon-pencil icon-phone-incoming icon-phone-missed-call icon-phone-outgoing icon-phone icon-photograph icon-play-button icon-play icon-plus-circle icon-plus-sm icon-plus icon-presentation-chart-1 icon-presentation-chart-2 icon-printer icon-product_hunt icon-puzzle icon-qrcode icon-question-mark-circle icon-qwik icon-receipt-refund icon-receipt-tax icon-refresh icon-relation icon-relationship icon-replay icon-rewind icon-rss icon-save-as icon-save icon-scale icon-scissors icon-search-circle icon-selector icon-send icon-server icon-share icon-shield-check icon-shield-exclamation icon-shopping-bag icon-shopping-cart icon-sort-ascending icon-sort-descending icon-sparkles icon-speakerphone icon-spin icon-star icon-status-offline icon-status-online icon-stop icon-sun icon-support icon-svelte icon-switch-horizontal icon-switch-vertical icon-table icon-telesign icon-template icon-terminal icon-text icon-textmagic icon-thumb-dowm icon-thumb-up icon-ticket icon-toggle icon-translate icon-trash icon-trending-down icon-trending-up icon-truck icon-twilio icon-typescript icon-upload icon-user-add icon-user-circle icon-user-group icon-user-remove icon-user icon-users icon-variable icon-video-camera icon-video icon-view-boards icon-view-grid-add icon-view-grid icon-view-list icon-volume-off icon-volume-up icon-vonage icon-wifi icon-x-circle icon-zoom-in icon-zoom-out Additional Icons Social and technology icons are available in gray-scale and color. Gray-scale Icons were translated into class names and color icons are available as SVG files. Grayscale Color icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-code icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbir icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom icon-algolia icon-amazon icon-android icon-angular icon-apple icon-appwrite icon-auth0 icon-authentik icon-autodesk icon-azure icon-behance icon-bitbucket icon-bitly icon-box icon-chrome icon-cpp icon-css3 icon-dailymotion icon-dart icon-deno icon-discord icon-disqus icon-docker icon-dotnet icon-dribbble icon-dropbox icon-etsy icon-facebook icon-figma icon-firefox icon-flutter icon-git icon-github icon-gitlab icon-google icon-html5 icon-instagram icon-ios icon-java icon-js icon-kotlin icon-linkedin icon-linux icon-medium icon-meilisearch icon-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-open-ai icon-opera icon-pangea icon-paypal icon-perspective-api icon-php icon-pinterest icon-podio icon-python icon-react icon-reddit icon-ruby icon-safari icon-salesforce icon-skype icon-slack icon-spotify icon-stripe icon-swift icon-telegram icon-tiktok icon-tradeshift icon-tumbler icon-twitch icon-twitter icon-unity icon-vimeo icon-vk icon-vs_code icon-vue icon-whatsapp icon-wordpress icon-yahoo icon-yammer icon-yandex icon-ycombinator icon-youtube icon-zoom Best Practice We recommend using at minimum 4px of space between icons and labels for legibility. Icons should be aligned to the center of a single line of text. If there are multiple lines in a label, the icon should be aligned to the center of the first line in the label. Do Use minimum 4px of space between icon to text and make sure they are centered. Don't Do not use less than 4px of space. If there are multiple lines in a label, do not center the icon to all of them, but to the first line. elevation responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/icons"},"41":{"title":"foundations - responsive","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations responsive Responsive Responsive Design allows users to access content across multiple device resolutions. We use Sass (with the SCSS variant) for easier maintenance. Breakpoints In the Appwrite console we use three screen ranges (small / medium / large): Screen Size Range Scss Variable Small 0px - 767px $break1 Medium 768px - 1198px $break2 Medium (open) 768px - Infinite $break2open Large (open) 1199px - infinite $break3open CSS Implementation < style > /* affect all screens sizes */ .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* affect only small screens */ @media ( max-width : 767.99px ) { .partial { --p-padding : 1rem ; } } /* affect only small & medium screens */ @media ( max-width : 1198.99px ) { .partial { --p-padding : 1rem ; } } /* affect only medium and larger screens */ @media ( min-width : 768px ) { .partial { --p-padding : 1rem ; } } /* affect only small and larger screens */ @media ( max-width : 767.99px ) and ( min-width : 1199px ) { .partial { --p-padding : 1rem ; } } </ style > SCSS Code < style language = \" scss \" > /* Responsive Variables */ $ break1 : \"(max-width:767.99px)\" ; $ break2 : \"(min-width:768px) and (max-width:1198.99px)\" ; $ break2open : \"(min-width:768px)\" ; $ break3open : \"(min-width:1199px)\" ; </ style > Sass Variables Breakpoints in Media Queries Rule < style > @media # { $break1 } { } /* small screens */ @media # { $break2 } { } /* medium screens */ @media # { $break2open } { } /* medium & large screens */ @media # { $break3open } { } /* large screens */ </ style > Special Use Cases In some use cases, we might want to affect only a part of screen sizes and not all of them. In Pink Design responsive library, there is no overlap between the different resolutions. As shown in the example below, you can affect more than one screen size by adding breakpoints. < style > .partial { /* here you put code for all screen sizes */ @media # { $break1 } { } /* only small screens */ @media # { $break1 } , # { $break2 } { } /* small & medium screens */ @media # { $break2 } { } /* only medium screens */ @media # { $break1 } , # { $break3open } { } /* small & large screens */ } </ style > Example of a SCSS Partial < style language = \" scss \" > .partial { --p-partial-padding : 1.25rem ; padding : var ( --p-partial-padding ) ; /* medium screens and larger */ @media # { $break2open } { --p-partial-padding : 2.5rem ; } } </ style > Compiled CSS < style > .partial { --p-padding : 1.25rem ; padding : var ( --p-padding ) ; } /* medium screens and larger */ @media ( min-width : 768px ) { .partial { --p-padding : 2.5rem ; } } </ style > icons typography Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/responsive"},"42":{"title":"foundations - typography","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile foundations typography Typography Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey. Headings To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags. Preview HTML Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Heading level 7 \"> < h1 class = \" heading-level-1 \" > Heading level 1 </ h1 > < h2 class = \" heading-level-2 \" > Heading level 2 </ h2 > < h3 class = \" heading-level-3 \" > Heading level 3 </ h3 > < h4 class = \" heading-level-4 \" > Heading level 4 </ h4 > < h5 class = \" heading-level-5 \" > Heading level 5 </ h5 > < h6 class = \" heading-level-6 \" > Heading level 6 </ h6 > < h6 class = \" heading-level-7 \" > Heading level 7 </ h6 > Eyebrow Headings Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation. Preview HTML EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 EYEBROW HEADING level 1 EYEBROW HEADING level 2 EYEBROW HEADING level 3 \"> < h4 class = \" eyebrow-heading-1 \" > EYEBROW HEADING level 1 </ h4 > < h5 class = \" eyebrow-heading-2 \" > EYEBROW HEADING level 2 </ h5 > < h6 class = \" eyebrow-heading-3 \" > EYEBROW HEADING level 3 </ h6 > Paragraphs For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links. Preview HTML Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline Body text level 1 SemiBold Body text level 1 Regular Body text level 1 Underline Body text level 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" body-text-1 u-bold \" > Body text level 1 SemiBold </ p > < p class = \" body-text-1 \" > Body text level 1 Regular </ p > < p class = \" body-text-1 u-underline \" > Body text level 1 Underline </ p > < p class = \" body-text-2 u-bold \" > Body text level 2 SemiBold </ p > < p class = \" body-text-2 \" > Body text level 2 Regular </ p > < p class = \" body-text-2 u-underline \" > Body text level 2 Underline </ p > < a class = \" link \" > Link text Underline </ a > Code Code text style is used for code snippets or inline code. Preview HTML Code level 1 Code level 1 \"> < code class = \" inline-code \" > Code level 1 </ code > Best Practice Eyebrow headings can be used to compliment headings or for subtle headers for lists. We recommend the use of the Underline text style for inline links. Do Use Underline text style for inline links as it guarantees link visibility when scanning text. Don't Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception. responsive box model Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/foundations/typography"},"43":{"title":"getting started","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Getting Started Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design. CDN Include the CSS library in your project Copy the following code into the <head> section of your HTML file. \"> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink \" /> <!-- optionally, add icons --> < link rel = \" stylesheet \" href = \" https://unpkg.com/@appwrite.io/pink-icons \" /> NPM Install the CSS library Run the following command to install Pink Design as an NPM package. npm install \"@appwrite.io/pink\" Include the library in your project After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files. import \"@appwrite.io/pink\" ; // optionally, add icons import \"@appwrite.io/pink-icons\" ; Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/getting-started"},"44":{"title":"home","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile Pink Design Design. Build. Collaborate. Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility. Get Started Header Button #F02E65 100% RR RR \"> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < span class = \" avatar is-color-pink \" > RR </ span > <!-- ... --> </ div > </ td > <!-- ... --> < td class = \" table-col \" data-title = \" Name \" > < div class = \" u-inline-flex u-cross-center u-gap-12 \" > < div class = \" avatar \" > < img src = \" /jenny.jpg \" alt = \" JW \" /> </ div > <!-- ... --> </ div > </ td > $ git commit Name RR Ronald Richards ronald@appwrite.io Jenny Wilson jenny@appwrite.io Design Build Collaborate Design Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products Fully accessibile Light and dark mode support Optimized for Dev tooling Create Delete Secondary Primary Create a new object Overview Auth Database Functions Storage Build Design system created with developer experience in mind, with support of our internal developer team Easy to integrate with your preferred framework Only one CSS file is needed Getting started guide npm install \"@appwrite.io/pink\" import \"@appwrite.io/pink\" ; Collaborate One (open) source of truth for collaborating with others on Appwrite, or your own products Documentation and tips on usage of components Fully open source Collaborate with us in Discord and GitHub GitHub Discord #F02E65 100% $ git commit Try It Out Yourself Card Form Alert Kristin Watson kristin.watson@appwrite.io Edit profile Kristin Watson kristin.watson@appwrite.io Edit profile \"> Articles Announcing Pink Design Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do... 3 min read Getting Started with Pink Design Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces... 2 min read CSS Layers for CSS Resets I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser... 7 min read View all articles Join Our Growing Developer Community Design and develop with us the best developer experience out there! Christy Jacob @christyjacob4 Engineering Lead at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Bishwajeet Parhi @2002Bishwajeet Shmuel Fogel @fogelito Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software Engineer at Appwrite Vincent (Wen Yu) Ge @gewenyu99 DevRel Engineer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Hardik Sachan @hardiksachan Brandon @kodumbeats Shimon Newman @shimonewman Full Stack Engineer at Appwrite Matej Bačo @Meldiron Software Engineer at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Wess Cope @wess Software Engineer at Appwrite Rahul Singh @drph4nt0m achintya @achintya-7 Eldad Fux @eldadfux Appwrite's Founder Philipp Hausleiter @phaus Aditya Oberai @adityaoberai Developer Advocate at Appwrite Aditya Rana @codingsamurai-10 Thomas G. Lopes @tglide Frontend Engineer at Appwrite Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"45":{"title":"layout - container","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout container Container A container divides content into sections. It can hold any kind of content and is used to group content and create scannable interfaces. Class Type container Container A class representing a container Preview HTML Container Container \"> < div class = \" container \" > < p class = \" text u-margin-block-start-8 \" > Container </ p > </ div > visibility grid box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/container"},"46":{"title":"layout - grid box","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid box Grid Box Grid Box defines a dynamic custom CSS grid as a layout wrapper. Rows will be filled with the maximum number of items that can fit in the grid. Class Type grid-box Grid Container A class representing a dynamic grid container Parameters Grid box can get three parameters, using CSS variables: Variable Value --grid-gap 1.5rem (=24px) Grid gap in all screen sizes. --grid-item-size 13.125rem (=210px) Size of an item on medium and large screens (min screen size of 768px and above). --grid-item-size-small-screens 13.125rem (=210px) Size of an item on small screens (max screen size of 767px). Preview HTML card card card card card card card card card card card card \"> < ul class = \" grid-box \" style = \" --grid-gap : 1rem ; --grid-item-size : 16rem ; --grid-item-size-small-screens : 8rem ; \" > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > < li > < div class = \" card \" > card </ div > </ li > </ ul > container grid header Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"47":{"title":"layout - grid header","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout grid header Grid Header Grid header; Behave as flex container in big screens, and grid container in small screens. Class Type grid-header Grid Header Container Define Grid in small screen grid-header-col-1 Grid Header column 1 Define Column 1 in small screen grid-header-col-2 Grid Header column 2 Define Column 2 in small screen grid-header-col-3 Grid Header column 3 Define Column 3 in small screen grid-header-col-4 Grid Header column 4 Define Column 2 in small screen Preview HTML Databases Columns 4 Create database Databases Columns 4 Create database \"> < header class = \" grid-header \" > < h2 class = \" grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center \" > Databases </ h2 > < div class = \" u-flex u-gap-16 u-contents-mobile \" > < div class = \" grid-header-col-4 drop-wrapper \" > < button class = \" button is-secondary \" type = \" button \" > < span class = \" icon-view-boards u-opacity-50 \" aria-hidden = \" true \" aria-label = \" columns \" > </ span > < span class = \" text is-only-desktop \" > Columns </ span > < span class = \" inline-tag \" > 4 </ span > </ button > </ div > < div class = \" grid-header-col-3 toggle-button \" > < ul class = \" toggle-button-list \" > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element is-selected \" aria-label = \" List View \" type = \" button \" > < span class = \" icon-view-list \" aria-hidden = \" true \" > </ span > </ button > </ li > < li class = \" toggle-button-item \" > < button class = \" toggle-button-element \" aria-label = \" Grid View \" type = \" button \" > < span class = \" icon-view-grid \" aria-hidden = \" true \" > </ span > </ button > </ li > </ ul > </ div > < button class = \" grid-header-col-2 button \" type = \" button \" > < span class = \" icon-plus \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Create database </ span > </ button > </ div > </ header > grid box navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-header"},"48":{"title":"layout - navigation","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout navigation Navigation Navigation menus provide easy access to different areas in a website or application. Class Type side-nav Sidebar Navigation A class representing a sidebar Preview HTML Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item \"> < div class = \" side-nav \" > < div class = \" side-nav-main \" > < section class = \" drop-section \" > < ul class = \" drop-list \" > < li class = \" drop-list-item \" > < a class = \" drop-button is-selected \" href = \" \" > < span class = \" icon-home \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-user-group \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-bell \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-chart-pie \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > < li class = \" drop-list-item \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-document \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ li > </ ul > </ section > </ div > < div class = \" side-nav-bottom \" > < section class = \" drop-section \" > < a class = \" drop-button \" href = \" \" > < span class = \" icon-cog \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Menu item </ span > </ a > </ section > </ div > </ div > grid header pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"49":{"title":"layout - pagination","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile layout pagination Pagination Pagination allows you to break up content that doesn't fit on a single page. Class Type pagination Pagination A class representing pagination Preview HTML Prev 1 … 2 3 4 5 … 20 Next Prev 1 … 2 3 4 5 … 20 Next \"> < nav class = \" pagination \" > < span href = \" \" class = \" button is-text is-disabled \" aria-label = \" prev page \" > < span class = \" icon-cheveron-left \" aria-hidden = \" true \" > </ span > < span class = \" text \" > Prev </ span > </ span > < ol class = \" pagination-list is-only-desktop \" > < li class = \" pagination-item \" > < span href = \" \" class = \" button is-disabled \" aria-label = \" page \" > < span class = \" text \" > 1 </ span > </ span > </ li > < li class = \" pagination-item \" > < button class = \" button is-text /*u-hide*/ \" aria-label = \" show prev 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 2 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 3 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 4 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 5 </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" show next 5 pages \" > < span class = \" icon \" > … </ span > </ button > </ li > < li class = \" pagination-item \" > < button class = \" button is-text \" aria-label = \" page \" > < span class = \" text \" > 20 </ span > </ button > </ li > </ ol > < a href = \" \" class = \" button is-text \" aria-label = \" next page \" > < span class = \" text \" > Next </ span > < span class = \" icon-cheveron-right \" aria-hidden = \" true \" > </ span > </ a > </ nav > Best Practice Tips to keep in mind while using pagination: Do Use pagination to help users find information within a table containing a large amount of data. Don't Make your user click through multiple pages to find what they need. navigation box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/pagination"},"50":{"title":"utilities - box model","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities box model Box Model Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation. Class Scss Define Compiled CSS u-padding-0 padding: 0 !important; Stays the same u-padding-8 padding: pxToRem(8) !important; padding: 0.5rem !important; u-padding-12 padding: pxToRem(12) !important; padding: 0.75rem !important; u-padding-16 padding: pxToRem(16) !important; padding: 1rem !important; u-padding-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-64 padding: pxToRem(64) !important; padding: 4rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-8 padding-inline: pxToRem(8) !important; padding-inline: 0.5rem !important; u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !important; u-padding-inline-16 padding-inline: pxToRem(16) !important; padding-inline: 1rem !important; u-padding-inline-24 padding-inline: pxToRem(24) !important; padding-inline: 1.5rem !important; u-padding-inline-32 padding-inline: pxToRem(32) !important; padding-inline: 2rem !important; u-padding-inline-end-0 padding-inline-end: 0 !important; Stays the same u-padding-inline-end-12 padding-inline-end: pxToRem(12) !important; padding-inline-end: 0.75rem !important; u-padding-inline-end-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.5rem !important; u-padding-inline-end-120 padding-inline-end: pxToRem(120) !important; padding-inline-end: 7.5rem !important; u-padding-block-8 padding-block: pxToRem(8) !important; padding-block: 0.5rem !important; u-padding-block-12 padding-block: pxToRem(12) !important; padding-block: 0.75rem !important; u-padding-block-start-16 padding-block-start: pxToRem(16)!important; padding-block-start: 1rem !important; u-padding-block-start-20 padding-block-start: pxToRem(20)!important; padding-block-start: 1,25rem !important; u-padding-block-end-32 padding-block-end: pxToRem(32)!important; padding-block-end: 2rem !important; u-padding-block-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !important; u-margin-16-negative margin: pxToRem(-16) !important; margin: -1rem !important; u-margin-0 margin: 0 !important; Stays the same u-margin-32 margin: pxToRem(32) !important; margin: 2rem !important; u-margin-inline-start-auto margin-inline-start: auto; Stays the same u-margin-block-start-auto margin-block-start: auto; Stays the same u-margin-block-start-negative-56 margin-block-start: pxToRem(-56); margin-block-start: pxToRem(-56); u-margin-block-start-2 margin-block-start: pxToRem(2); margin-block-start: 0.125rem; u-margin-block-start-4 margin-block-start: pxToRem(4); margin-block-start: 0.25rem; u-margin-block-start-8 margin-block-start: pxToRem(8); margin-block-start: 0.5rem; u-margin-block-start-12 margin-block-start: pxToRem(12); margin-block-start: 0.75rem; u-margin-block-start-16 margin-block-start: pxToRem(16); margin-block-start: 1rem; u-margin-block-start-20 margin-block-start: pxToRem(20); margin-block-start: 1.25rem; u-margin-block-start-24 margin-block-start: pxToRem(24); margin-block-start: 1.5rem; u-margin-block-start-32 margin-block-start: pxToRem(32); margin-block-start: 2rem; u-margin-block-start-40 margin-block-start: pxToRem(40); margin-block-start: 2.5rem; u-margin-block-start-48 margin-block-start: pxToRem(48); margin-block-start: 3rem; u-margin-block-start-52 margin-block-start: pxToRem(52); margin-block-start: 3.25rem; u-margin-block-start-100 margin-block-start: pxToRem(100); margin-block-start: 6.25rem; u-margin-block-start-200 margin-block-start: pxToRem(200); margin-block-start: 12.5rem; u-margin-block-start-300 margin-block-start: pxToRem(300); margin-block-start: 18.75rem; u-margin-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-8 margin-inline-start: pxToRem(8); margin-inline-start: 0.5rem; u-margin-inline-start-12 margin-inline-start: pxToRem(12); margin-inline-start: 0.75rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; u-margin-inline-start-24 margin-inline-start: pxToRem(24); margin-inline-start: 1.5rem; u-margin-inline-start-32 margin-inline-start: pxToRem(32); margin-inline-start: 2rem; u-margin-inline-end-16 margin-inline-end: pxToRem(16); margin-inline-end: 1rem; u-margin-inline-end-24 margin-inline-end: pxToRem(24); margin-inline-end: 1.5rem; \"> < div class = \" box u-margin-block-start-32 u-padding-block-end-56 \" > </ div > typography colors Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/box-model"},"51":{"title":"utilities - colors","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities colors Colors Colors utility classes help to convey consistent meaning through colors. States Colors In the Appwrite console we use six classes to set system colors based on states: Class Properties u-color-text-disabled color: hsl(var(--color-text-disabled)); u-color-text-offline color: hsl(var(--color-text-offline)); u-color-text-info color: hsl(var(--color-text-info)); u-color-text-danger color: hsl(var(--color-text-danger)); u-color-text-warning color: hsl(var(--color-text-warning)); u-color-text-success color: hsl(var(--color-text-success)); Text Colors Class Properties u-color-text-gray color: hsl(var(--color-text-gray)); u-color-text-pink color: hsl(var(--color-pink-text)); Preview HTML \"> < div class = \" icon-check u-color-text-disabled \" > </ div > < div class = \" icon-check u-color-text-offline \" > </ div > < div class = \" icon-check u-color-text-info \" > </ div > < div class = \" icon-check u-color-text-danger \" > </ div > < div class = \" icon-check u-color-text-warning \" > </ div > < div class = \" icon-check u-color-text-success \" > </ div > < div class = \" icon-check u-color-text-gray \" > </ div > < div class = \" icon-check u-color-text-pink \" > </ div > box model cursor Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"52":{"title":"utilities - cursor","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities cursor Cursor Utility class for cursor Class Properties u-cursor-pointer cursor:pointer; this text will now have cursor \"> < p class = \" u-cursor-pointer \" > this text will now have cursor </ p > colors display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/cursor"},"53":{"title":"utilities - display","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities display Display Display controls how an element is displayed, including its alignment, spacing and size. Class Scss Definition Compiled CSS u-block display: block; Stays the same u-inline display: inline; Stays the same u-grid display: grid; Stays the same u-flex display: flex; Stays the same u-inline-flex display: inline-flex; Stays the same u-contents display: contents; Stays the same u-contents-mobile @media #{$break1} { {display: contents;} } @media (max-width:767.99px) { display: contents; } u-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-inline-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-start: solid 0.0625rem hsl(var(--color-border)) !important; u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)) !important; border-block-end: solid 0.0625rem hsl(var(--color-border)) !important; u-gap-2 gap: pxToRem(2); gap: 0.125rem; u-gap-4 gap: pxToRem(4); gap: 0.25rem; u-gap-8 gap: pxToRem(8); gap: 0.5rem; u-gap-12 gap: pxToRem(12); gap: 0.75rem; u-gap-16 gap: pxToRem(16); gap: 1rem; u-gap-24 gap: pxToRem(24); gap: 1.5rem; u-gap-32 gap: pxToRem(32); gap: 2eem; u-column-gap-2 column-gap: pxToRem(2); column-gap: 0.125rem; u-column-gap-4 column-gap: pxToRem(4); column-gap: 0.25rem; u-column-gap-8 column-gap: pxToRem(8); column-gap: 0.5rem; u-column-gap-12 column-gap: pxToRem(12); column-gap: 0.75rem; u-column-gap-16 column-gap: pxToRem(16); column-gap: 1rem; u-column-gap-24 column-gap: pxToRem(24); column-gap: 1.5rem; u-column-gap-32 column-gap: pxToRem(32); column-gap: 2rem; u-row-gap-2 row-gap: pxToRem(2); row-gap: 0.125rem; u-row-gap-4 row-gap: pxToRem(4); row-gap: 0.25rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-row-gap-32 row-gap: pxToRem(32); row-gap: 2rem; u-row-gap-8 row-gap: pxToRem(8); row-gap: 0.5rem; u-row-gap-12 row-gap: pxToRem(12); row-gap: 0.75rem; u-row-gap-16 row-gap: pxToRem(16); row-gap: 1rem; u-row-gap-24 row-gap: pxToRem(24); row-gap: 1.5rem; u-flex-vertical display:flex; flex-direction: column; Stays the same u-flex-vertical-mobile @media #{$break1} { flex-direction:column; } @media (max-width:767.99px) { flex-direction:column; } u-flex-wrap flex-wrap: wrap; Stays the same u-stretch flex: 1; Stays the same u-flex-basis-140 flex-basis: pxToRem(140); flex-basis: 8.75rem u-flex-basis-250 flex-basis: pxToRem(250); flex-basis: 15.625rem u-flex-basis-500 flex-basis: pxToRem(500); flex-basis: 31.25rem u-flex-basis-50-percent flex-basis: 50%; Stays the same u-flex-basis-100-percent flex-basis: 100%; Stays the same u-flex-shrink-0 flex-shrink: 0; Stays the same u-flex-basis-auto flex-basis: auto; Stays the same u-grid-columns-auto-1fr grid-template-columns: auto 1fr; Stays the same u-width-full-line inline-size: 100%; Stays the same u-width-140 inline-size: pxToRem(140); inline-size: 8.75rem; u-width-150 inline-size: pxToRem(150); inline-size: 9.375rem; u-width-200 inline-size: pxToRem(200); inline-size: 12.5rem; u-width-250 inline-size: pxToRem(250); inline-size: 15.625rem; u-width-600 inline-size: pxToRem(600); inline-size: 37.5rem; u-width-280-desktop @media #{$break3open} { inline-size: pxToRem(280); } @media (min-width:1199px) { inline-size: 17.25rem; } u-min-width-0 min-inline-size: 0; /_use to solve flexbox un-shrink problem;_/ Stays the same u-min-width-200 min-inline-size: pxToRem(200); min-inline-size: 25rem; u-min-width-100-percent min-inline-size: 100%; Stays the same u-max-width-250 max-inline-size: pxToRem(250); max-inline-size: 15.625rem; u-max-width-300 max-inline-size: pxToRem(300); max-inline-size: 18.75rem; u-max-width-350 max-inline-size: pxToRem(350); max-inline-size: 21.875rem; u-max-width-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-450 max-inline-size: pxToRem(450); max-inline-size: 28.125rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-600 max-inline-size: pxToRem(600); max-inline-size: 37.5rem; u-max-width-650 max-inline-size: pxToRem(650); max-inline-size: 40.625rem; u-max-width-700 max-inline-size: pxToRem(700); max-inline-size: 43.75rem; u-max-width-100-percent max-inline-size: 100%; Stays the same u-height-100-percent block-size: 100%; Stays the same u-height-auto block-size: auto !important; Stays the same u-full-screen-height block-size: 100vh; block-size: 100lvh; Stays the same u-min-height-100 min-block-size: pxToRem(100); min-block-size: 6.25rem; u-min-height-184 min-block-size: pxToRem(184); min-block-size: 11.5rem; u-min-height-100-percent min-block-size:100%; Stays the same u-max-height-200 max-block-size: pxToRem(200); max-block-size: 12.5rem; Alignments In the Appwrite console we control alignments by using: Class CSS u-main-center justify-content: center; u-main-space-between justify-content: space-between; u-main-end justify-content: end; u-cross-start align-items: start; u-cross-baseline align-items: baseline; u-cross-center align-items: center; u-cross-end align-items: end; u-cross-child-start align-self: start; u-cross-child-center align-self: center; u-cross-child-end align-self: end; Preview HTML 1 2 3 1 2 3 \"> < div class = \" u-flex u-main-space-between u-min-width-100-percent card \" > < div class = \" box \" > 1 </ div > < div class = \" box \" > 2 </ div > < div class = \" box \" > 3 </ div > </ div > cursor position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"54":{"title":"utilities - position","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities position Position An element's position can be quickly configured by using Position classes. Class Scss Define Translated CSS u-position-relative position: relative; Stays the same u-position-absolute position: absolute; Stays the same u-position-fixed position: fixed; Stays the same u-position-static position: static !important; Stays the same u-inset-0 inset: 0; Stays the same u-inset-inline-0 inset-inline: 0; Stays the same u-inset-inline-start-0 inset-inline-start: 0; Stays the same u-inset-inline-start-1 inset-inline-start: pxToRem(1); inset-inline-start: 0.0625rem; u-inset-inline-start-4 inset-inline-start: pxToRem(4); inset-inline-start: 0.25rem; u-inset-inline-start-8 inset-inline-start: pxToRem(8); inset-inline-start: 0.5rem; u-inset-inline-start-12 inset-inline-start: pxToRem(12); inset-inline-start: 0.75rem; u-inset-inline-start-16 inset-inline-start: pxToRem(16); inset-inline-start: 1rem; u-inset-inline-end-0 inset-inline-end: 0; Stays the same u-inset-inline-end-1 inset-inline-end: pxToRem(1); inset-inline-end: 0.0625rem; u-inset-inline-end-4 inset-inline-end: pxToRem(4); inset-inline-end: 0.25rem; u-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-inline-end-12 inset-inline-end: pxToRem(12); inset-inline-end: 0.75rem; u-inset-inline-end-16 inset-inline-end: pxToRem(16); inset-inline-end: 1rem; u-inset-block-start-0 inset-block-start: 0; Stays the same u-inset-block-start-1 inset-block-start: pxToRem(1); inset-block-start: 0.0625rem; u-inset-block-start-4 inset-block-start: pxToRem(4); inset-block-start: 0.25rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; u-inset-block-start-12 inset-block-start: pxToRem(12); inset-block-start: 0.75rem; u-inset-block-start-16 inset-block-start: pxToRem(16); inset-block-start: 1rem; u-inset-block-end-0 inset-block-end: 0; Stays the same u-inset-block-end-1 inset-block-end: pxToRem(1); inset-block-end: 0.0625rem; u-inset-block-end-4 inset-block-end: pxToRem(4); inset-block-end: 0.25rem; u-inset-block-end-8 inset-block-end: pxToRem(8); inset-block-end: 0.5rem; u-inset-block-end-12 inset-block-end: pxToRem(12); inset-block-end: 0.75rem; u-inset-block-end-16 inset-block-end: pxToRem(16); inset-block-end: 1rem; Z-index Classes Class styles u-z-index-0 z-index: 0 u-z-index-1 z-index: 1 u-z-index-5 z-index: 5 u-z-index-10 z-index: 10 u-z-index-15 z-index: 15 u-z-index-20 z-index: 20 Position Sticky Position sticky can take 4 direction variables Class styles Default Direction u-position-sticky position: sticky; --inset-block-start: auto; top --inset-block-end: auto; bottom --inset-inline-start: auto; left --inset-inline-end: auto; right For using you can attach direction via inline style which will define the local variables. Example: Position Sticky element with sticky top direction of 24px \"> < section class = \" u-position-sticky \" style = \" --inset-block-start : 3rem ; \" > < p class = \" text u-margin-block-start-8 \" > Position Sticky element with sticky top direction of 24px </ p > </ section > display reset inputs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/position"},"55":{"title":"utilities - reset inputs","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities reset inputs Reset Inputs A numeric input field's arrows are hidden when the Reset Inputs utility is used. Class styles u-remove-input-number-buttons Chrome, Safari, Edge, Opera -webkit-appearance: none; margin: 0; Firefox -moz-appearance: textfield; Best Practice The example below shows two numeric input fields - one with Reset Input class and one without. Use mouse or keyboard focus to see the difference between the fields. Preview HTML \"> < input type = \" number \" placeholder = \" without reset input \" class = \" u-max-width-250 \" /> < br /> < input type = \" number \" placeholder = \" with reset input \" class = \" u-remove-input-number-buttons u-max-width-250 \" /> position responsive Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/reset-inputs"},"56":{"title":"utilities - responsive","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities responsive Responsive Responsive shows or hides elements depending on the size of the screen. Class Properties .is-only-mobile @media #{$break2open} { display: none !important; } .is-only-tablet @media #{$break1}, #{$break3open} { display: none !important; } .is-only-desktop @media #{$break1}, #{$break2} { display: none !important; } .is-not-mobile @media #{$break1} { display: none !important; } .is-not-desktop @media #{$break3open} { display: none !important; } Preview HTML I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets & desktops I’m visible on mobile & tablets I’m visible on mobile I’m visible on tablets I’m visible on desktop I’m visible on tablets &amp; desktops I’m visible on mobile &amp; tablets \"> < p class = \" is-only-mobile \" > I’m visible on mobile </ p > < p class = \" is-only-tablet \" > I’m visible on tablets </ p > < p class = \" is-only-desktop \" > I’m visible on desktop </ p > < p class = \" is-not-mobile \" > I’m visible on tablets &amp; desktops </ p > < p class = \" is-not-desktop \" > I’m visible on mobile &amp; tablets </ p > reset inputs text Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/responsive"},"57":{"title":"utilities - text","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities text Text Text ensures consistent text size, weight, line height and breaks across our products. Class Scss Define Compiled CSS u-x-small font-size: pxToRem(12)!important; font-size: 0.75rem!important; u-small font-size: pxToRem(14)!important; font-size: 0.875rem!important; u-medium font-size: pxToRem(16)!important; font-size: 1rem!important; u-font-size-32 font-size: pxToRem(32)!important; font-size: 2rem!important; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-underline text-decoration: underline; Stays the same u-text-start text-align: start; Stays the same u-text-center text-align: center; Stays the same u-text-end text-align: end; Stays the same u-line-height-0-7 line-height: 0.7; Stays the same u-line-height-1 line-height: 1; Stays the same u-line-height-1-25 line-height: 1.25; Stays the same u-line-height-1-5 line-height: 1.5; Stays the same u-line-height-2 line-height: 2; Stays the same u-break-word @include break-word; white-space: initial; Full browser fallbacks u-break-all @include break-all; white-space: initial; Full browser fallbacks u-trim @include trim; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; u-trim-start @include trim; direction:rtl; text-align:right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; u-trim-1 @include trim(1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; u-un-break-text white-space: nowrap !important; Stays the same u-capitalize text-transform: capitalize; Stays the same u-icon-small font-size: var(--icon-size-small); Stays the same u-font-heading font-family: var(--heading-font); Stays the same u-font-content font-family: var(--content-font); Stays the same u-font-code font-family: var(--code-font); Stays the same Preview HTML x-small small text bold x-small small text bold \"> < div > < p class = \" text u-x-small \" > x-small </ p > < p class = \" text u-small \" > small </ p > < p class = \" text \" > text </ p > < p class = \" text u-bold \" > bold </ p > </ div > responsive theme Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/text"},"58":{"title":"utilities - theme","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities theme Theme Theme shows or hides elements depending on the selected theme (light or dark). Selector Properties .u-only-light display: none; .u-only-dark display: none; #{$theme-dark} .u-only-dark display: block; body:not(#{$theme-dark}) .u-only-light display: block; text visibility Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/theme"},"59":{"title":"utilities - visibility","content":" search Ctrl + --> K Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop list file preview grid item inline loader label card modal progress bar secondary tabs tabs toggle button upload box upload file box user profile utilities visibility Visibility An element's visibility, opacity and overflow are controlled by the classes below. Class Properties u-hide display: none !important; u-opacity-0 opacity: 0 !important; u-opacity-20 opacity: 0.2 !important; u-opacity-50 opacity: 0.5 !important; u-overflow-hidden overflow: hidden !important; u-overflow-visible overflow: visible !important; u-overflow-x-auto overflow-x: auto !important; u-overflow-y-auto overflow-y: auto !important; some text hide me \"> < div class = \" box u-overflow-y-auto \" > < p class = \" text \" > some text </ p > < p class = \" u-hide \" > hide me </ p > </ div > theme container Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/visibility"}},"dirtCount":0,"index":[["9",{"1":{"53":1}}],["99px",{"1":{"41":5,"53":2}}],["qwik",{"1":{"40":1}}],["qrcode",{"1":{"40":1}}],["queries",{"1":{"41":1}}],["question",{"1":{"40":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["$break3open",{"1":{"41":3,"53":1,"56":2}}],["$break2open",{"1":{"41":3,"56":1}}],["$break2",{"1":{"41":4,"56":1}}],["$break1",{"1":{"41":5,"53":2,"56":3}}],["$",{"1":{"38":2,"41":4,"44":2}}],["$theme",{"1":{"38":2,"58":2}}],["$25",{"1":{"10":3}}],["zoom",{"1":{"40":6}}],["zone",{"1":{"3":1}}],["z",{"1":{"39":1,"54":13}}],["zagar",{"1":{"33":18}}],["⌘",{"1":{"26":3}}],["justify",{"1":{"53":3}}],["jacob",{"1":{"44":1}}],["java",{"1":{"40":4}}],["javascript",{"1":{"22":3,"43":1}}],["join",{"1":{"44":3}}],["journey",{"1":{"42":1}}],["jw",{"1":{"44":1}}],["jenny",{"1":{"44":3}}],["jeremiah",{"1":{"33":18}}],["js",{"1":{"22":7,"40":5}}],["jpg",{"1":{"7":1,"33":18,"44":1}}],["jpeg",{"1":{"7":1,"33":27}}],["75rem",{"1":{"50":7,"53":8,"54":4,"57":1}}],["767",{"1":{"41":3,"53":2}}],["767px",{"1":{"41":1,"46":1}}],["768px",{"1":{"41":6,"46":1}}],["72px",{"1":{"33":1}}],["7",{"1":{"17":3,"25":4,"42":4,"44":2,"50":1,"57":2}}],["700",{"1":{"53":2}}],["70",{"1":{"8":3,"16":2,"37":1}}],["0px",{"1":{"41":1}}],["0625rem",{"1":{"25":1,"53":3,"54":4}}],["01gb",{"1":{"12":9}}],["09375rem",{"1":{"9":2}}],["0",{"1":{"9":2,"10":6,"16":7,"17":13,"18":1,"25":12,"33":1,"37":2,"38":2,"50":22,"53":21,"54":30,"55":1,"57":4,"59":4}}],["52",{"1":{"50":2}}],["59",{"1":{"33":3}}],["57",{"1":{"33":18}}],["54px",{"1":{"33":1}}],["56",{"1":{"25":1,"37":1,"50":8}}],["5",{"1":{"11":4,"25":4,"29":1,"33":9,"37":2,"42":4,"47":1,"49":5,"54":2,"57":2,"59":1}}],["500",{"1":{"25":16,"37":1,"53":4}}],["50hrs",{"1":{"12":3}}],["50",{"1":{"8":3,"10":2,"12":17,"36":1,"37":5,"38":2,"47":1,"53":2,"59":1}}],["5rem",{"1":{"1":15,"9":7,"10":6,"17":2,"20":1,"25":1,"41":2,"46":1,"50":15,"53":13,"54":4}}],["37",{"1":{"53":2}}],["375rem",{"1":{"53":1}}],["31",{"1":{"53":2}}],["3rem",{"1":{"50":1,"54":1}}],["343",{"1":{"37":1}}],["39",{"1":{"33":1,"43":1,"44":1,"49":1,"54":1,"55":1,"59":1}}],["336",{"1":{"33":27}}],["300",{"1":{"37":2,"50":2,"53":2}}],["30",{"1":{"10":6,"16":3,"37":1}}],["350px",{"1":{"14":1}}],["350",{"1":{"10":1,"53":2}}],["3",{"1":{"8":3,"12":3,"16":6,"20":3,"25":6,"33":36,"34":1,"37":1,"40":1,"42":8,"44":1,"47":4,"49":3,"50":3,"53":3}}],["32",{"1":{"5":1,"25":1,"33":21,"50":13,"53":6,"57":2}}],["32px",{"1":{"2":2}}],["vue",{"1":{"40":4}}],["vs",{"1":{"40":4}}],["vk",{"1":{"40":4}}],["vonage",{"1":{"40":1}}],["volume",{"1":{"40":2}}],["verified",{"1":{"34":1}}],["very",{"1":{"29":3}}],["verbatim",{"1":{"23":1}}],["vertical",{"1":{"5":16,"10":16,"12":1,"17":3,"25":1,"27":1,"40":2,"53":2,"57":1}}],["valid",{"1":{"25":1}}],["values",{"1":{"25":1,"37":1}}],["valuemax",{"1":{"16":7}}],["valuemin",{"1":{"16":7}}],["valuenow",{"1":{"16":7}}],["value",{"1":{"16":7,"25":15,"33":5,"36":4,"46":1}}],["variant",{"1":{"38":1,"41":1}}],["variable",{"1":{"33":3,"36":4,"38":3,"39":1,"40":1,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":11,"37":2,"41":2,"46":1,"54":2}}],["vars",{"1":{"25":9}}],["var",{"1":{"10":9,"17":3,"36":4,"37":2,"38":12,"39":2,"41":3,"51":8,"53":6,"57":4}}],["via",{"1":{"50":1,"54":1}}],["vincent",{"1":{"44":1}}],["vimeo",{"1":{"40":4}}],["video",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"40":4,"44":1,"47":5}}],["visual",{"1":{"22":1,"23":1,"40":1}}],["visually",{"1":{"3":6,"34":1,"39":1}}],["visible",{"1":{"14":2,"29":6,"33":7,"56":15,"59":2}}],["visibility",{"0":{"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":2,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":2,"59":4}}],["650",{"1":{"53":2}}],["625rem",{"1":{"53":4}}],["64",{"1":{"50":2}}],["64px",{"1":{"2":1}}],["637a4",{"1":{"33":1}}],["637a40ba7a703e3936e1",{"1":{"33":3}}],["63f1efg6673515e4bc06",{"1":{"25":3}}],["63f1efg667fg6fg67fc68ac3515e4bc06",{"1":{"25":3}}],["63f1ec68ac3515e4bc0663f1",{"1":{"25":3}}],["63f1ec68ac3515e4bc06",{"1":{"3":6}}],["60",{"1":{"16":3}}],["600",{"1":{"7":1,"42":1,"53":4,"57":1}}],["6",{"1":{"8":3,"25":4,"33":27,"42":4,"50":1,"53":1}}],["6rem",{"1":{"6":1}}],["|",{"1":{"3":6}}],["yu",{"1":{"44":1}}],["ycombinator",{"1":{"40":4}}],["yandex",{"1":{"40":4}}],["yahoo",{"1":{"40":4}}],["yammer",{"1":{"40":5}}],["y",{"1":{"33":18,"59":3}}],["yen",{"1":{"40":1}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":4}}],["you",{"1":{"5":10,"6":1,"10":3,"14":1,"19":1,"20":2,"21":1,"22":1,"30":1,"32":1,"33":2,"34":2,"40":1,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"43":5,"44":3,"49":1}}],["xsmall",{"1":{"17":3,"36":3}}],["xlarge",{"1":{"2":1}}],["x",{"1":{"1":15,"2":11,"11":4,"16":4,"17":2,"20":1,"25":9,"34":1,"40":1,"57":5,"59":2}}],["28",{"1":{"53":1}}],["280",{"1":{"53":2}}],["21",{"1":{"53":1}}],["2eem",{"1":{"53":1}}],["230",{"1":{"33":2}}],["25rem",{"1":{"41":3,"50":6,"53":9,"54":4}}],["250",{"1":{"33":1,"53":6,"55":2}}],["25",{"1":{"25":1,"57":2}}],["24",{"1":{"10":1,"12":1,"17":3,"50":10,"53":8}}],["24px",{"1":{"2":2,"54":2}}],["2022",{"1":{"33":45}}],["2023",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":7,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["2002bishwajeet",{"1":{"44":1}}],["200",{"1":{"29":1,"37":6,"50":2,"53":6}}],["20",{"1":{"8":2,"10":2,"16":10,"25":9,"49":3,"50":4,"54":2,"59":1}}],["2rem",{"1":{"8":1,"50":6,"53":2,"57":1}}],["2",{"1":{"1":45,"2":2,"6":24,"7":1,"10":12,"11":1,"17":3,"20":4,"24":3,"25":13,"30":2,"40":3,"41":2,"42":20,"44":1,"47":5,"49":3,"50":3,"53":9,"57":2,"59":1}}],["1fr",{"1":{"53":2}}],["15",{"1":{"53":3,"54":2}}],["150",{"1":{"37":1,"53":2}}],["13",{"1":{"46":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"29":3}}],["14",{"1":{"57":1}}],["14px",{"1":{"42":1}}],["140",{"1":{"25":2,"33":3,"53":4}}],["17",{"1":{"33":3,"53":1}}],["184",{"1":{"53":2}}],["18",{"1":{"50":1,"53":1}}],["185",{"1":{"33":11}}],["18rem",{"1":{"8":1}}],["1198",{"1":{"41":2}}],["1198px",{"1":{"41":1}}],["1199px",{"1":{"41":3,"53":1}}],["11",{"1":{"33":27,"53":1}}],["125rem",{"1":{"46":2,"50":1,"53":4}}],["128",{"1":{"25":2}}],["120",{"1":{"25":3,"33":3,"37":5,"50":2}}],["12",{"1":{"10":6,"25":4,"29":1,"33":10,"44":2,"50":13,"53":10,"54":8,"57":1}}],["12rem",{"1":{"6":5}}],["10",{"1":{"37":5,"44":1,"54":2}}],["10mb",{"1":{"17":9}}],["105",{"1":{"12":4}}],["10rem",{"1":{"10":1}}],["10em",{"1":{"10":1}}],["100lvh",{"1":{"53":1}}],["100vh",{"1":{"53":1}}],["100hrs",{"1":{"12":3}}],["100gb",{"1":{"12":9}}],["100",{"1":{"4":1,"10":6,"16":9,"33":3,"37":15,"38":2,"44":2,"50":2,"53":14}}],["1rem",{"1":{"9":9,"10":3,"41":4,"46":1,"50":7,"53":4,"54":4,"57":1}}],["1px",{"1":{"2":1}}],["16px",{"1":{"36":1,"42":1}}],["16rem",{"1":{"8":1,"46":1}}],["16",{"1":{"1":5,"4":1,"8":6,"9":7,"10":9,"11":8,"16":1,"17":5,"19":4,"25":2,"33":10,"47":1,"50":14,"53":8,"54":8,"57":1}}],["1",{"1":{"1":60,"3":2,"6":24,"8":19,"9":7,"11":1,"12":4,"17":2,"20":3,"25":25,"29":1,"30":2,"33":27,"40":2,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":4}}],["word",{"1":{"20":2,"29":2,"33":9,"57":3}}],["wrapped",{"1":{"33":1}}],["wrapper",{"1":{"5":8,"6":10,"8":1,"9":1,"11":2,"19":2,"25":13,"29":1,"33":4,"46":1,"47":1}}],["wraps",{"1":{"15":2}}],["wrap",{"1":{"8":3,"53":3}}],["watson",{"1":{"44":4}}],["way",{"1":{"25":1}}],["want",{"1":{"10":3,"33":1,"40":1,"41":1}}],["waiting",{"1":{"9":1,"31":5}}],["was",{"1":{"7":1}}],["warn",{"1":{"1":2,"34":2}}],["warning",{"1":{"1":6,"8":3,"12":2,"16":1,"25":21,"31":1,"34":6,"37":8,"51":3}}],["white",{"1":{"57":5}}],["while",{"1":{"36":1,"49":1}}],["which",{"1":{"11":1,"20":1,"29":3,"54":1}}],["who",{"1":{"34":2,"44":1}}],["why",{"1":{"20":1}}],["whatsapp",{"1":{"40":4}}],["what",{"1":{"5":9,"20":1,"25":2,"49":1}}],["whenever",{"1":{"15":1,"22":1,"30":1,"32":1}}],["when",{"1":{"2":1,"14":1,"20":1,"25":2,"30":1,"33":1,"34":2,"36":1,"42":1,"44":1,"55":1}}],["where",{"1":{"1":2,"6":1,"20":1,"25":1}}],["wilson",{"1":{"44":1}}],["will",{"1":{"5":9,"7":1,"19":1,"20":2,"21":1,"25":9,"29":1,"35":3,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wifi",{"1":{"40":1}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":4,"5":1,"6":1,"7":1,"11":3,"15":2,"17":1,"20":6,"21":1,"22":1,"24":1,"25":11,"27":2,"29":1,"33":4,"38":1,"39":1,"41":1,"42":2,"43":1,"44":7,"46":1,"54":2,"55":2}}],["within",{"1":{"1":1,"8":1,"13":1,"14":1,"23":1,"34":2,"49":1}}],["width",{"1":{"1":10,"4":1,"5":2,"6":2,"10":7,"14":1,"16":2,"17":14,"25":38,"29":1,"33":38,"41":11,"53":24,"55":2}}],["weight",{"1":{"57":3}}],["weights",{"1":{"42":1}}],["wess",{"1":{"44":2}}],["wen",{"1":{"44":1}}],["webkit",{"1":{"55":1,"57":3}}],["website",{"1":{"48":1}}],["web",{"1":{"44":1}}],["were",{"1":{"40":1}}],["well",{"1":{"21":1,"42":1}}],["we",{"1":{"1":2,"6":2,"11":1,"15":1,"20":3,"21":1,"22":1,"25":3,"27":1,"33":1,"34":3,"36":1,"37":2,"38":1,"39":2,"40":2,"41":3,"42":2,"44":1,"51":1,"53":1}}],["ⓒ",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["nik",{"1":{"44":1}}],["nguyen",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["nuxt",{"1":{"40":1}}],["null",{"1":{"25":6,"40":1}}],["numquam",{"1":{"33":3}}],["numeric",{"1":{"25":7,"27":15,"55":2}}],["number",{"1":{"4":6,"24":3,"25":4,"27":1,"46":1,"55":4}}],["normal",{"1":{"57":2}}],["none",{"1":{"55":1,"56":5,"58":2,"59":1}}],["nowrap",{"1":{"57":3}}],["now",{"1":{"52":2}}],["node",{"1":{"40":5,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":4}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3,"40":1}}],["not",{"1":{"0":2,"2":2,"6":1,"7":5,"14":1,"17":3,"22":1,"30":1,"32":1,"34":2,"36":1,"39":2,"40":2,"41":1,"42":3,"56":4,"58":1}}],["nav",{"1":{"48":4,"49":2}}],["navigate",{"1":{"38":1}}],["navigation",{"0":{"48":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":5,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["native",{"1":{"11":1,"33":1}}],["names",{"1":{"23":1,"40":1}}],["name",{"1":{"10":9,"16":6,"17":6,"18":4,"25":2,"30":7,"33":30,"40":1,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1,"40":4}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["nextjs",{"1":{"40":1}}],["next",{"1":{"20":1,"22":1,"29":1,"30":1,"32":1,"49":5}}],["negative",{"1":{"20":1,"33":2,"50":2}}],["netherlands",{"1":{"10":4}}],["neutrals",{"1":{"37":2}}],["neutral",{"1":{"8":6,"37":14,"38":8}}],["newman",{"1":{"44":1}}],["newspaper",{"1":{"40":1}}],["new",{"1":{"7":1,"20":8,"33":1,"44":1}}],["necessary",{"1":{"1":2,"25":1,"34":2}}],["875rem",{"1":{"53":1,"57":1}}],["87",{"1":{"37":1}}],["8px",{"1":{"22":1,"30":1,"32":1,"36":1}}],["85",{"1":{"12":4}}],["8rem",{"1":{"6":6,"46":1}}],["8",{"1":{"0":2,"3":2,"5":6,"8":3,"12":8,"16":3,"17":1,"18":1,"21":2,"25":19,"26":1,"27":2,"29":1,"33":3,"35":1,"39":2,"45":1,"50":10,"53":10,"54":9}}],["=210px",{"1":{"46":2}}],["=24px",{"1":{"46":1}}],["=>",{"1":{"22":2}}],["=",{"1":{"0":12,"1":310,"2":76,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":107,"11":106,"12":49,"13":30,"14":27,"15":38,"16":131,"17":90,"18":16,"19":6,"20":67,"21":8,"22":23,"23":1,"24":20,"25":376,"26":3,"27":38,"28":2,"29":33,"30":19,"31":18,"32":17,"33":672,"34":35,"35":19,"36":8,"38":2,"39":6,"41":2,"42":18,"43":4,"44":10,"45":2,"46":8,"47":30,"48":41,"49":47,"50":1,"51":8,"52":1,"53":4,"54":3,"55":6,"56":5,"57":4,"59":3}}],["43",{"1":{"53":1}}],["450",{"1":{"53":2}}],["48",{"1":{"50":2}}],["48px",{"1":{"2":2}}],["4rem",{"1":{"50":1}}],["4px",{"1":{"36":1,"40":3,"42":1}}],["442",{"1":{"33":2}}],["41",{"1":{"33":2}}],["4mb",{"1":{"17":6}}],["400",{"1":{"37":1,"38":2,"42":1,"53":2}}],["40px",{"1":{"2":2,"20":1}}],["40",{"1":{"2":1,"10":6,"33":8,"50":2,"53":1}}],["4",{"1":{"0":3,"8":6,"10":3,"12":4,"17":5,"20":3,"24":15,"25":18,"36":1,"37":1,"40":1,"42":4,"47":6,"49":3,"50":4,"53":6,"54":9}}],["everly",{"1":{"44":2}}],["everything",{"1":{"44":1}}],["every",{"1":{"20":2,"22":1,"30":1,"32":1}}],["even",{"1":{"44":1}}],["edge",{"1":{"40":4,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":4}}],["etc",{"1":{"7":1}}],["emoji",{"1":{"40":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":2}}],["euro",{"1":{"40":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["ellipsis",{"1":{"57":2}}],["eldadfux",{"1":{"44":1}}],["eldad",{"1":{"44":1}}],["elad2412",{"1":{"44":1}}],["elad",{"1":{"44":1}}],["el",{"1":{"22":4}}],["elevated",{"1":{"39":1}}],["elevation",{"0":{"39":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":5,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["element",{"1":{"11":1,"14":2,"15":7,"19":3,"25":1,"26":2,"29":1,"34":1,"35":1,"36":1,"47":2,"53":1,"54":3,"59":1}}],["elements",{"0":{"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":2,"21":3,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":4,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":2,"57":1,"58":2,"59":1}}],["eight",{"1":{"17":1}}],["eye",{"1":{"11":2,"25":2,"29":1,"33":2,"40":2}}],["eyebrow",{"1":{"8":3,"25":2,"33":30,"34":1,"42":15}}],["easier",{"1":{"38":1,"41":1}}],["easily",{"1":{"2":1,"10":3,"25":1}}],["easy",{"1":{"34":1,"44":1,"48":1}}],["each",{"1":{"6":1,"19":1,"20":1,"22":1,"30":1,"32":2,"34":1}}],["exercitationem",{"1":{"33":3}}],["execution",{"1":{"0":1}}],["experience",{"1":{"44":3}}],["expand",{"1":{"40":1}}],["expanded",{"1":{"37":1}}],["express",{"1":{"20":1}}],["explain",{"1":{"1":1}}],["extra",{"1":{"18":4,"36":1}}],["external",{"1":{"4":1,"7":1,"20":1,"40":1}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2,"40":3}}],["example",{"1":{"2":1,"4":1,"21":1,"25":2,"37":1,"41":2,"54":1,"55":1}}],["errors",{"1":{"1":1}}],["error",{"1":{"1":1,"17":4,"25":6,"34":5,"37":2}}],["ensures",{"1":{"50":1,"57":1}}],["engineer",{"1":{"44":11}}],["engineering",{"1":{"44":2}}],["env",{"1":{"25":9}}],["entered",{"1":{"25":3}}],["enter",{"1":{"25":1}}],["enabling",{"1":{"22":1}}],["enables",{"1":{"0":1}}],["enough",{"1":{"1":1,"14":1}}],["end",{"1":{"0":4,"6":12,"8":15,"11":4,"14":2,"16":1,"17":2,"25":20,"29":1,"33":1,"35":2,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["msg91",{"1":{"40":1}}],["ms",{"1":{"40":1}}],["md",{"1":{"40":1}}],["mdn",{"1":{"11":1}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":8}}],["microphone",{"1":{"40":1}}],["missed",{"1":{"40":1}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["minus",{"1":{"40":3}}],["min",{"1":{"4":1,"6":5,"17":11,"41":6,"44":3,"46":1,"53":17}}],["mind",{"1":{"2":1,"20":1,"36":1,"44":1,"49":1}}],["minimum",{"1":{"1":1,"22":1,"30":1,"32":1,"40":2}}],["mp4",{"1":{"16":18}}],["music",{"1":{"40":1}}],["must",{"1":{"11":1}}],["multi",{"1":{"25":1,"31":1}}],["multiple",{"1":{"8":2,"9":1,"13":1,"14":1,"19":2,"22":2,"30":1,"32":1,"40":2,"41":1,"49":1}}],["meldiron",{"1":{"44":1}}],["media",{"1":{"41":15,"53":6,"56":5}}],["medium",{"1":{"2":3,"11":2,"12":4,"20":6,"22":2,"30":2,"32":2,"33":2,"36":5,"40":4,"41":11,"46":1,"57":1}}],["meilisearch",{"1":{"40":4}}],["methods",{"1":{"11":1,"44":2}}],["method",{"1":{"11":4}}],["me",{"1":{"10":3,"59":2}}],["meaning",{"1":{"6":1,"20":2,"51":1}}],["meanings",{"1":{"2":1}}],["menus",{"1":{"48":1}}],["menu",{"1":{"6":1,"36":1,"40":5,"48":18}}],["messaging",{"1":{"1":1}}],["message",{"1":{"1":15,"9":21,"17":3,"25":1}}],["messages",{"1":{"1":17,"11":3}}],["matej",{"1":{"44":1}}],["matched",{"1":{"42":1}}],["match",{"1":{"25":3,"34":2,"42":1}}],["map",{"1":{"40":1}}],["mark",{"1":{"40":1}}],["marker",{"1":{"40":1}}],["mar",{"1":{"33":27}}],["margins",{"1":{"50":1}}],["margin",{"1":{"3":2,"4":1,"5":6,"6":7,"8":7,"10":18,"11":3,"16":4,"17":10,"20":1,"25":12,"26":1,"27":2,"29":1,"33":4,"35":1,"39":2,"45":1,"50":82,"54":1,"55":1}}],["mail",{"1":{"40":2}}],["mailto",{"1":{"25":2}}],["maintenance",{"1":{"38":1,"41":1}}],["maintain",{"1":{"33":1,"37":1}}],["maintains",{"1":{"14":1}}],["main",{"1":{"0":1,"6":2,"11":8,"12":8,"17":3,"25":1,"42":1,"48":1,"53":4}}],["made",{"1":{"25":2}}],["make",{"1":{"20":1,"22":1,"30":2,"32":1,"36":1,"39":1,"40":1,"49":1}}],["maximum",{"1":{"33":1,"46":1}}],["max",{"1":{"10":1,"12":4,"17":9,"25":19,"33":1,"41":5,"46":1,"53":34,"55":2}}],["may",{"1":{"1":1,"33":6,"34":5}}],["mouse",{"1":{"55":1}}],["moz",{"1":{"55":1}}],["moon",{"1":{"40":1}}],["movie",{"1":{"33":3}}],["month",{"1":{"10":3}}],["mostly",{"1":{"11":1,"14":1,"20":1,"33":1,"37":1,"42":2}}],["most",{"1":{"3":6,"14":1,"20":1,"29":1,"44":1}}],["more",{"1":{"2":2,"11":1,"14":1,"21":1,"22":3,"25":2,"33":12,"41":1}}],["mobile",{"1":{"0":2,"1":10,"14":1,"17":6,"33":10,"40":1,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"40":1,"44":1}}],["model",{"0":{"50":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":4,"51":2,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["modals",{"1":{"11":10,"25":1,"36":1,"37":1,"39":2}}],["modal",{"0":{"11":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":64,"12":2,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["oberai",{"1":{"44":1}}],["objects",{"1":{"21":1}}],["object",{"1":{"2":1,"11":1,"39":1,"44":1}}],["okta",{"1":{"40":4}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outgoing",{"1":{"40":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":1,"40":1,"44":2}}],["outputs",{"1":{"29":1}}],["output",{"0":{"29":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":3,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":22,"30":2,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["own",{"1":{"20":1,"22":1,"30":1,"32":1,"44":2}}],["occured",{"1":{"34":1}}],["occur",{"1":{"20":1}}],["others",{"1":{"44":1}}],["other",{"1":{"19":1,"21":1,"25":1}}],["otherwise",{"1":{"14":1}}],["over",{"1":{"35":1}}],["overflow",{"1":{"33":6,"57":5,"59":10}}],["overviews",{"1":{"21":1}}],["overview",{"1":{"14":3,"44":1}}],["overlap",{"1":{"41":1}}],["overlay",{"1":{"11":1}}],["overly",{"1":{"1":1}}],["optimized",{"1":{"44":1}}],["option",{"1":{"5":12,"6":1,"25":36}}],["options",{"1":{"5":15,"11":3,"12":1,"22":1,"25":14,"30":1,"32":2,"33":16}}],["optionally",{"1":{"43":2}}],["optional",{"1":{"5":26,"25":12}}],["opera",{"1":{"40":4,"55":1}}],["openid",{"1":{"40":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"40":8,"41":2,"43":1,"44":6}}],["opacity",{"1":{"8":2,"10":4,"37":1,"47":1,"59":7}}],["orient",{"1":{"57":1}}],["orientation",{"1":{"42":1}}],["order",{"1":{"38":1,"42":1}}],["organize",{"1":{"33":1,"34":1,"42":1}}],["orange",{"1":{"2":7,"11":1,"34":1,"37":2}}],["or",{"1":{"1":5,"2":5,"5":16,"8":6,"11":3,"13":1,"18":1,"20":1,"21":1,"22":2,"23":4,"24":2,"25":12,"29":1,"32":3,"33":2,"34":8,"35":12,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["office",{"1":{"40":1}}],["off",{"1":{"32":4,"33":1,"40":2}}],["offline",{"1":{"9":2,"40":1,"51":3}}],["often",{"1":{"20":1,"37":4}}],["of",{"1":{"0":3,"1":6,"2":3,"3":12,"4":3,"5":26,"6":4,"7":2,"10":1,"11":7,"13":2,"14":3,"16":3,"17":1,"18":1,"20":6,"21":4,"22":5,"23":3,"24":2,"25":16,"27":2,"30":6,"31":1,"32":5,"33":4,"34":5,"35":2,"36":5,"37":1,"39":2,"40":10,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["online",{"1":{"40":1}}],["only",{"1":{"1":15,"6":1,"8":6,"11":4,"14":1,"17":14,"20":4,"21":1,"25":4,"30":2,"33":61,"34":2,"36":1,"41":7,"44":1,"47":1,"49":1,"56":6,"58":4}}],["ons",{"1":{"10":3}}],["one",{"1":{"2":1,"3":6,"5":3,"6":1,"15":1,"22":2,"25":2,"30":3,"36":1,"41":1,"44":3,"55":2}}],["on",{"1":{"0":3,"1":1,"11":1,"14":1,"15":2,"19":1,"20":2,"22":1,"23":1,"25":1,"29":3,"30":1,"32":5,"33":2,"34":2,"36":3,"38":1,"44":4,"46":2,"49":1,"51":1,"56":16,"58":1}}],["utility",{"1":{"38":2,"51":1,"52":1,"55":1}}],["utilities",{"0":{"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["uk",{"1":{"10":3}}],["ul",{"1":{"2":10,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":6,"14":2,"15":6,"16":4,"17":4,"20":2,"25":38,"27":4,"46":2,"47":2,"48":2}}],["unpkg",{"1":{"43":2}}],["underlined",{"1":{"42":1}}],["underlines",{"1":{"42":1}}],["underline",{"1":{"42":15,"57":2}}],["underlying",{"1":{"36":1}}],["underneath",{"1":{"25":1}}],["understanding",{"1":{"34":1}}],["understand",{"1":{"1":1,"6":1}}],["un",{"1":{"18":3,"53":1,"57":1}}],["uncluttered",{"1":{"14":1}}],["unlimited",{"1":{"10":3}}],["unsafe",{"1":{"8":3}}],["unsecure",{"1":{"8":3}}],["unsplash",{"1":{"2":1,"7":1,"33":9}}],["units",{"1":{"50":1}}],["unity",{"1":{"40":4}}],["united",{"1":{"10":1}}],["unique",{"1":{"6":1}}],["universal",{"1":{"2":1,"6":1,"20":2}}],["upon",{"1":{"35":1}}],["upl",{"1":{"25":1}}],["uploading",{"1":{"16":4}}],["uploads",{"1":{"16":6}}],["uploaded",{"1":{"7":3,"10":1,"16":2}}],["upload",{"0":{"16":1,"17":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":3,"16":57,"17":59,"18":3,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":4,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"40":9,"49":1}}],["usage",{"1":{"24":1,"37":1,"44":1}}],["usa",{"1":{"10":1}}],["us",{"1":{"10":3,"37":1,"44":4}}],["using",{"1":{"2":1,"6":1,"8":1,"19":1,"20":3,"29":1,"36":1,"39":1,"40":1,"46":1,"49":1,"53":1,"54":2}}],["useful",{"1":{"33":1}}],["used",{"1":{"1":1,"2":2,"4":2,"5":16,"8":1,"11":1,"12":4,"13":1,"14":1,"15":1,"20":5,"21":2,"22":3,"23":1,"24":1,"25":9,"32":2,"33":3,"34":3,"36":3,"37":8,"38":2,"39":3,"42":6,"45":1,"55":1}}],["use",{"1":{"1":8,"2":5,"6":4,"7":2,"11":2,"14":1,"15":1,"20":6,"21":2,"22":4,"24":1,"25":3,"27":3,"28":1,"30":4,"32":4,"33":2,"34":11,"36":3,"37":2,"38":1,"39":3,"40":5,"41":4,"42":4,"44":1,"49":1,"51":1,"53":1,"55":1}}],["users",{"1":{"6":1,"13":1,"14":2,"17":1,"22":3,"25":2,"28":1,"29":1,"30":2,"34":1,"40":1,"41":1,"42":2,"49":1}}],["user",{"0":{"18":1},"1":{"0":1,"1":70,"2":3,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":3,"15":1,"16":1,"17":2,"18":23,"19":1,"20":2,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":8,"35":9,"36":2,"37":1,"38":1,"39":1,"40":6,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["ui",{"1":{"1":1,"14":1,"36":3}}],["u",{"1":{"0":4,"1":30,"3":4,"4":4,"5":9,"6":9,"8":42,"9":40,"10":103,"11":37,"12":52,"14":1,"16":7,"17":57,"18":4,"19":12,"20":1,"21":4,"25":143,"26":1,"27":2,"29":7,"33":100,"34":1,"35":1,"39":2,"42":4,"44":6,"45":1,"47":6,"49":1,"50":53,"51":16,"52":2,"53":88,"54":39,"55":4,"57":29,"58":4,"59":10}}],["aggressive",{"1":{"44":1}}],["after",{"1":{"43":1}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":4}}],["auth0",{"1":{"40":4}}],["autodesk",{"1":{"40":4}}],["auto",{"1":{"4":1,"8":1,"10":9,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["akamai",{"1":{"40":1}}],["axis",{"1":{"39":1}}],["ai",{"1":{"40":4}}],["airplane",{"1":{"40":1}}],["airport",{"1":{"33":18}}],["aid",{"1":{"6":1,"20":1}}],["above",{"1":{"36":1,"46":1}}],["about",{"1":{"1":48,"18":1,"25":2,"34":1,"35":1}}],["absolute",{"1":{"25":6,"54":2}}],["amazon",{"1":{"40":4}}],["amp",{"1":{"16":15,"38":1,"41":4,"56":10}}],["amount",{"1":{"11":2,"14":1,"16":2,"25":9,"49":1}}],["available",{"1":{"7":4,"14":1,"31":1,"37":1,"40":2}}],["avatars",{"1":{"2":35,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":49,"3":2,"4":1,"5":1,"6":1,"7":3,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["avoid",{"1":{"6":1,"20":1}}],["advocate",{"1":{"44":1}}],["advanced",{"1":{"5":9}}],["adityaoberai",{"1":{"44":1}}],["aditya",{"1":{"44":2}}],["adam",{"1":{"33":18}}],["adjustments",{"1":{"40":1}}],["adjust",{"1":{"25":1}}],["added",{"1":{"17":1,"43":1}}],["adding",{"1":{"14":2,"41":1}}],["additional",{"1":{"1":2,"25":1,"34":1,"35":1,"37":1,"40":1,"42":2}}],["add",{"1":{"2":1,"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"40":4,"43":2}}],["assist",{"1":{"42":1}}],["ascending",{"1":{"40":1}}],["astro",{"1":{"40":1}}],["as",{"1":{"5":16,"7":2,"10":1,"15":1,"20":2,"21":2,"24":1,"25":9,"33":1,"34":2,"36":4,"37":3,"38":1,"39":2,"40":2,"41":1,"42":1,"43":3,"46":1,"47":1}}],["azure",{"1":{"2":2,"40":4}}],["api",{"1":{"40":4}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":4}}],["applied",{"1":{"25":2,"29":1}}],["application",{"1":{"1":1,"48":1}}],["apply",{"1":{"19":1}}],["appearance",{"1":{"55":2}}],["appear",{"1":{"7":1,"11":1,"19":1,"25":1,"29":1,"35":1}}],["appears",{"1":{"0":1}}],["appwrite",{"1":{"0":1,"1":3,"2":2,"3":1,"4":1,"5":2,"6":3,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":2,"16":1,"17":1,"18":1,"19":1,"20":3,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":4,"34":5,"35":1,"36":3,"37":3,"38":1,"39":2,"40":6,"41":2,"42":1,"43":7,"44":29,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":1,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["aa",{"1":{"2":75,"37":1}}],["achintya",{"1":{"44":2}}],["academic",{"1":{"40":1}}],["access",{"1":{"41":1,"48":1}}],["accessibile",{"1":{"44":1}}],["accessibility",{"1":{"37":1,"44":1}}],["accessible",{"1":{"25":1}}],["accepted",{"1":{"17":9}}],["according",{"1":{"21":1,"36":1}}],["active",{"1":{"14":1}}],["activity",{"1":{"14":3}}],["actions",{"1":{"1":15,"11":1,"29":1,"37":1}}],["action",{"0":{"0":1},"1":{"0":17,"1":133,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":7,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":3,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["across",{"1":{"1":1,"37":1,"41":1,"50":1,"57":1}}],["attach",{"1":{"54":1}}],["attachment",{"1":{"7":1,"10":1}}],["attribute",{"1":{"15":2,"22":1,"25":1,"30":1,"32":1}}],["attention",{"1":{"11":1,"20":1}}],["at",{"1":{"1":1,"22":1,"25":9,"30":1,"32":1,"40":2,"44":18}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["archive",{"1":{"40":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3,"40":18}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"2":8,"4":2,"5":6,"7":4,"8":18,"9":5,"10":4,"11":15,"12":4,"14":4,"15":10,"16":39,"17":16,"18":2,"20":18,"25":45,"27":6,"29":10,"33":69,"34":8,"35":4,"47":7,"48":6,"49":12}}],["areas",{"1":{"19":1,"48":1}}],["are",{"1":{"1":1,"2":4,"4":1,"5":16,"7":1,"8":1,"11":2,"15":1,"20":3,"21":2,"22":2,"24":1,"25":5,"29":1,"30":2,"31":1,"32":4,"33":2,"34":3,"36":2,"37":2,"40":5,"42":3,"55":1,"59":1}}],["algolia",{"1":{"40":4}}],["along",{"1":{"39":1}}],["align",{"1":{"35":5,"53":7,"57":5}}],["aligned",{"1":{"22":2,"30":2,"32":2,"40":2}}],["alignments",{"1":{"6":1,"53":2}}],["alignment",{"1":{"6":1,"53":1}}],["always",{"1":{"14":1,"44":1}}],["alt",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"40":9,"44":1}}],["allowed",{"1":{"15":1,"22":1,"30":1,"32":1}}],["allows",{"1":{"13":1,"14":1,"17":1,"25":1,"41":1,"49":1}}],["allow",{"1":{"5":16,"6":1,"10":7,"11":1,"21":3,"22":3,"29":1,"30":3,"32":3,"33":1,"34":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":10,"9":1,"10":1,"11":1,"12":1,"13":2,"14":2,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":4,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":2,"38":1,"39":1,"40":2,"41":4,"42":1,"43":1,"44":2,"45":1,"46":2,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":4,"58":1,"59":1}}],["alerts",{"1":{"1":8,"36":1,"37":4,"39":2}}],["alert",{"0":{"1":1},"1":{"0":2,"1":254,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["any",{"1":{"45":1}}],["announcing",{"1":{"44":1}}],["annotation",{"1":{"40":1}}],["angular",{"1":{"40":4}}],["anonymous",{"1":{"40":1}}],["another",{"1":{"20":1}}],["an",{"1":{"0":1,"2":4,"6":1,"7":3,"10":1,"11":1,"14":1,"15":2,"16":1,"17":1,"20":2,"22":1,"23":1,"24":2,"25":9,"27":1,"29":1,"31":1,"32":1,"34":3,"39":1,"40":1,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":4}}],["and",{"1":{"0":1,"1":4,"2":4,"6":1,"7":1,"11":2,"14":1,"17":10,"19":1,"20":6,"21":3,"22":2,"23":1,"25":2,"28":1,"29":1,"30":2,"32":2,"33":3,"34":7,"35":1,"36":5,"37":5,"39":4,"40":5,"41":7,"42":4,"43":1,"44":9,"45":2,"46":2,"47":1,"50":1,"53":1,"55":1,"57":1,"59":1}}],["a",{"1":{"0":2,"1":53,"2":8,"3":4,"4":5,"5":27,"6":4,"7":9,"8":4,"10":1,"11":4,"13":2,"14":11,"15":5,"16":2,"17":24,"18":4,"19":4,"20":11,"21":5,"22":7,"23":4,"24":4,"25":26,"26":2,"27":7,"28":2,"29":1,"30":9,"31":5,"32":8,"33":13,"34":7,"35":2,"36":2,"37":2,"38":2,"39":3,"40":6,"41":2,"42":7,"43":1,"44":1,"45":3,"46":4,"48":15,"49":6,"55":1}}],["lead",{"1":{"44":2}}],["learn",{"1":{"38":1}}],["legibility",{"1":{"22":1,"30":1,"32":1,"40":1}}],["letter",{"1":{"20":1}}],["letters",{"1":{"2":3}}],["level",{"1":{"8":3,"11":4,"17":3,"37":1,"42":58,"47":1}}],["left",{"1":{"8":2,"14":3,"20":2,"40":7,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":2,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1,"40":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"40":1,"44":1,"58":3}}],["linux",{"1":{"40":4}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"13":1,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":4,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":4}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"40":1,"42":5,"43":2}}],["li",{"1":{"2":40,"3":4,"5":18,"6":32,"8":16,"10":18,"11":4,"12":6,"13":18,"14":8,"15":12,"16":12,"17":4,"20":8,"25":60,"27":18,"46":12,"47":4,"48":10,"49":16}}],["lists",{"1":{"6":2,"21":2,"42":1}}],["list",{"0":{"3":1,"6":1,"27":1},"1":{"0":3,"1":3,"2":4,"3":24,"4":4,"5":21,"6":38,"7":4,"8":3,"9":3,"10":3,"11":7,"12":3,"13":3,"14":6,"15":15,"16":7,"17":7,"18":3,"19":3,"20":9,"21":3,"22":4,"23":3,"24":3,"25":49,"26":4,"27":55,"28":4,"29":3,"30":5,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":6,"41":3,"42":3,"43":3,"44":3,"45":3,"46":3,"47":6,"48":9,"49":4,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["lt",{"1":{"0":24,"1":500,"2":131,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":121,"11":153,"12":88,"13":60,"14":36,"15":53,"16":144,"17":128,"18":28,"19":12,"20":96,"21":14,"22":17,"23":2,"24":40,"25":544,"26":6,"27":62,"28":4,"29":46,"30":7,"31":36,"32":7,"33":835,"34":52,"35":24,"36":8,"37":2,"38":6,"39":8,"41":12,"42":36,"43":4,"44":16,"45":4,"46":26,"47":38,"48":58,"49":64,"50":2,"51":16,"52":2,"53":8,"54":4,"55":3,"56":10,"57":10,"59":6}}],["lopes",{"1":{"44":1}}],["lohanidamodar",{"1":{"44":1}}],["lohani",{"1":{"44":1}}],["logout",{"1":{"40":2}}],["logs",{"1":{"4":1}}],["look",{"1":{"36":1,"39":1}}],["lorem",{"1":{"33":3}}],["long",{"1":{"20":1,"29":3}}],["lot",{"1":{"20":1}}],["load",{"1":{"14":1}}],["loading",{"1":{"9":1}}],["loaders",{"1":{"28":1}}],["loader",{"0":{"9":1,"28":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":11,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":5,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":3,"28":10,"29":3,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["local",{"1":{"54":1}}],["location",{"1":{"17":1,"40":1}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3,"40":2}}],["lowercase",{"1":{"2":1}}],["layers",{"1":{"44":1}}],["layered",{"1":{"39":1}}],["layout",{"0":{"45":1,"46":1,"47":1,"48":1,"49":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":2,"36":1,"37":1,"38":1,"39":3,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":3,"47":2,"48":2,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["landing",{"1":{"20":1}}],["language",{"1":{"1":1,"38":2,"41":2}}],["larger",{"1":{"41":4}}],["large",{"1":{"2":11,"13":3,"20":5,"22":5,"30":4,"32":4,"36":3,"39":8,"41":5,"46":1,"49":1}}],["labels",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1,"42":1}}],["label",{"0":{"10":1},"1":{"0":1,"1":16,"2":5,"3":1,"4":1,"5":8,"6":5,"7":3,"8":7,"9":2,"10":21,"11":30,"12":1,"13":1,"14":3,"15":5,"16":23,"17":6,"18":2,"19":1,"20":10,"21":7,"22":3,"23":1,"24":2,"25":131,"26":1,"27":1,"28":1,"29":6,"30":3,"31":1,"32":3,"33":37,"34":2,"35":2,"36":1,"37":1,"38":1,"39":1,"40":4,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":4,"48":1,"49":11,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["f02e65",{"1":{"44":2}}],["family",{"1":{"57":3}}],["fallbacks",{"1":{"57":2}}],["facebook",{"1":{"40":4}}],["fast",{"1":{"40":1}}],["failed",{"1":{"9":1,"16":3,"31":6,"34":1}}],["features",{"1":{"35":1,"44":1}}],["few",{"1":{"25":1,"31":1}}],["feedback",{"1":{"1":15,"11":3,"25":2}}],["frontend",{"1":{"44":2}}],["from",{"1":{"2":1,"6":1,"22":5,"25":1,"30":3,"33":1}}],["framework",{"1":{"44":1}}],["friendly",{"1":{"44":1}}],["free",{"1":{"10":6}}],["fux",{"1":{"44":1}}],["fun",{"1":{"44":1}}],["functions",{"1":{"44":1,"50":1}}],["functionality",{"1":{"25":1}}],["function",{"1":{"4":6,"25":9}}],["fully",{"1":{"44":2}}],["full",{"1":{"1":10,"5":2,"6":2,"12":1,"16":2,"17":3,"25":18,"44":1,"53":2,"57":2}}],["fogelito",{"1":{"44":1}}],["fogel",{"1":{"44":1}}],["font",{"1":{"42":3,"57":21}}],["fonts",{"1":{"42":1}}],["football",{"1":{"25":3}}],["footer",{"1":{"11":6}}],["follow",{"1":{"43":1}}],["follows",{"1":{"37":1}}],["following",{"1":{"15":1,"22":1,"24":1,"29":1,"30":1,"32":1,"43":2}}],["folder",{"1":{"12":1,"40":5}}],["focus",{"1":{"10":7,"21":10,"35":1,"55":1}}],["focused",{"1":{"4":1}}],["founder",{"1":{"44":1}}],["foundations",{"0":{"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["four",{"1":{"2":2,"6":1,"8":1,"14":1,"20":1}}],["forward",{"1":{"40":1}}],["foreach",{"1":{"22":2}}],["for",{"1":{"1":15,"2":2,"4":1,"6":1,"10":6,"11":5,"13":1,"14":1,"16":6,"20":2,"21":3,"22":1,"24":1,"25":5,"30":1,"31":1,"32":2,"33":1,"34":7,"36":1,"37":7,"38":1,"39":1,"40":1,"41":2,"42":8,"43":1,"44":6,"52":1,"54":1}}],["forms",{"1":{"25":1}}],["form",{"1":{"1":1,"5":5,"11":17,"25":71,"44":1}}],["flutter",{"1":{"40":4}}],["flag",{"1":{"40":1}}],["flags",{"1":{"10":6}}],["flat",{"1":{"39":1}}],["float",{"1":{"35":1,"36":1}}],["floating",{"1":{"0":1,"39":4}}],["floyd",{"1":{"17":6}}],["flexbox",{"1":{"53":1}}],["flex",{"1":{"0":2,"1":20,"4":1,"6":5,"8":12,"9":7,"10":35,"11":8,"12":13,"17":10,"18":1,"19":4,"21":2,"25":11,"33":23,"44":2,"47":2,"53":31}}],["fit",{"1":{"42":1,"46":1,"49":1}}],["firefox",{"1":{"40":4,"55":1}}],["first",{"1":{"20":1,"21":1,"22":1,"30":1,"32":1,"33":19,"40":2}}],["firstname",{"1":{"4":6}}],["figma",{"1":{"40":4}}],["finger",{"1":{"40":1}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filter",{"1":{"40":2}}],["film",{"1":{"40":1}}],["films",{"1":{"3":6}}],["filled",{"1":{"46":1}}],["fill",{"1":{"13":1}}],["filename",{"1":{"33":9}}],["file1",{"1":{"16":6}}],["files",{"1":{"16":1,"17":9,"40":1,"43":1}}],["file",{"0":{"7":1,"17":1},"1":{"0":2,"1":2,"2":3,"3":2,"4":2,"5":2,"6":3,"7":18,"8":3,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":16,"17":70,"18":3,"19":2,"20":2,"21":4,"22":2,"23":3,"24":2,"25":9,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":3,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["fixed",{"1":{"54":2}}],["fix",{"1":{"1":1,"25":1}}],["five",{"1":{"1":1,"2":2,"5":1,"11":1,"33":1}}],["fields",{"1":{"20":2,"25":3,"36":1,"55":2}}],["field",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":20,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pxtorem",{"1":{"50":46,"53":50,"54":20,"57":4}}],["python",{"1":{"40":4}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":4}}],["photograph",{"1":{"40":1}}],["phone",{"1":{"40":4}}],["put",{"1":{"41":1}}],["puzzle",{"1":{"40":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["plus",{"1":{"20":2,"33":1,"40":3,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1,"40":2}}],["placed",{"1":{"20":1}}],["placeholder",{"1":{"11":4,"25":31,"55":2}}],["placement",{"1":{"6":2,"34":2}}],["plan",{"1":{"10":13}}],["pngs",{"1":{"17":9}}],["png",{"1":{"7":1,"17":6,"33":9}}],["podio",{"1":{"40":4}}],["pound",{"1":{"40":1}}],["popup",{"1":{"15":2,"17":3,"25":3,"35":4}}],["popovers",{"1":{"36":1,"39":2}}],["popover",{"1":{"6":1,"18":1}}],["posts",{"1":{"25":1}}],["possible",{"1":{"15":1,"24":1,"32":1}}],["positions",{"1":{"8":2}}],["position",{"0":{"54":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":7,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":2,"54":20,"55":2,"56":1,"57":1,"58":1,"59":1}}],["pointer",{"1":{"10":7,"33":2,"52":3}}],["pixels",{"1":{"50":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":4}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["pie",{"1":{"40":1,"48":1}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1,"40":2}}],["pending",{"1":{"2":1,"9":1,"16":3,"31":6}}],["perception",{"1":{"42":1}}],["perceived",{"1":{"42":1}}],["percent",{"1":{"4":1,"10":6,"53":7}}],["perform",{"1":{"20":1}}],["performed",{"1":{"1":1}}],["perspective",{"1":{"40":4}}],["personal",{"1":{"10":3}}],["person",{"1":{"2":1}}],["persist",{"1":{"1":1}}],["p",{"1":{"1":40,"3":4,"5":22,"7":2,"8":6,"9":7,"10":20,"11":2,"12":8,"16":6,"17":8,"25":22,"26":2,"27":4,"29":2,"33":28,"35":2,"38":8,"39":4,"41":12,"42":12,"45":2,"52":2,"54":2,"56":10,"57":8,"59":4}}],["prioritize",{"1":{"44":1}}],["priority",{"1":{"39":1}}],["printer",{"1":{"40":1}}],["print",{"1":{"40":1}}],["principal",{"1":{"20":1}}],["primary",{"1":{"20":7,"37":8,"44":1}}],["privacy",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["practice",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"49":1,"55":1}}],["prev",{"1":{"49":5}}],["preview",{"0":{"7":1},"1":{"0":2,"1":21,"2":7,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":4,"14":2,"15":4,"16":3,"17":4,"18":2,"19":3,"20":5,"21":3,"22":4,"23":2,"24":4,"25":16,"26":2,"27":4,"28":3,"29":4,"30":4,"31":2,"32":4,"33":8,"34":3,"35":2,"36":5,"37":1,"38":1,"39":2,"40":1,"41":1,"42":5,"43":1,"44":1,"45":2,"46":2,"47":2,"48":2,"49":2,"50":1,"51":2,"52":1,"53":2,"54":1,"55":2,"56":2,"57":2,"58":1,"59":1}}],["precia",{"1":{"44":1}}],["preferred",{"1":{"44":2}}],["preserve",{"1":{"42":1}}],["presented",{"1":{"50":1}}],["presentation",{"1":{"40":2}}],["present",{"1":{"1":1}}],["press",{"1":{"26":3}}],["pre",{"1":{"4":12}}],["properties",{"1":{"51":2,"52":1,"56":1,"58":1,"59":1}}],["project",{"1":{"43":3}}],["projects",{"1":{"10":6}}],["product",{"1":{"40":1,"42":1,"44":1}}],["products",{"1":{"37":1,"44":2,"50":1,"57":1}}],["processing",{"1":{"31":6,"34":1}}],["process",{"1":{"31":1}}],["pro",{"1":{"10":3}}],["problem",{"1":{"1":1,"53":1}}],["provides",{"1":{"25":2}}],["provide",{"1":{"1":19,"9":21,"11":3,"25":3,"34":2,"35":1,"42":3,"48":1}}],["profiles",{"1":{"18":1}}],["profile",{"0":{"18":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":2,"18":15,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["progressbar",{"1":{"16":7}}],["progressively",{"1":{"5":16}}],["progress",{"0":{"12":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":2,"12":24,"13":2,"14":1,"15":1,"16":16,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["package",{"1":{"43":2}}],["paypal",{"1":{"40":4}}],["pangea",{"1":{"40":4}}],["panels",{"1":{"4":1}}],["panel",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":10,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["pause",{"1":{"40":1}}],["paper",{"1":{"40":2}}],["palette",{"1":{"37":3}}],["pair",{"1":{"20":1}}],["pages",{"1":{"20":1,"49":3}}],["page",{"1":{"20":1,"42":1,"49":9}}],["pagination",{"0":{"49":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":19,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["parnasa",{"1":{"44":1}}],["parhi",{"1":{"44":1}}],["parent",{"1":{"39":1}}],["parameters",{"1":{"25":1,"46":2}}],["paragraphs",{"1":{"42":1}}],["paragraph",{"1":{"5":3}}],["part",{"1":{"20":1,"23":3,"36":1,"41":1}}],["partials",{"1":{"38":1}}],["partial",{"1":{"17":1,"35":2,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["paddings",{"1":{"50":1}}],["padding",{"1":{"5":1,"9":7,"10":9,"17":3,"18":1,"25":9,"29":1,"33":4,"41":15,"50":67}}],["patronizing",{"1":{"1":1}}],["h1",{"1":{"42":2}}],["hsl",{"1":{"37":3,"38":4,"51":8,"53":6}}],["hunt",{"1":{"40":1}}],["hustle",{"1":{"33":18}}],["human",{"1":{"1":1}}],["h3",{"1":{"12":8,"42":2}}],["h2",{"1":{"8":6,"25":2,"42":2,"47":2}}],["h5",{"1":{"3":4,"17":6,"42":4}}],["href",{"1":{"3":2,"7":2,"14":4,"25":2,"27":1,"33":3,"34":1,"43":2,"48":6,"49":3}}],["hierarchy",{"1":{"39":1,"42":1}}],["hiding",{"1":{"29":1}}],["hides",{"1":{"56":1,"58":1}}],["hide",{"1":{"5":16,"11":1,"14":1,"25":10,"33":14,"38":1,"49":1,"59":4}}],["hidden",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":3,"15":6,"16":8,"17":11,"18":1,"20":9,"25":30,"27":6,"29":9,"33":40,"34":8,"35":3,"47":4,"48":6,"49":2,"55":1,"57":3,"59":2}}],["high",{"1":{"2":1}}],["https",{"1":{"2":1,"7":1,"33":9,"43":2}}],["html5",{"1":{"40":4}}],["html",{"1":{"0":1,"1":20,"2":5,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":3,"14":1,"15":3,"16":2,"17":3,"18":1,"19":2,"20":4,"21":2,"22":3,"23":1,"24":3,"25":15,"26":1,"27":3,"28":2,"29":3,"30":3,"31":1,"32":3,"33":7,"34":2,"35":1,"36":4,"39":1,"42":5,"43":1,"45":1,"46":1,"47":1,"48":1,"49":1,"51":1,"53":1,"55":1,"56":1,"57":1}}],["hausleiter",{"1":{"44":1}}],["hardiksachan",{"1":{"44":1}}],["hardik",{"1":{"44":1}}],["happy",{"1":{"40":1}}],["happen",{"1":{"5":9}}],["hand",{"1":{"21":1,"40":1}}],["have",{"1":{"2":4,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["hashtag",{"1":{"40":1}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heart",{"1":{"40":1}}],["head",{"1":{"33":2,"43":1}}],["headings",{"1":{"42":5}}],["heading",{"1":{"8":6,"11":4,"17":3,"25":2,"33":30,"34":1,"42":41,"47":1,"57":2}}],["headers",{"1":{"5":16,"42":1}}],["header",{"0":{"47":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":4,"5":1,"6":1,"7":1,"8":19,"9":1,"10":1,"11":20,"12":1,"13":1,"14":1,"15":1,"16":9,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":2,"47":21,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["heroicons",{"1":{"40":1}}],["here",{"1":{"17":12,"25":2,"41":1}}],["heght",{"1":{"33":1}}],["height",{"1":{"10":12,"25":10,"29":1,"33":18,"53":7,"57":11}}],["hello",{"1":{"4":6,"16":18}}],["helps",{"1":{"37":1}}],["helper",{"1":{"17":1,"25":14}}],["help",{"1":{"1":1,"6":1,"34":1,"49":1,"51":1}}],["hold",{"1":{"45":1}}],["hover",{"1":{"15":1,"17":2,"29":1,"35":1}}],["horizontally",{"1":{"33":1}}],["horizontal",{"1":{"14":1,"33":11,"40":3}}],["how",{"1":{"1":1,"25":1,"38":1,"53":1}}],["home",{"0":{"44":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":2,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["h4",{"1":{"1":10,"10":6,"11":8,"16":4,"42":4}}],["h6",{"1":{"1":30,"42":6}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"1":{"40":4}}],["globe",{"1":{"40":2}}],["global",{"1":{"38":2}}],["g",{"1":{"34":1,"39":2,"44":1}}],["gmail",{"1":{"25":8}}],["gt",{"1":{"11":1,"33":2,"43":1}}],["gif",{"1":{"44":1}}],["gift",{"1":{"40":1}}],["git",{"1":{"40":6,"44":2}}],["gitlab",{"1":{"2":2,"40":4}}],["github",{"1":{"2":2,"40":4,"44":3}}],["give",{"1":{"1":1}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":27,"21":1,"40":1,"45":1,"48":1}}],["groups",{"1":{"2":3}}],["green",{"1":{"2":7,"34":1,"37":2}}],["graphql",{"1":{"40":1}}],["graph",{"1":{"12":4}}],["graphical",{"1":{"2":1}}],["grayscale",{"1":{"40":1}}],["gray",{"1":{"2":1,"10":3,"25":4,"34":1,"40":2,"51":3}}],["grid",{"0":{"8":1,"46":1,"47":1},"1":{"0":3,"1":18,"2":3,"3":3,"4":13,"5":3,"6":5,"7":4,"8":35,"9":4,"10":6,"11":3,"12":3,"13":3,"14":3,"15":11,"16":3,"17":3,"18":3,"19":3,"20":3,"21":3,"22":3,"23":3,"24":3,"25":3,"26":3,"27":3,"28":3,"29":3,"30":3,"31":3,"32":3,"33":3,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":5,"41":3,"42":4,"43":3,"44":3,"45":4,"46":21,"47":26,"48":4,"49":3,"50":3,"51":3,"52":3,"53":7,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["gewenyu99",{"1":{"44":1}}],["ge",{"1":{"44":1}}],["getelementsbyclassname",{"1":{"22":2}}],["get",{"1":{"21":1,"44":1,"46":1}}],["getting",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["germany",{"1":{"10":4}}],["generic",{"1":{"1":1}}],["general",{"1":{"1":1,"34":1,"40":1}}],["generated",{"1":{"1":2}}],["gap",{"1":{"0":2,"1":5,"4":1,"8":10,"9":7,"10":19,"11":8,"12":13,"17":3,"18":1,"19":4,"21":2,"25":5,"33":13,"44":2,"46":3,"47":1,"53":75}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":4}}],["ionic",{"1":{"40":1}}],["ipad",{"1":{"40":1}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identification",{"1":{"40":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":7}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"53":1}}],["it",{"1":{"2":1,"7":1,"14":1,"20":1,"33":10,"36":1,"42":1,"43":2,"44":1,"45":1}}],["items",{"1":{"8":2,"14":2,"15":1,"22":3,"24":1,"25":2,"27":3,"36":1,"46":1,"53":4}}],["item",{"0":{"8":1},"1":{"0":1,"1":1,"2":21,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":39,"14":7,"15":9,"16":9,"17":1,"18":1,"19":1,"20":14,"21":1,"22":2,"23":1,"24":1,"25":43,"26":1,"27":41,"28":1,"29":1,"30":5,"31":1,"32":4,"33":10,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":7,"47":3,"48":24,"49":9,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["important",{"1":{"50":48,"53":7,"54":1,"56":5,"57":9,"59":8}}],["import",{"1":{"43":2,"44":1}}],["importing",{"1":{"43":1}}],["imply",{"1":{"22":1}}],["implementation",{"1":{"38":1,"41":1}}],["implement",{"1":{"22":3}}],["img",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["images",{"1":{"21":1}}],["image",{"1":{"1":5,"2":2,"7":6,"16":8,"17":5,"33":36}}],["if",{"1":{"1":1,"5":9,"6":2,"14":3,"21":1,"22":1,"30":1,"32":2,"33":1,"34":2,"40":2,"42":1}}],["icon",{"1":{"1":50,"2":10,"4":2,"5":12,"6":1,"7":2,"8":13,"9":5,"10":4,"11":12,"12":4,"14":2,"15":11,"16":16,"17":13,"18":1,"20":15,"25":29,"27":7,"29":5,"31":9,"33":62,"34":11,"35":3,"36":1,"40":615,"47":4,"48":6,"49":4,"51":8,"57":2}}],["icons",{"0":{"40":1},"1":{"0":1,"1":1,"2":3,"3":1,"4":1,"5":1,"6":4,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":1,"18":1,"19":1,"20":5,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":5,"35":1,"36":1,"37":1,"38":1,"39":2,"40":10,"41":2,"42":1,"43":5,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["isn",{"1":{"15":1,"22":1,"30":1,"32":1}}],["is",{"1":{"0":6,"1":169,"2":52,"4":3,"6":23,"7":5,"8":2,"9":7,"10":16,"11":30,"12":2,"13":4,"14":7,"15":8,"16":6,"17":23,"20":23,"21":6,"22":9,"24":7,"25":56,"27":1,"28":2,"29":11,"30":4,"31":10,"32":4,"33":97,"34":11,"35":4,"36":1,"37":3,"38":1,"39":2,"40":1,"41":1,"42":4,"43":1,"44":8,"45":1,"47":3,"48":1,"49":12,"50":1,"53":1,"55":1,"56":10}}],["infinite",{"1":{"41":2}}],["informative",{"1":{"34":4,"37":1}}],["information",{"1":{"1":4,"5":16,"11":1,"25":6,"34":4,"35":1,"37":6,"42":1,"49":1}}],["inform",{"1":{"1":1,"34":1}}],["info",{"1":{"0":1,"1":26,"17":11,"18":4,"24":3,"25":7,"34":8,"35":2,"37":1,"40":1,"51":3}}],["inbox",{"1":{"40":2}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":4}}],["instructions",{"1":{"25":1}}],["inset",{"1":{"25":13,"54":77}}],["inside",{"1":{"4":1,"20":1,"21":1,"24":1,"33":1,"38":1}}],["integrate",{"1":{"44":1}}],["internal",{"1":{"44":1}}],["interfaces",{"1":{"43":1,"44":2,"45":1}}],["interface",{"1":{"35":1}}],["interact",{"1":{"25":2,"29":1}}],["interacts",{"1":{"20":1}}],["interacting",{"1":{"11":1}}],["interactive",{"1":{"8":9,"18":2,"29":19,"33":9,"34":12}}],["into",{"1":{"24":1,"25":3,"40":1,"43":1,"45":1}}],["index",{"1":{"54":13}}],["independently",{"1":{"32":1}}],["indeterminate",{"1":{"22":12}}],["indication",{"1":{"25":2}}],["indicating",{"1":{"24":1}}],["indicates",{"1":{"31":1,"39":1}}],["indicate",{"1":{"23":1,"28":1,"37":1}}],["india",{"1":{"10":4}}],["initial",{"1":{"57":2}}],["initialize",{"1":{"20":1}}],["initials",{"1":{"2":2}}],["inner",{"1":{"15":1,"33":1}}],["innovative",{"1":{"3":6}}],["including",{"1":{"53":1}}],["include",{"1":{"11":1,"21":2,"43":3,"57":5}}],["incoming",{"1":{"40":1}}],["incorrect",{"1":{"25":2}}],["incorporate",{"1":{"24":1}}],["inconsistent",{"1":{"2":1}}],["increase",{"1":{"2":1,"20":3}}],["in",{"1":{"1":6,"2":5,"5":1,"6":4,"7":3,"11":1,"14":3,"15":1,"20":10,"21":3,"22":3,"24":1,"25":8,"27":3,"28":1,"29":1,"30":3,"32":4,"33":5,"34":4,"35":1,"36":3,"37":5,"38":2,"39":2,"40":7,"41":5,"42":1,"43":3,"44":2,"46":2,"47":7,"48":1,"49":1,"50":1,"51":1,"53":1}}],["input",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":10,"11":6,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":3,"21":3,"22":13,"23":1,"24":2,"25":81,"26":2,"27":1,"28":1,"29":1,"30":8,"31":1,"32":8,"33":3,"34":1,"35":1,"36":2,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":10,"56":1,"57":1,"58":1,"59":1}}],["inputs",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":4,"56":2,"57":1,"58":1,"59":1}}],["inline",{"0":{"9":1,"23":1,"24":1},"1":{"0":4,"1":7,"2":3,"3":3,"4":4,"5":4,"6":13,"7":3,"8":4,"9":5,"10":13,"11":6,"12":3,"13":3,"14":3,"15":3,"16":4,"17":18,"18":4,"19":3,"20":3,"21":3,"22":4,"23":11,"24":18,"25":17,"26":3,"27":3,"28":3,"29":4,"30":3,"31":3,"32":3,"33":14,"34":3,"35":3,"36":3,"37":3,"38":3,"39":3,"40":3,"41":3,"42":7,"43":3,"44":5,"45":3,"46":3,"47":4,"48":3,"49":3,"50":57,"51":3,"52":3,"53":46,"54":42,"55":3,"56":3,"57":3,"58":3,"59":3}}],["dynamic",{"1":{"46":2}}],["during",{"1":{"42":1,"50":1}}],["duration",{"1":{"33":12}}],["duplicate",{"1":{"8":3,"11":1,"18":1,"20":1,"25":1,"29":4,"33":9,"34":4,"35":2,"40":2}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":4}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":4}}],["dropdown",{"1":{"25":3}}],["drop",{"0":{"6":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":2,"6":79,"7":2,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":26,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":2,"48":15,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["doesn",{"1":{"42":1,"49":1}}],["dotnet",{"1":{"40":4}}],["dots",{"1":{"33":11,"40":3}}],["docker",{"1":{"40":4}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"40":8,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["dowm",{"1":{"40":1}}],["download",{"1":{"20":1,"40":4}}],["down",{"1":{"5":6,"16":2,"25":9,"40":7}}],["dollar",{"1":{"40":1}}],["double",{"1":{"40":4}}],["doing",{"1":{"24":1}}],["don",{"1":{"1":1,"2":2,"6":1,"20":1,"22":1,"30":1,"32":1,"34":4,"36":1,"39":1,"40":1,"42":1,"49":1}}],["done",{"1":{"1":1}}],["do",{"1":{"1":1,"2":4,"6":2,"20":1,"22":2,"30":2,"32":2,"34":2,"36":2,"39":2,"40":3,"42":2,"44":1,"49":1}}],["damodar",{"1":{"44":1}}],["dart",{"1":{"40":4}}],["dark",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":10,"34":1,"35":1,"36":1,"37":3,"38":15,"39":2,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":6,"59":1}}],["dailymotion",{"1":{"40":4}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"1":{"40":1,"44":1,"47":3}}],["data",{"1":{"4":3,"25":1,"33":83,"44":2,"49":1}}],["dashed",{"1":{"17":3,"21":4}}],["danger",{"1":{"1":6,"9":1,"12":2,"16":1,"17":1,"25":1,"34":3,"37":7,"51":3}}],["decoration",{"1":{"57":1}}],["declared",{"1":{"38":1}}],["devrel",{"1":{"44":1}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":3,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":4}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["designer",{"1":{"44":1}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":2,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"40":1,"47":1,"49":1,"53":1,"56":7}}],["descending",{"1":{"40":1}}],["desc",{"1":{"3":3}}],["description",{"1":{"1":46,"3":1,"5":9,"18":3}}],["definition",{"1":{"53":1}}],["defines",{"1":{"46":1}}],["define",{"1":{"3":2,"47":5,"50":1,"54":2,"57":1}}],["default",{"1":{"1":31,"2":2,"17":1,"20":2,"21":1,"25":4,"31":1,"33":2,"34":4,"38":1,"44":1,"54":1}}],["depending",{"1":{"1":1,"34":2,"56":1,"58":1}}],["difference",{"1":{"55":1}}],["differentiate",{"1":{"34":1}}],["different",{"1":{"2":4,"25":1,"31":1,"34":1,"36":1,"41":1,"48":1}}],["dittmann",{"1":{"44":1}}],["direction",{"1":{"53":3,"54":5,"57":2}}],["directions",{"1":{"33":6}}],["directly",{"1":{"42":1}}],["directory",{"1":{"40":1,"43":1}}],["directors",{"1":{"33":6}}],["dialogue",{"1":{"25":1}}],["dialog6",{"1":{"11":1}}],["dialog5",{"1":{"11":1}}],["dialog4",{"1":{"11":1}}],["dialog",{"1":{"11":14}}],["disqus",{"1":{"40":4}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":4,"44":3}}],["discoverable",{"1":{"25":1}}],["disclose",{"1":{"5":15}}],["disabling",{"1":{"22":1}}],["disable",{"1":{"15":1,"22":1,"30":1,"32":1}}],["disabled",{"1":{"4":1,"8":13,"10":5,"13":3,"14":1,"15":4,"22":5,"24":2,"25":9,"30":4,"32":4,"34":2,"37":1,"49":2,"51":3}}],["dismissed",{"1":{"1":1,"11":1}}],["displays",{"1":{"16":2,"25":1,"26":1}}],["displayed",{"1":{"2":1,"15":1,"29":2,"53":1}}],["display",{"0":{"53":1},"1":{"0":1,"1":2,"2":3,"3":1,"4":2,"5":18,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":1,"17":4,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":2,"53":13,"54":2,"55":1,"56":6,"57":4,"58":5,"59":2}}],["divides",{"1":{"45":1}}],["div",{"1":{"0":4,"1":120,"2":70,"3":4,"4":14,"5":38,"6":46,"7":10,"8":56,"9":20,"10":24,"11":40,"12":24,"14":2,"15":6,"16":36,"17":30,"18":8,"19":12,"25":76,"28":4,"29":16,"31":12,"33":136,"34":12,"36":8,"37":1,"39":4,"44":6,"45":2,"46":12,"47":6,"48":6,"50":2,"51":16,"53":8,"57":2,"59":2}}],["tglide",{"1":{"44":1}}],["tumbler",{"1":{"40":2}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["twitter",{"1":{"40":4}}],["twitch",{"1":{"40":4}}],["twilio",{"1":{"40":1}}],["two",{"1":{"1":1,"2":1,"5":3,"13":1,"15":1,"20":1,"21":1,"25":5,"27":1,"29":1,"32":1,"33":1,"35":1,"39":2,"42":2,"55":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["truck",{"1":{"40":1}}],["true",{"1":{"1":35,"2":4,"4":2,"5":6,"7":2,"8":12,"9":5,"10":4,"11":8,"12":4,"14":2,"15":6,"16":8,"17":11,"18":1,"20":9,"22":4,"25":30,"27":6,"29":5,"30":3,"32":3,"33":37,"34":8,"35":3,"47":4,"48":6,"49":2}}],["trending",{"1":{"40":2}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":4}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["translate",{"1":{"40":1}}],["transparent",{"1":{"11":1,"40":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7,"40":1}}],["trim",{"1":{"3":2,"9":7,"17":2,"25":5,"29":1,"33":1,"47":1,"57":6}}],["t",{"1":{"1":1,"2":2,"6":2,"15":1,"20":1,"22":2,"25":5,"30":2,"32":2,"34":4,"36":1,"39":1,"40":1,"42":2,"49":2}}],["tiktok",{"1":{"40":4}}],["ticket",{"1":{"40":1}}],["time",{"1":{"33":22}}],["times",{"1":{"3":6}}],["tips",{"1":{"1":1,"2":1,"20":1,"34":1,"36":1,"44":1,"49":1}}],["title",{"1":{"1":36,"3":8,"5":3,"11":18,"16":4,"17":5,"33":85,"44":2}}],["telegram",{"1":{"40":4}}],["telesign",{"1":{"40":1}}],["technology",{"1":{"40":1}}],["terminal",{"1":{"40":1}}],["terms",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["template",{"1":{"40":1,"53":1}}],["team",{"1":{"2":1,"18":1,"44":1}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":1}}],["textmagic",{"1":{"40":1}}],["textareas",{"1":{"29":1}}],["textarea",{"1":{"25":6,"29":2}}],["text",{"0":{"57":1},"1":{"0":6,"1":92,"2":3,"3":3,"4":4,"5":15,"6":57,"7":1,"8":15,"9":13,"10":14,"11":32,"12":19,"13":10,"14":5,"15":1,"16":9,"17":14,"18":6,"19":1,"20":30,"21":11,"22":2,"23":3,"24":14,"25":108,"26":2,"27":12,"28":1,"29":37,"30":2,"31":7,"32":2,"33":123,"34":12,"35":5,"36":1,"37":7,"38":1,"39":3,"40":5,"41":1,"42":35,"43":1,"44":1,"45":2,"46":1,"47":3,"48":7,"49":18,"50":1,"51":26,"52":3,"53":1,"54":2,"55":1,"56":2,"57":25,"58":2,"59":4}}],["typically",{"1":{"2":1,"25":1,"34":2}}],["typical",{"1":{"1":15}}],["typescript",{"1":{"40":1}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":6,"3":1,"4":1,"5":8,"6":6,"7":2,"8":2,"10":9,"11":9,"13":3,"14":2,"15":3,"16":3,"17":4,"18":2,"19":1,"20":3,"21":5,"22":14,"23":1,"24":2,"25":48,"26":1,"27":2,"28":1,"29":2,"30":9,"31":3,"32":10,"33":27,"34":3,"35":2,"37":1,"39":1,"45":1,"46":1,"47":5,"48":1,"49":1,"55":2}}],["typography",{"0":{"42":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":2,"42":5,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["thomas",{"1":{"44":1}}],["those",{"1":{"44":1}}],["thumb",{"1":{"40":2}}],["thumbnail",{"1":{"7":1}}],["th",{"1":{"33":58}}],["through",{"1":{"49":1,"51":1}}],["throughout",{"1":{"33":1,"36":1}}],["three",{"1":{"2":1,"5":3,"6":1,"11":1,"18":1,"22":1,"30":1,"32":1,"33":1,"41":1,"46":1}}],["think",{"1":{"6":1}}],["this",{"1":{"1":50,"5":9,"14":1,"21":2,"25":22,"26":1,"29":4,"34":6,"37":1,"38":1,"42":1,"52":2}}],["than",{"1":{"2":1,"14":1,"25":1,"40":1,"41":1}}],["that",{"1":{"0":1,"1":2,"2":2,"5":16,"11":2,"14":1,"15":2,"20":1,"23":1,"25":15,"28":1,"33":1,"34":3,"36":2,"39":2,"42":2,"46":1,"49":1}}],["these",{"1":{"34":1,"44":1}}],["their",{"1":{"34":2,"39":1}}],["thead",{"1":{"33":55}}],["there",{"1":{"2":1,"7":1,"8":1,"14":1,"20":1,"22":2,"25":5,"30":2,"31":1,"32":2,"40":2,"41":1,"42":1,"44":1}}],["them",{"1":{"1":1,"36":1,"40":2,"41":1}}],["theme",{"0":{"38":1,"58":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":3,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":17,"39":3,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":3,"58":6,"59":3}}],["they",{"1":{"1":3,"5":16,"6":2,"11":1,"20":1,"22":1,"25":1,"32":1,"33":1,"40":1,"49":1}}],["the",{"1":{"0":8,"1":110,"2":4,"3":6,"4":1,"5":1,"6":8,"7":1,"8":1,"11":7,"14":9,"15":3,"16":2,"19":1,"20":8,"21":5,"22":8,"24":4,"25":21,"27":1,"29":8,"30":6,"31":1,"32":5,"33":10,"34":16,"35":8,"36":6,"37":5,"38":2,"39":6,"40":10,"41":4,"42":9,"43":8,"44":5,"46":2,"50":7,"51":1,"53":24,"54":11,"55":4,"56":2,"57":17,"58":1,"59":1}}],["torstendittmann",{"1":{"44":1}}],["torsten",{"1":{"44":1}}],["too",{"1":{"36":1}}],["tooling",{"1":{"44":1}}],["tool",{"1":{"0":1}}],["tooltips",{"1":{"35":2,"36":1}}],["tooltip",{"0":{"35":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":9,"16":1,"17":10,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":10,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":2,"35":19,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["totally",{"1":{"10":3}}],["to",{"1":{"1":90,"2":4,"4":5,"5":32,"6":3,"8":2,"10":3,"11":5,"13":3,"14":3,"15":2,"17":11,"19":1,"20":7,"21":7,"22":10,"23":1,"25":27,"26":3,"28":3,"29":3,"30":7,"32":8,"33":4,"34":17,"35":1,"36":6,"37":2,"38":5,"39":3,"40":6,"41":2,"42":7,"43":3,"44":3,"45":1,"48":1,"49":4,"50":1,"51":2,"53":1,"55":1}}],["top",{"1":{"0":1,"4":3,"8":2,"11":1,"12":4,"19":3,"29":2,"33":1,"54":3}}],["toggle",{"0":{"15":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":34,"16":4,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":7,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tax",{"1":{"40":1}}],["tappable",{"1":{"34":1}}],["take",{"1":{"22":1,"54":1}}],["taken",{"1":{"11":1}}],["tall",{"1":{"20":1}}],["task",{"1":{"1":2,"34":3}}],["tab",{"1":{"14":1,"21":1,"33":1}}],["tabs",{"0":{"13":1,"14":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":3,"13":35,"14":29,"15":3,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["tablets",{"1":{"56":9}}],["tablet",{"1":{"56":2}}],["tables",{"1":{"33":5,"36":1,"39":2}}],["table",{"0":{"33":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":2,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":2,"33":211,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":2,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["tags",{"1":{"11":1,"21":1,"25":6,"34":10,"36":1,"42":1}}],["tag",{"0":{"24":1,"34":1},"1":{"0":3,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":6,"9":2,"10":3,"11":2,"12":2,"13":2,"14":2,"15":2,"16":4,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":3,"24":16,"25":7,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":18,"34":23,"35":5,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":3,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["rtl",{"1":{"57":2}}],["richards",{"1":{"44":1}}],["right",{"1":{"8":2,"14":3,"20":1,"27":3,"40":7,"49":1,"54":1,"57":2}}],["rights",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rr",{"1":{"44":4}}],["rss",{"1":{"40":1}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":4}}],["rupee",{"1":{"40":1}}],["ronald",{"1":{"44":2}}],["rowgroup",{"1":{"33":1}}],["rowheader",{"1":{"33":1}}],["rows",{"1":{"33":3,"46":1}}],["row",{"1":{"33":34,"53":33}}],["rounded",{"1":{"19":1,"20":1,"36":1}}],["role",{"1":{"15":2,"16":7,"17":3,"25":7,"33":27,"35":3}}],["rana",{"1":{"44":1}}],["range",{"1":{"41":1}}],["ranges",{"1":{"41":1}}],["rahul",{"1":{"44":1}}],["raw",{"1":{"4":3}}],["radio",{"0":{"30":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":10,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":22,"31":2,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["radius",{"0":{"36":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":19,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":7,"18":2,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":24,"37":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["rem",{"1":{"50":1}}],["remove",{"1":{"17":2,"20":1,"25":2,"33":2,"40":3,"55":2}}],["rel",{"1":{"43":2}}],["relationship",{"1":{"40":1}}],["relation",{"1":{"40":1}}],["relative",{"1":{"39":1,"54":2}}],["related",{"1":{"1":1,"21":1,"22":1,"24":1,"27":1}}],["reusable",{"1":{"43":1,"44":2}}],["regular",{"1":{"42":6}}],["region",{"1":{"10":1}}],["react",{"1":{"40":4}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["rewind",{"1":{"40":1}}],["replay",{"1":{"40":1}}],["report",{"1":{"40":1}}],["represent",{"1":{"37":1}}],["representation",{"1":{"2":1,"7":2,"10":1,"40":1}}],["representing",{"1":{"0":1,"2":1,"4":1,"5":1,"6":1,"7":1,"8":1,"11":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"23":1,"24":1,"26":1,"27":1,"28":1,"29":1,"31":1,"32":1,"33":1,"34":1,"35":1,"45":1,"46":1,"48":1,"49":1}}],["refund",{"1":{"40":1}}],["refresh",{"1":{"33":14,"40":1}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["receipt",{"1":{"40":2}}],["recently",{"1":{"1":1}}],["recognition",{"1":{"6":1,"20":2}}],["recognizable",{"1":{"2":2}}],["recommended",{"1":{"14":1}}],["recommend",{"1":{"6":1,"20":1,"22":1,"34":2,"39":1,"40":1,"42":1}}],["reddit",{"1":{"40":4}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["required",{"1":{"1":1,"25":3,"34":1}}],["resolutions",{"1":{"41":2}}],["reserved",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["resets",{"1":{"44":1}}],["reset",{"0":{"55":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":2,"55":7,"56":2,"57":1,"58":1,"59":1}}],["responsive",{"0":{"41":1,"56":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":3,"41":7,"42":3,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":3,"56":5,"57":3,"58":2,"59":2}}],["bg",{"1":{"38":6}}],["but",{"1":{"40":1,"50":1}}],["buttons",{"1":{"1":20,"11":3,"20":15,"21":2,"24":3,"25":20,"26":3,"29":9,"30":5,"32":1,"33":2,"36":2,"55":2}}],["button",{"0":{"15":1,"20":1,"30":1},"1":{"0":9,"1":183,"2":3,"3":7,"4":9,"5":18,"6":95,"7":3,"8":5,"9":45,"10":5,"11":78,"12":3,"13":32,"14":18,"15":40,"16":34,"17":28,"18":6,"19":4,"20":102,"21":4,"22":3,"23":3,"24":28,"25":92,"26":3,"27":8,"28":3,"29":22,"30":8,"31":4,"32":3,"33":109,"34":7,"35":9,"36":3,"37":3,"38":3,"39":3,"40":4,"41":3,"42":3,"43":3,"44":4,"45":3,"46":3,"47":23,"48":9,"49":27,"50":3,"51":3,"52":3,"53":3,"54":3,"55":3,"56":3,"57":3,"58":3,"59":3}}],["build",{"1":{"44":3}}],["building",{"1":{"40":1,"43":2,"44":4}}],["built",{"1":{"38":1}}],["bulb",{"1":{"40":1}}],["bradley",{"1":{"44":1}}],["branch",{"1":{"40":1}}],["brandon",{"1":{"44":1}}],["brand",{"1":{"37":3}}],["briefcase",{"1":{"40":1}}],["browser",{"1":{"33":1,"44":1,"57":2}}],["breaks",{"1":{"57":1}}],["break3open",{"1":{"41":1}}],["break2open",{"1":{"41":1}}],["break2",{"1":{"41":1}}],["break1",{"1":{"41":1}}],["breakpoints",{"1":{"41":3}}],["break",{"1":{"29":2,"33":9,"49":1,"57":7}}],["br",{"1":{"15":1,"22":1,"25":40,"55":1}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":4}}],["bitbucket",{"1":{"2":2,"40":5}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["b",{"1":{"10":6}}],["blurs",{"1":{"39":1}}],["blue",{"1":{"2":7,"24":1,"34":1,"37":2}}],["blog",{"1":{"25":1}}],["block",{"1":{"3":2,"4":1,"5":6,"6":11,"8":6,"10":9,"16":3,"17":1,"25":21,"26":1,"27":2,"29":1,"33":2,"35":1,"39":2,"45":1,"50":67,"53":19,"54":38,"57":2,"58":2}}],["basis",{"1":{"53":15}}],["baseball",{"1":{"25":3}}],["baseline",{"1":{"8":3,"12":8,"25":2,"53":2}}],["based",{"1":{"1":2,"38":1,"51":1}}],["bačo",{"1":{"44":1}}],["bag",{"1":{"40":1}}],["bangladesh",{"1":{"40":1}}],["ban",{"1":{"40":1}}],["bandwidth",{"1":{"12":6}}],["badge",{"1":{"40":1}}],["backspace",{"1":{"40":1}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["bar",{"0":{"0":1,"12":1},"1":{"0":17,"1":3,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":3,"12":27,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":3,"36":2,"37":2,"38":2,"39":2,"40":4,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behance",{"1":{"40":4}}],["behavior",{"1":{"33":1}}],["behave",{"1":{"13":1,"47":1}}],["beaker",{"1":{"40":1}}],["beneath",{"1":{"39":1}}],["being",{"1":{"38":1,"50":1}}],["better",{"1":{"44":1}}],["beta",{"1":{"34":3}}],["between",{"1":{"11":4,"12":8,"13":2,"14":1,"15":1,"22":1,"30":1,"32":2,"34":1,"39":4,"40":2,"41":1,"53":3,"55":1}}],["begin",{"1":{"27":2}}],["bessiecooper",{"1":{"25":7}}],["bessie",{"1":{"25":4}}],["best",{"1":{"1":1,"2":1,"6":1,"11":1,"14":1,"20":1,"21":1,"22":1,"30":1,"32":1,"34":2,"36":1,"39":1,"40":1,"42":1,"44":1,"49":1,"55":1}}],["before",{"1":{"11":1}}],["bell",{"1":{"10":1,"40":1,"48":1}}],["below",{"1":{"6":1,"15":1,"25":1,"35":1,"37":1,"39":1,"40":1,"41":1,"43":1,"55":1,"59":1}}],["been",{"1":{"1":1,"34":1,"44":1}}],["be",{"1":{"1":4,"2":3,"11":2,"14":3,"20":2,"21":2,"22":2,"23":2,"25":11,"29":2,"30":3,"32":3,"33":2,"34":4,"35":2,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"40":1,"47":1}}],["bookmark",{"1":{"40":2}}],["book",{"1":{"40":1}}],["bolt",{"1":{"10":3,"12":1,"40":1}}],["bold",{"1":{"10":3,"12":4,"25":1,"42":2,"57":5}}],["bottom",{"1":{"8":2,"11":1,"15":2,"19":3,"35":3,"48":1,"54":1}}],["both",{"1":{"1":1,"15":1,"37":1}}],["body",{"1":{"1":1,"10":3,"12":4,"17":3,"25":1,"33":1,"42":25,"58":1}}],["boxes",{"1":{"9":2,"16":1,"17":1,"19":6}}],["box",{"0":{"16":1,"17":1,"19":1,"46":1,"50":1},"1":{"0":5,"1":15,"2":5,"3":5,"4":5,"5":5,"6":7,"7":5,"8":7,"9":19,"10":6,"11":5,"12":5,"13":5,"14":5,"15":6,"16":46,"17":45,"18":6,"19":30,"20":6,"21":5,"22":5,"23":5,"24":5,"25":5,"26":8,"27":5,"28":5,"29":5,"30":5,"31":5,"32":5,"33":5,"34":5,"35":5,"36":5,"37":5,"38":5,"39":7,"40":9,"41":5,"42":6,"43":5,"44":5,"45":6,"46":11,"47":6,"48":5,"49":6,"50":9,"51":6,"52":5,"53":11,"54":5,"55":5,"56":5,"57":7,"58":5,"59":6}}],["borders",{"1":{"21":3,"50":1}}],["border",{"0":{"36":1},"1":{"0":1,"1":1,"2":5,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":19,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":10,"18":2,"19":3,"20":1,"21":3,"22":1,"23":1,"24":1,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":22,"37":3,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":13,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["slack",{"1":{"40":4}}],["skype",{"1":{"40":4}}],["svelte",{"1":{"40":1}}],["svg",{"1":{"10":6,"25":2,"40":1}}],["swift",{"1":{"40":4}}],["switches",{"1":{"22":1,"32":7,"36":1}}],["switch",{"0":{"32":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":3,"14":2,"15":2,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":2,"32":15,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["swatch",{"1":{"40":1}}],["square",{"1":{"40":1}}],["symbol",{"1":{"40":1}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["sm",{"1":{"40":6}}],["small",{"1":{"1":10,"2":18,"8":1,"10":19,"11":10,"22":5,"25":6,"28":2,"30":4,"32":4,"34":1,"36":7,"39":7,"41":9,"46":3,"47":6,"57":12}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":4}}],["safari",{"1":{"40":4,"55":1}}],["safe",{"1":{"8":3}}],["save",{"1":{"40":2}}],["sad",{"1":{"40":1}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["sort",{"1":{"40":2}}],["sorry",{"1":{"25":3}}],["so",{"1":{"20":1,"22":1,"30":1,"32":1,"34":2}}],["sometimes",{"1":{"25":1}}],["something",{"1":{"1":1,"21":1,"28":1}}],["some",{"1":{"1":45,"21":6,"24":1,"41":1,"59":2}}],["spotify",{"1":{"40":4}}],["spin",{"1":{"40":1}}],["speakerphone",{"1":{"40":1}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":1}}],["sparkles",{"1":{"40":1}}],["spacing",{"1":{"19":1,"53":1}}],["space",{"1":{"11":4,"12":8,"14":2,"22":2,"30":1,"32":1,"40":3,"53":3,"57":5}}],["span",{"1":{"0":14,"1":150,"2":10,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":18,"14":12,"15":16,"16":42,"17":60,"18":18,"20":50,"21":4,"24":32,"25":134,"27":30,"29":18,"31":24,"33":290,"34":34,"35":16,"44":2,"47":14,"48":24,"49":28}}],["snippets",{"1":{"13":1,"23":2,"37":1,"42":1}}],["schofield",{"1":{"44":1}}],["scissors",{"1":{"40":1}}],["scss",{"1":{"38":5,"41":6,"50":2,"53":1,"54":1,"57":1}}],["scannable",{"1":{"45":1}}],["scanning",{"1":{"34":2,"42":1}}],["scale",{"1":{"10":3,"40":3,"42":1}}],["scenarios",{"1":{"14":1}}],["script",{"1":{"22":4}}],["scrim",{"1":{"11":1}}],["screen",{"1":{"14":1,"20":1,"33":1,"41":5,"46":3,"47":5,"53":1,"56":1}}],["screens",{"1":{"8":1,"10":1,"41":15,"46":4,"47":2}}],["scrolling",{"1":{"14":1,"33":1}}],["scroll",{"1":{"4":3,"14":7,"33":9}}],["shimonewman",{"1":{"44":1}}],["shimon",{"1":{"44":1}}],["shield",{"1":{"8":3,"40":2}}],["shmuel",{"1":{"44":1}}],["shechter",{"1":{"44":1}}],["share",{"1":{"40":1}}],["sharp",{"1":{"36":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["shopping",{"1":{"40":2}}],["shortcuts",{"1":{"26":2}}],["short",{"1":{"20":1,"34":2}}],["shows",{"1":{"18":1,"55":1,"56":1,"58":1}}],["showmodal",{"1":{"11":1}}],["shown",{"1":{"2":1,"15":1,"40":1,"41":1}}],["show",{"1":{"1":1,"11":4,"14":2,"21":1,"25":4,"29":1,"33":2,"38":1,"39":2,"49":2}}],["should",{"1":{"1":2,"14":4,"20":1,"21":1,"22":3,"25":2,"30":3,"32":3,"33":3,"39":1,"40":2}}],["sun",{"1":{"40":1}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":1}}],["support",{"1":{"38":1,"40":1,"42":1,"44":2}}],["such",{"1":{"20":1,"36":4,"37":1,"39":2}}],["successfully",{"1":{"1":1,"34":1}}],["success",{"1":{"1":6,"9":3,"16":1,"25":6,"34":6,"37":8,"51":3}}],["subtle",{"1":{"42":1}}],["subset",{"1":{"40":1}}],["sub",{"1":{"8":9}}],["subheading",{"1":{"5":9}}],["summary",{"1":{"5":12}}],["src",{"1":{"2":1,"7":1,"10":6,"25":2,"33":9,"44":1}}],["s",{"1":{"2":3,"11":1,"20":1,"29":1,"33":1,"34":1,"37":2,"43":1,"44":3,"54":1,"55":1,"59":1}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":5,"11":2,"13":1,"20":2,"22":2,"30":2,"32":2,"36":3,"41":3,"42":3,"46":1}}],["size",{"1":{"1":15,"2":25,"6":5,"8":2,"9":4,"10":2,"12":4,"17":15,"20":6,"22":2,"25":2,"30":5,"32":2,"33":21,"36":1,"41":2,"42":1,"46":8,"53":48,"56":1,"57":12}}],["singh",{"1":{"44":1}}],["single",{"1":{"13":1,"14":1,"21":1,"22":1,"30":3,"32":2,"40":1,"49":1}}],["simple",{"1":{"34":2,"44":1}}],["simplify",{"1":{"8":1}}],["six",{"1":{"14":1,"16":1,"51":1}}],["sidebar",{"1":{"36":1,"48":2}}],["side",{"1":{"0":4,"14":2,"48":4}}],["stnguyen90",{"1":{"44":1}}],["steven",{"1":{"44":1}}],["steps",{"1":{"43":1}}],["stop",{"1":{"40":1}}],["storage",{"1":{"12":3,"44":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["stripe",{"1":{"40":4}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"13":5,"53":1}}],["strong",{"1":{"6":1,"20":1,"42":1}}],["stylesheet",{"1":{"43":2}}],["styles",{"1":{"21":2,"33":5,"44":1,"54":2,"55":1}}],["style",{"1":{"1":15,"6":12,"8":1,"9":9,"10":10,"11":2,"12":4,"14":1,"16":7,"17":5,"20":1,"25":11,"29":1,"33":29,"34":1,"36":4,"37":2,"38":6,"39":2,"41":12,"42":4,"46":1,"54":2}}],["stays",{"1":{"50":6,"53":23,"54":10,"57":17}}],["star",{"1":{"40":1}}],["stars",{"1":{"33":12}}],["start",{"1":{"0":4,"3":2,"4":1,"5":6,"6":12,"8":21,"10":12,"11":3,"14":2,"16":3,"17":8,"18":1,"25":19,"26":1,"27":2,"29":2,"33":5,"35":1,"39":2,"43":1,"45":1,"50":74,"53":10,"54":38,"57":3}}],["started",{"0":{"43":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":4,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["standard",{"1":{"39":1}}],["standalone",{"1":{"1":23}}],["stand",{"1":{"20":1}}],["stack",{"1":{"19":1,"44":1}}],["static",{"1":{"34":1,"54":2}}],["state",{"1":{"11":1,"16":1,"17":1,"21":2,"22":3,"24":2,"25":2,"31":2,"34":1}}],["states",{"1":{"1":2,"15":2,"21":1,"22":1,"25":2,"30":1,"31":2,"32":2,"51":2}}],["status",{"0":{"31":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":4,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":2,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":22,"32":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["self",{"1":{"53":3}}],["selector",{"1":{"40":1,"58":1}}],["selectors",{"1":{"30":1,"32":1,"37":1}}],["selecting",{"1":{"30":1}}],["selection",{"1":{"0":3,"30":1}}],["select",{"1":{"5":9,"6":1,"17":1,"22":3,"25":16,"30":1,"33":2}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["server",{"1":{"40":1}}],["services",{"1":{"8":9}}],["serious",{"1":{"36":1}}],["send",{"1":{"40":1}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":10,"51":1}}],["settings",{"1":{"14":3}}],["see",{"1":{"21":2,"55":1}}],["sessions",{"1":{"14":3}}],["separator",{"1":{"18":1,"25":4}}],["separate",{"1":{"11":3}}],["seperate",{"1":{"11":1}}],["seperators",{"1":{"37":1}}],["seperator",{"1":{"3":1}}],["sep",{"1":{"3":3,"18":2,"53":3}}],["secret",{"1":{"25":9,"35":10}}],["secure",{"1":{"8":3}}],["sections",{"1":{"13":2,"14":1,"45":1}}],["section",{"1":{"0":2,"1":40,"4":2,"6":26,"12":8,"13":1,"16":4,"21":1,"25":12,"33":2,"43":1,"48":6,"54":2}}],["secondary",{"0":{"13":1},"1":{"0":2,"1":21,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":1,"9":8,"10":1,"11":5,"12":2,"13":31,"14":2,"15":1,"16":1,"17":4,"18":1,"19":1,"20":16,"21":1,"22":1,"23":1,"24":4,"25":2,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":2,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":2,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["search",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":14,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":3,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":4}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":10}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":1,"40":1}}],["keyboared",{"1":{"21":1}}],["keyboard",{"0":{"26":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":2,"26":6,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":2,"56":1,"57":1,"58":1,"59":1}}],["keeping",{"1":{"20":1}}],["keep",{"1":{"2":1,"20":1,"34":2,"36":1,"49":1}}],["k",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],[">",{"1":{"0":26,"1":521,"2":137,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":124,"11":156,"12":91,"13":64,"14":38,"15":57,"16":147,"17":132,"18":30,"19":15,"20":101,"21":17,"22":21,"23":4,"24":44,"25":560,"26":8,"27":66,"28":7,"29":50,"30":11,"31":38,"32":11,"33":841,"34":55,"35":26,"36":13,"37":3,"38":7,"39":10,"40":1,"41":13,"42":41,"43":5,"44":19,"45":6,"46":28,"47":40,"48":60,"49":66,"50":4,"51":18,"52":4,"53":10,"54":6,"55":5,"56":12,"57":12,"58":1,"59":8}}],["+2",{"1":{"2":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":4,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":4,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cdn",{"1":{"43":1}}],["cpp",{"1":{"40":4}}],["css3",{"1":{"40":4}}],["css",{"1":{"37":2,"38":3,"41":2,"43":3,"44":4,"46":2,"50":1,"53":2,"54":1,"57":1}}],["circular",{"1":{"36":3}}],["circle",{"1":{"9":3,"17":1,"25":2,"27":3,"34":2,"40":13}}],["cell",{"1":{"33":15}}],["centered",{"1":{"40":1}}],["center",{"1":{"1":5,"2":1,"6":4,"9":7,"10":7,"11":7,"15":2,"17":11,"19":4,"22":2,"25":7,"30":2,"32":2,"33":12,"35":4,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["cube",{"1":{"40":2}}],["custom",{"1":{"25":7,"46":1}}],["currency",{"1":{"40":6}}],["current",{"1":{"31":1}}],["currently",{"1":{"11":1,"34":1}}],["cursor",{"0":{"52":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":8,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":2,"52":9,"53":2,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["credit",{"1":{"40":1}}],["creation",{"1":{"11":1}}],["created",{"1":{"33":22,"44":1}}],["create",{"1":{"4":1,"21":2,"23":1,"25":1,"33":3,"37":1,"39":2,"44":3,"45":1,"47":3}}],["cross",{"1":{"1":5,"6":2,"8":3,"9":7,"10":1,"11":7,"12":8,"17":5,"18":1,"19":4,"25":7,"33":14,"44":2,"47":1,"53":7}}],["christyjacob4",{"1":{"44":1}}],["christy",{"1":{"44":1}}],["chrome",{"1":{"40":2,"55":1}}],["chip",{"1":{"40":1}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chat",{"1":{"40":3}}],["chart",{"1":{"12":2,"40":5,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["chevron",{"1":{"40":4}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"40":4,"49":2}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"40":5,"51":8}}],["checkboxes",{"1":{"5":2,"6":2,"22":6,"30":1,"36":1}}],["checkbox",{"0":{"22":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":7,"6":3,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":5,"22":17,"23":2,"24":1,"25":3,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":8,"33":3,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["cart",{"1":{"40":1}}],["cards",{"1":{"8":1,"10":2,"21":4,"36":1,"39":2}}],["card",{"0":{"10":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":5,"9":3,"10":31,"11":3,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":3,"19":2,"20":3,"21":18,"22":3,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":4,"34":2,"35":2,"36":6,"37":2,"38":2,"39":4,"40":3,"41":2,"42":2,"43":2,"44":3,"45":2,"46":26,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":3,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["cash",{"1":{"40":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["camera",{"1":{"40":2}}],["cameron",{"1":{"3":6}}],["calendar",{"1":{"40":1}}],["calculator",{"1":{"40":1}}],["call",{"1":{"1":31,"20":2,"40":1}}],["cake",{"1":{"40":1}}],["capitalize",{"1":{"57":2}}],["cap",{"1":{"40":1}}],["categories",{"1":{"34":1}}],["canada",{"1":{"10":4}}],["cannot",{"1":{"2":1}}],["can",{"1":{"1":4,"2":5,"5":1,"6":2,"11":2,"14":3,"20":2,"21":3,"23":2,"25":4,"29":2,"30":1,"32":1,"33":1,"37":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":1}}],["clip",{"1":{"40":1}}],["clipboard",{"1":{"40":4}}],["clickability",{"1":{"42":1}}],["clickable",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":22,"4":2,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":3,"34":2,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["click",{"1":{"40":1,"49":1}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clamp",{"1":{"57":1}}],["clarify",{"1":{"34":1}}],["class=",{"1":{"33":2}}],["classes",{"1":{"6":1,"38":2,"51":2,"54":2,"59":1}}],["class",{"1":{"0":14,"1":251,"2":73,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":51,"11":80,"12":41,"13":35,"14":22,"15":31,"16":76,"17":67,"18":17,"19":9,"20":52,"21":11,"22":9,"23":3,"24":23,"25":256,"26":5,"27":34,"28":4,"29":27,"30":4,"31":22,"32":11,"33":427,"34":29,"35":15,"36":4,"38":2,"39":4,"40":2,"42":18,"44":6,"45":4,"46":9,"47":20,"48":31,"49":34,"50":3,"51":10,"52":3,"53":6,"54":5,"55":4,"56":6,"57":5,"59":4}}],["cloud",{"1":{"40":3}}],["clock",{"1":{"9":2,"40":1}}],["closed",{"1":{"8":3,"40":1}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["codingsamurai",{"1":{"44":1}}],["code",{"0":{"4":1,"23":1},"1":{"0":2,"1":2,"2":2,"3":3,"4":27,"5":3,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":3,"23":15,"24":3,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":2,"37":3,"38":2,"39":2,"40":8,"41":4,"42":12,"43":3,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2,"51":2,"52":2,"53":2,"54":2,"55":2,"56":2,"57":4,"58":2,"59":2}}],["cog",{"1":{"40":1,"48":1}}],["cognitive",{"1":{"14":1}}],["count",{"1":{"25":3}}],["counter",{"1":{"25":12}}],["country",{"1":{"10":6}}],["couldn",{"1":{"25":3}}],["cooper",{"1":{"25":3}}],["cope",{"1":{"44":1}}],["copied",{"1":{"23":1}}],["copying",{"1":{"29":1}}],["copy",{"1":{"11":1,"18":1,"25":3,"29":4,"33":3,"34":2,"40":1,"43":1}}],["community",{"1":{"44":1}}],["commit",{"1":{"40":1,"44":2}}],["command",{"1":{"40":1,"43":1}}],["common",{"1":{"29":1,"40":1}}],["commonly",{"1":{"20":1,"32":1}}],["com",{"1":{"25":14,"43":2}}],["compilation",{"1":{"50":1}}],["compiled",{"1":{"38":1,"41":1,"50":1,"53":1,"57":1}}],["compliment",{"1":{"42":1}}],["complete",{"1":{"8":4,"20":1,"28":1,"31":6}}],["completed",{"1":{"1":1,"34":1}}],["complex",{"1":{"8":1,"11":3,"21":1}}],["component",{"1":{"20":1,"36":1,"39":1}}],["components",{"0":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":4,"6":4,"7":2,"8":2,"9":2,"10":2,"11":4,"12":2,"13":4,"14":4,"15":3,"16":4,"17":4,"18":4,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":2,"30":1,"31":2,"32":1,"33":3,"34":1,"35":3,"36":4,"37":2,"38":2,"39":5,"40":1,"41":1,"42":1,"43":1,"44":3,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["computer",{"1":{"40":1}}],["compute",{"1":{"12":3}}],["core",{"1":{"44":1}}],["corner",{"1":{"36":2}}],["corners",{"1":{"19":1,"20":1,"36":2}}],["correct",{"1":{"25":1}}],["correctly",{"1":{"20":1,"22":1,"30":1,"32":1}}],["cover",{"1":{"17":6}}],["configured",{"1":{"54":1}}],["confused",{"1":{"42":1}}],["confusion",{"1":{"6":1}}],["convey",{"1":{"34":2,"51":1}}],["conduct",{"1":{"25":1}}],["conjunction",{"1":{"20":1}}],["consist",{"1":{"5":1,"6":1,"11":1,"13":1,"14":1,"16":1,"17":1,"18":1,"33":1,"35":1}}],["consistency",{"1":{"2":1,"20":1}}],["consistent",{"1":{"1":1,"37":1,"43":1,"44":3,"50":1,"51":1,"57":1}}],["console",{"1":{"1":2,"2":1,"5":1,"6":2,"11":1,"15":1,"20":1,"21":1,"27":1,"33":3,"34":4,"36":1,"37":2,"39":1,"41":1,"51":1,"53":1}}],["contributing",{"1":{"44":1}}],["controls",{"1":{"53":1}}],["controlled",{"1":{"32":1,"59":1}}],["control",{"1":{"6":1,"37":1,"53":1}}],["contrast",{"1":{"2":1,"39":3}}],["contains",{"1":{"29":1,"31":1,"37":1}}],["containing",{"1":{"25":1,"49":1}}],["contain",{"1":{"1":1,"5":1,"6":1}}],["containers",{"1":{"11":1}}],["container",{"0":{"45":1},"1":{"0":2,"1":1,"2":1,"3":3,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":5,"13":2,"14":1,"15":1,"16":1,"17":2,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":11,"46":4,"47":4,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":2}}],["context",{"1":{"1":2,"34":4,"42":1}}],["contextual",{"1":{"1":15,"9":21,"11":3,"17":3,"25":1}}],["contents",{"1":{"47":1,"53":5}}],["content",{"1":{"0":2,"1":21,"4":1,"5":27,"7":6,"10":1,"11":7,"13":1,"14":1,"16":4,"19":1,"21":1,"25":1,"27":1,"29":1,"33":1,"34":1,"41":1,"45":3,"49":1,"53":5,"57":2}}],["colours",{"1":{"34":1}}],["colored",{"1":{"2":1}}],["color",{"1":{"2":27,"8":9,"9":5,"10":3,"11":1,"12":2,"16":1,"17":1,"24":2,"25":10,"37":56,"38":24,"40":4,"44":1,"51":32,"53":6}}],["colors",{"0":{"37":1,"51":1},"1":{"0":2,"1":2,"2":4,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"36":3,"37":12,"38":3,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":3,"51":9,"52":3,"53":2,"54":2,"55":2,"56":2,"57":2,"58":2,"59":2}}],["collaborating",{"1":{"44":1}}],["collaboration",{"1":{"44":1}}],["collaborate",{"1":{"44":4}}],["collapsibles",{"1":{"5":17}}],["collapsible",{"0":{"5":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":2,"5":45,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}],["collection",{"1":{"33":22,"40":1}}],["col",{"1":{"33":153,"44":2,"47":8}}],["columnheader",{"1":{"33":5}}],["columns",{"1":{"24":1,"33":2,"47":4,"53":2}}],["column",{"1":{"18":3,"33":4,"47":8,"53":24}}],["ctrl",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1,"51":1,"52":1,"53":1,"54":1,"55":1,"56":1,"57":1,"58":1,"59":1}}]],"serializationVersion":2} \ No newline at end of file From ccbfc7e2423679b247d7c2207687654bd78df0fe Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 14 Sep 2023 10:10:15 +0200 Subject: [PATCH 51/52] chore: bunmp version and add bun icon --- .changeset/two-pans-shake.md | 6 +++++ apps/pink/public/icons/color/dark/bun-sh.svg | 23 +++++++++++++++++++ apps/pink/public/icons/color/light/bun-sh.svg | 23 +++++++++++++++++++ .../public/icons/grayscale/dark/bun-sh.svg | 17 ++++++++++++++ .../public/icons/grayscale/light/bun-sh.svg | 17 ++++++++++++++ packages/icons/svg/academic-cap.svg | 2 +- packages/icons/svg/adjustments.svg | 2 +- packages/icons/svg/akamai.svg | 2 +- packages/icons/svg/algolia.svg | 2 +- packages/icons/svg/amazon.svg | 2 +- packages/icons/svg/android.svg | 2 +- packages/icons/svg/angular.svg | 2 +- packages/icons/svg/annotation.svg | 2 +- packages/icons/svg/anonymous.svg | 2 +- packages/icons/svg/api.svg | 2 +- packages/icons/svg/apple.svg | 2 +- packages/icons/svg/appwrite.svg | 2 +- packages/icons/svg/archive.svg | 2 +- packages/icons/svg/arrow-circle-down.svg | 2 +- packages/icons/svg/arrow-circle-left.svg | 2 +- packages/icons/svg/arrow-circle-right.svg | 2 +- packages/icons/svg/arrow-circle-up.svg | 2 +- packages/icons/svg/arrow-down.svg | 2 +- packages/icons/svg/arrow-expand.svg | 2 +- packages/icons/svg/arrow-left.svg | 2 +- packages/icons/svg/arrow-narrow-down.svg | 2 +- packages/icons/svg/arrow-narrow-left.svg | 2 +- packages/icons/svg/arrow-narrow-right.svg | 2 +- packages/icons/svg/arrow-narrow-up.svg | 2 +- packages/icons/svg/arrow-right.svg | 2 +- packages/icons/svg/arrow-sm-down.svg | 2 +- packages/icons/svg/arrow-sm-left.svg | 2 +- packages/icons/svg/arrow-sm-right.svg | 2 +- packages/icons/svg/arrow-sm-up.svg | 2 +- packages/icons/svg/arrow-up.svg | 2 +- packages/icons/svg/astro.svg | 2 +- packages/icons/svg/at-symbol.svg | 2 +- packages/icons/svg/auth0.svg | 2 +- packages/icons/svg/authentik.svg | 2 +- packages/icons/svg/autodesk.svg | 2 +- packages/icons/svg/azure.svg | 2 +- packages/icons/svg/backspace.svg | 2 +- packages/icons/svg/badge-check.svg | 2 +- packages/icons/svg/ban.svg | 2 +- packages/icons/svg/beaker.svg | 2 +- packages/icons/svg/behance.svg | 2 +- packages/icons/svg/bell.svg | 2 +- packages/icons/svg/bitBucket.svg | 2 +- packages/icons/svg/bitly.svg | 2 +- packages/icons/svg/book-open.svg | 2 +- packages/icons/svg/bookmark-alt.svg | 2 +- packages/icons/svg/bookmark.svg | 2 +- packages/icons/svg/box.svg | 2 +- packages/icons/svg/briefcase.svg | 2 +- packages/icons/svg/bun-sh.svg | 1 + packages/icons/svg/cake.svg | 2 +- packages/icons/svg/calculator.svg | 2 +- packages/icons/svg/calendar.svg | 2 +- packages/icons/svg/camera.svg | 2 +- packages/icons/svg/cash.svg | 2 +- packages/icons/svg/chart-bar.svg | 2 +- packages/icons/svg/chart-pie.svg | 2 +- packages/icons/svg/chart-square-bar.svg | 2 +- packages/icons/svg/chat-alt-2.svg | 2 +- packages/icons/svg/chat-alt.svg | 2 +- packages/icons/svg/chat.svg | 2 +- packages/icons/svg/check-circle.svg | 2 +- packages/icons/svg/check.svg | 2 +- packages/icons/svg/cheveron-down.svg | 2 +- packages/icons/svg/cheveron-left.svg | 2 +- packages/icons/svg/cheveron-right.svg | 2 +- packages/icons/svg/cheveron-up.svg | 2 +- packages/icons/svg/chevron-double-down.svg | 2 +- packages/icons/svg/chevron-double-left.svg | 2 +- packages/icons/svg/chevron-double-right.svg | 2 +- packages/icons/svg/chevron-double-up.svg | 2 +- packages/icons/svg/chip.svg | 2 +- packages/icons/svg/clipboard-arrow.svg | 2 +- packages/icons/svg/clipboard-check.svg | 2 +- packages/icons/svg/clipboard-copy.svg | 2 +- packages/icons/svg/clipboard-list.svg | 2 +- packages/icons/svg/clock.svg | 2 +- packages/icons/svg/cloud-download.svg | 2 +- packages/icons/svg/cloud-upload.svg | 2 +- packages/icons/svg/cloud.svg | 2 +- packages/icons/svg/code.svg | 2 +- packages/icons/svg/cog.svg | 2 +- packages/icons/svg/collection.svg | 2 +- packages/icons/svg/color-swatch.svg | 2 +- packages/icons/svg/cpp.svg | 2 +- packages/icons/svg/credit-card.svg | 2 +- packages/icons/svg/css3.svg | 2 +- packages/icons/svg/cube-transparent.svg | 2 +- packages/icons/svg/cube.svg | 2 +- packages/icons/svg/currency-bangladesh.svg | 2 +- packages/icons/svg/currency-dollar.svg | 2 +- packages/icons/svg/currency-euro.svg | 2 +- packages/icons/svg/currency-pound.svg | 2 +- packages/icons/svg/currency-rupee.svg | 2 +- packages/icons/svg/currency-yen.svg | 2 +- packages/icons/svg/cursor-click.svg | 2 +- packages/icons/svg/dailymotion.svg | 2 +- packages/icons/svg/dart.svg | 2 +- packages/icons/svg/database.svg | 2 +- packages/icons/svg/deno.svg | 2 +- packages/icons/svg/desktop-computer.svg | 2 +- packages/icons/svg/device-ipad.svg | 2 +- packages/icons/svg/device-mobile.svg | 2 +- packages/icons/svg/discord.svg | 2 +- packages/icons/svg/disqus.svg | 2 +- packages/icons/svg/docker.svg | 2 +- packages/icons/svg/document-add.svg | 2 +- packages/icons/svg/document-download.svg | 2 +- packages/icons/svg/document-duplicate.svg | 2 +- packages/icons/svg/document-remove.svg | 2 +- packages/icons/svg/document-report.svg | 2 +- packages/icons/svg/document-search.svg | 2 +- packages/icons/svg/document-text.svg | 2 +- packages/icons/svg/document.svg | 2 +- packages/icons/svg/dotnet.svg | 2 +- packages/icons/svg/dots-circle-horizontal.svg | 2 +- packages/icons/svg/dots-horizontal.svg | 2 +- packages/icons/svg/dots-vertical.svg | 2 +- packages/icons/svg/download.svg | 2 +- packages/icons/svg/dribbble.svg | 2 +- packages/icons/svg/dropbox.svg | 2 +- packages/icons/svg/duplicate.svg | 2 +- packages/icons/svg/emoji-happy.svg | 2 +- packages/icons/svg/emoji-sad.svg | 2 +- packages/icons/svg/etsy.svg | 2 +- packages/icons/svg/exclamation-circle.svg | 2 +- packages/icons/svg/exclamation.svg | 2 +- packages/icons/svg/external-link.svg | 2 +- packages/icons/svg/eye-off.svg | 2 +- packages/icons/svg/eye.svg | 2 +- packages/icons/svg/facebook.svg | 2 +- packages/icons/svg/fast-forward.svg | 2 +- packages/icons/svg/figma.svg | 2 +- packages/icons/svg/film.svg | 2 +- packages/icons/svg/filter-line.svg | 2 +- packages/icons/svg/filter.svg | 2 +- packages/icons/svg/finger-print.svg | 2 +- packages/icons/svg/fire.svg | 2 +- packages/icons/svg/firefox.svg | 2 +- packages/icons/svg/flag.svg | 2 +- packages/icons/svg/flutter.svg | 2 +- packages/icons/svg/folder-add.svg | 2 +- packages/icons/svg/folder-download.svg | 2 +- packages/icons/svg/folder-open.svg | 2 +- packages/icons/svg/folder-remove.svg | 2 +- packages/icons/svg/folder.svg | 2 +- packages/icons/svg/gift.svg | 2 +- packages/icons/svg/git-branch.svg | 2 +- packages/icons/svg/git-commit.svg | 2 +- packages/icons/svg/git.svg | 2 +- packages/icons/svg/github.svg | 2 +- packages/icons/svg/gitlab.svg | 2 +- packages/icons/svg/globe-alt.svg | 2 +- packages/icons/svg/globe.svg | 2 +- packages/icons/svg/google.svg | 2 +- packages/icons/svg/graphql.svg | 2 +- packages/icons/svg/hand.svg | 2 +- packages/icons/svg/hashtag.svg | 2 +- packages/icons/svg/heart.svg | 2 +- packages/icons/svg/home.svg | 2 +- packages/icons/svg/html5.svg | 2 +- packages/icons/svg/identification.svg | 2 +- packages/icons/svg/inbox-in.svg | 2 +- packages/icons/svg/inbox.svg | 2 +- packages/icons/svg/info.svg | 2 +- packages/icons/svg/instagram.svg | 2 +- packages/icons/svg/ionic.svg | 2 +- packages/icons/svg/ios.svg | 2 +- packages/icons/svg/java.svg | 2 +- packages/icons/svg/js.svg | 2 +- packages/icons/svg/key.svg | 2 +- packages/icons/svg/kotlin.svg | 2 +- packages/icons/svg/light-bulb.svg | 2 +- packages/icons/svg/lightning-bolt.svg | 2 +- packages/icons/svg/link.svg | 2 +- packages/icons/svg/linkedin.svg | 2 +- packages/icons/svg/linux.svg | 2 +- packages/icons/svg/list.svg | 2 +- packages/icons/svg/location-marker.svg | 2 +- packages/icons/svg/lock-closed.svg | 2 +- packages/icons/svg/lock-open.svg | 2 +- packages/icons/svg/logout-left.svg | 2 +- packages/icons/svg/logout-right.svg | 2 +- packages/icons/svg/mail-open.svg | 2 +- packages/icons/svg/mail.svg | 2 +- packages/icons/svg/map.svg | 2 +- packages/icons/svg/md-library.svg | 2 +- packages/icons/svg/medium.svg | 2 +- packages/icons/svg/meilisearch.svg | 2 +- packages/icons/svg/menu-alt-1.svg | 2 +- packages/icons/svg/menu-alt-2.svg | 2 +- packages/icons/svg/menu-alt-3.svg | 2 +- packages/icons/svg/menu-alt-4.svg | 2 +- packages/icons/svg/menu.svg | 2 +- packages/icons/svg/microphone.svg | 2 +- packages/icons/svg/microsoft.svg | 2 +- packages/icons/svg/microsoft_edge.svg | 2 +- packages/icons/svg/minus-circle.svg | 2 +- packages/icons/svg/minus-sm.svg | 2 +- packages/icons/svg/minus.svg | 2 +- packages/icons/svg/mode.svg | 2 +- packages/icons/svg/moon.svg | 2 +- packages/icons/svg/ms_yammer.svg | 2 +- packages/icons/svg/msg91.svg | 2 +- packages/icons/svg/music-note.svg | 2 +- packages/icons/svg/newspaper.svg | 2 +- packages/icons/svg/nextjs.svg | 2 +- packages/icons/svg/node_js.svg | 2 +- packages/icons/svg/notion.svg | 2 +- packages/icons/svg/null.svg | 2 +- packages/icons/svg/nuxt.svg | 2 +- packages/icons/svg/office-building.svg | 2 +- packages/icons/svg/okta.svg | 2 +- packages/icons/svg/open-ai.svg | 2 +- packages/icons/svg/openid.svg | 2 +- packages/icons/svg/opera.svg | 2 +- packages/icons/svg/pangea.svg | 5 +--- packages/icons/svg/paper-airplane.svg | 2 +- packages/icons/svg/paper-clip.svg | 2 +- packages/icons/svg/pause.svg | 2 +- packages/icons/svg/paypal.svg | 2 +- packages/icons/svg/pencil-alt.svg | 2 +- packages/icons/svg/pencil.svg | 2 +- packages/icons/svg/perspective-api.svg | 2 +- packages/icons/svg/phone-incoming.svg | 2 +- packages/icons/svg/phone-missed-call.svg | 2 +- packages/icons/svg/phone-outgoing.svg | 2 +- packages/icons/svg/phone.svg | 2 +- packages/icons/svg/photograph.svg | 2 +- packages/icons/svg/php.svg | 2 +- packages/icons/svg/pinterest.svg | 2 +- packages/icons/svg/play-button.svg | 2 +- packages/icons/svg/play.svg | 2 +- packages/icons/svg/plus-circle.svg | 2 +- packages/icons/svg/plus-sm.svg | 2 +- packages/icons/svg/plus.svg | 2 +- packages/icons/svg/podio.svg | 2 +- packages/icons/svg/presentation-chart-1.svg | 2 +- packages/icons/svg/presentation-chart-2.svg | 2 +- packages/icons/svg/printer.svg | 2 +- packages/icons/svg/product_hunt.svg | 2 +- packages/icons/svg/puzzle.svg | 2 +- packages/icons/svg/python.svg | 2 +- packages/icons/svg/qrcode.svg | 2 +- packages/icons/svg/question-mark-circle.svg | 2 +- packages/icons/svg/qwik.svg | 2 +- packages/icons/svg/react.svg | 2 +- packages/icons/svg/receipt-refund.svg | 2 +- packages/icons/svg/receipt-tax.svg | 2 +- packages/icons/svg/reddit.svg | 2 +- packages/icons/svg/refresh.svg | 2 +- packages/icons/svg/relation.svg | 2 +- packages/icons/svg/relationship.svg | 2 +- packages/icons/svg/replay.svg | 2 +- packages/icons/svg/rewind.svg | 2 +- packages/icons/svg/rss.svg | 2 +- packages/icons/svg/ruby.svg | 2 +- packages/icons/svg/safari.svg | 2 +- packages/icons/svg/salesforce.svg | 2 +- packages/icons/svg/save-as.svg | 2 +- packages/icons/svg/save.svg | 2 +- packages/icons/svg/scale.svg | 2 +- packages/icons/svg/scissors.svg | 2 +- packages/icons/svg/search-circle.svg | 2 +- packages/icons/svg/search.svg | 2 +- packages/icons/svg/selector.svg | 2 +- packages/icons/svg/send.svg | 2 +- packages/icons/svg/server.svg | 2 +- packages/icons/svg/share.svg | 2 +- packages/icons/svg/shield-check.svg | 2 +- packages/icons/svg/shield-exclamation.svg | 2 +- packages/icons/svg/shopping-bag.svg | 2 +- packages/icons/svg/shopping-cart.svg | 2 +- packages/icons/svg/skype.svg | 2 +- packages/icons/svg/slack.svg | 2 +- packages/icons/svg/sort-ascending.svg | 2 +- packages/icons/svg/sort-descending.svg | 2 +- packages/icons/svg/sparkles.svg | 2 +- packages/icons/svg/speakerphone.svg | 2 +- packages/icons/svg/spin.svg | 2 +- packages/icons/svg/spotify.svg | 2 +- packages/icons/svg/star.svg | 2 +- packages/icons/svg/status-offline.svg | 2 +- packages/icons/svg/status-online.svg | 2 +- packages/icons/svg/stop.svg | 2 +- packages/icons/svg/stripe.svg | 2 +- packages/icons/svg/sun.svg | 2 +- packages/icons/svg/support.svg | 2 +- packages/icons/svg/svelte.svg | 2 +- packages/icons/svg/swift.svg | 2 +- packages/icons/svg/switch-horizontal.svg | 2 +- packages/icons/svg/switch-vertical.svg | 2 +- packages/icons/svg/table.svg | 2 +- packages/icons/svg/tag.svg | 2 +- packages/icons/svg/telegram.svg | 2 +- packages/icons/svg/telesign.svg | 2 +- packages/icons/svg/template.svg | 2 +- packages/icons/svg/terminal.svg | 2 +- packages/icons/svg/text.svg | 2 +- packages/icons/svg/textmagic.svg | 2 +- packages/icons/svg/thumb-dowm.svg | 2 +- packages/icons/svg/thumb-up.svg | 2 +- packages/icons/svg/ticket.svg | 2 +- packages/icons/svg/tiktok.svg | 2 +- packages/icons/svg/toggle.svg | 2 +- packages/icons/svg/tradeshift.svg | 2 +- packages/icons/svg/translate.svg | 2 +- packages/icons/svg/trash.svg | 2 +- packages/icons/svg/trending-down.svg | 2 +- packages/icons/svg/trending-up.svg | 2 +- packages/icons/svg/truck.svg | 2 +- packages/icons/svg/tumbir.svg | 2 +- packages/icons/svg/twilio.svg | 2 +- packages/icons/svg/twitch.svg | 2 +- packages/icons/svg/twitter.svg | 2 +- packages/icons/svg/typescript.svg | 2 +- packages/icons/svg/unity.svg | 2 +- packages/icons/svg/upload.svg | 2 +- packages/icons/svg/user-add.svg | 2 +- packages/icons/svg/user-circle.svg | 2 +- packages/icons/svg/user-group.svg | 2 +- packages/icons/svg/user-remove.svg | 2 +- packages/icons/svg/user.svg | 2 +- packages/icons/svg/users.svg | 2 +- packages/icons/svg/variable.svg | 2 +- packages/icons/svg/video-camera.svg | 2 +- packages/icons/svg/video.svg | 2 +- packages/icons/svg/view-boards.svg | 2 +- packages/icons/svg/view-grid-add.svg | 2 +- packages/icons/svg/view-grid.svg | 2 +- packages/icons/svg/view-list.svg | 2 +- packages/icons/svg/vimeo.svg | 2 +- packages/icons/svg/vk.svg | 2 +- packages/icons/svg/volume-off.svg | 2 +- packages/icons/svg/volume-up.svg | 2 +- packages/icons/svg/vonage.svg | 2 +- packages/icons/svg/vs_code.svg | 2 +- packages/icons/svg/vue.svg | 2 +- packages/icons/svg/whatsapp.svg | 2 +- packages/icons/svg/wifi.svg | 2 +- packages/icons/svg/wordpress.svg | 2 +- packages/icons/svg/x-circle.svg | 2 +- packages/icons/svg/x.svg | 2 +- packages/icons/svg/yahoo.svg | 2 +- packages/icons/svg/yandex.svg | 2 +- packages/icons/svg/ycombinator.svg | 2 +- packages/icons/svg/youtube.svg | 2 +- packages/icons/svg/zoom-in.svg | 2 +- packages/icons/svg/zoom-out.svg | 2 +- packages/icons/svg/zoom.svg | 2 +- 355 files changed, 436 insertions(+), 352 deletions(-) create mode 100644 .changeset/two-pans-shake.md create mode 100644 apps/pink/public/icons/color/dark/bun-sh.svg create mode 100644 apps/pink/public/icons/color/light/bun-sh.svg create mode 100644 apps/pink/public/icons/grayscale/dark/bun-sh.svg create mode 100644 apps/pink/public/icons/grayscale/light/bun-sh.svg create mode 100644 packages/icons/svg/bun-sh.svg diff --git a/.changeset/two-pans-shake.md b/.changeset/two-pans-shake.md new file mode 100644 index 0000000000..3038368ab8 --- /dev/null +++ b/.changeset/two-pans-shake.md @@ -0,0 +1,6 @@ +--- +"@appwrite.io/pink-icons": minor +"@appwrite.io/pink": minor +--- + +Add bun icon diff --git a/apps/pink/public/icons/color/dark/bun-sh.svg b/apps/pink/public/icons/color/dark/bun-sh.svg new file mode 100644 index 0000000000..8babba29d3 --- /dev/null +++ b/apps/pink/public/icons/color/dark/bun-sh.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/color/light/bun-sh.svg b/apps/pink/public/icons/color/light/bun-sh.svg new file mode 100644 index 0000000000..d8854eafb4 --- /dev/null +++ b/apps/pink/public/icons/color/light/bun-sh.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/grayscale/dark/bun-sh.svg b/apps/pink/public/icons/grayscale/dark/bun-sh.svg new file mode 100644 index 0000000000..769784eb0a --- /dev/null +++ b/apps/pink/public/icons/grayscale/dark/bun-sh.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/grayscale/light/bun-sh.svg b/apps/pink/public/icons/grayscale/light/bun-sh.svg new file mode 100644 index 0000000000..df7fff6d41 --- /dev/null +++ b/apps/pink/public/icons/grayscale/light/bun-sh.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/icons/svg/academic-cap.svg b/packages/icons/svg/academic-cap.svg index 8e355d5e37..9a322db173 100644 --- a/packages/icons/svg/academic-cap.svg +++ b/packages/icons/svg/academic-cap.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/adjustments.svg b/packages/icons/svg/adjustments.svg index c30cab53fe..d3cb4600f7 100644 --- a/packages/icons/svg/adjustments.svg +++ b/packages/icons/svg/adjustments.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/akamai.svg b/packages/icons/svg/akamai.svg index f5822f1b04..146dd23263 100644 --- a/packages/icons/svg/akamai.svg +++ b/packages/icons/svg/akamai.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/algolia.svg b/packages/icons/svg/algolia.svg index c40eea1d7d..f43c01353f 100644 --- a/packages/icons/svg/algolia.svg +++ b/packages/icons/svg/algolia.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/amazon.svg b/packages/icons/svg/amazon.svg index 05874a8859..9366be9d34 100644 --- a/packages/icons/svg/amazon.svg +++ b/packages/icons/svg/amazon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/android.svg b/packages/icons/svg/android.svg index 50d2694e01..f0c682c84d 100644 --- a/packages/icons/svg/android.svg +++ b/packages/icons/svg/android.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/angular.svg b/packages/icons/svg/angular.svg index 8347e81f60..260dafb38e 100644 --- a/packages/icons/svg/angular.svg +++ b/packages/icons/svg/angular.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/annotation.svg b/packages/icons/svg/annotation.svg index 2b18f6d037..e031fca9e3 100644 --- a/packages/icons/svg/annotation.svg +++ b/packages/icons/svg/annotation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/anonymous.svg b/packages/icons/svg/anonymous.svg index b4884d518c..14374e8c11 100644 --- a/packages/icons/svg/anonymous.svg +++ b/packages/icons/svg/anonymous.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/api.svg b/packages/icons/svg/api.svg index a85eb0005f..aaeb90b721 100644 --- a/packages/icons/svg/api.svg +++ b/packages/icons/svg/api.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/apple.svg b/packages/icons/svg/apple.svg index 994d0c2dd5..a42babf5e5 100644 --- a/packages/icons/svg/apple.svg +++ b/packages/icons/svg/apple.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/appwrite.svg b/packages/icons/svg/appwrite.svg index cb324662fa..f8f675e36a 100644 --- a/packages/icons/svg/appwrite.svg +++ b/packages/icons/svg/appwrite.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/archive.svg b/packages/icons/svg/archive.svg index d953c79f57..bf5647ed26 100644 --- a/packages/icons/svg/archive.svg +++ b/packages/icons/svg/archive.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-down.svg b/packages/icons/svg/arrow-circle-down.svg index 6d99e88614..8bc834a252 100644 --- a/packages/icons/svg/arrow-circle-down.svg +++ b/packages/icons/svg/arrow-circle-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-left.svg b/packages/icons/svg/arrow-circle-left.svg index 9770603b76..f6c420a24e 100644 --- a/packages/icons/svg/arrow-circle-left.svg +++ b/packages/icons/svg/arrow-circle-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-right.svg b/packages/icons/svg/arrow-circle-right.svg index e3183e097d..0ef3413459 100644 --- a/packages/icons/svg/arrow-circle-right.svg +++ b/packages/icons/svg/arrow-circle-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-circle-up.svg b/packages/icons/svg/arrow-circle-up.svg index 0328a234a5..eaf0572e90 100644 --- a/packages/icons/svg/arrow-circle-up.svg +++ b/packages/icons/svg/arrow-circle-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-down.svg b/packages/icons/svg/arrow-down.svg index 4a33efcf26..a112b19b1f 100644 --- a/packages/icons/svg/arrow-down.svg +++ b/packages/icons/svg/arrow-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-expand.svg b/packages/icons/svg/arrow-expand.svg index 3af3be0b9d..8ec3b62b5f 100644 --- a/packages/icons/svg/arrow-expand.svg +++ b/packages/icons/svg/arrow-expand.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-left.svg b/packages/icons/svg/arrow-left.svg index 410d204b9d..086b46cd6c 100644 --- a/packages/icons/svg/arrow-left.svg +++ b/packages/icons/svg/arrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-down.svg b/packages/icons/svg/arrow-narrow-down.svg index 3f8837c034..b0e81ac8f4 100644 --- a/packages/icons/svg/arrow-narrow-down.svg +++ b/packages/icons/svg/arrow-narrow-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-left.svg b/packages/icons/svg/arrow-narrow-left.svg index 1bff14928f..9823014d34 100644 --- a/packages/icons/svg/arrow-narrow-left.svg +++ b/packages/icons/svg/arrow-narrow-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-right.svg b/packages/icons/svg/arrow-narrow-right.svg index ca19f873b8..edd589f8ba 100644 --- a/packages/icons/svg/arrow-narrow-right.svg +++ b/packages/icons/svg/arrow-narrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-narrow-up.svg b/packages/icons/svg/arrow-narrow-up.svg index c757fa10c3..0a5b547ef5 100644 --- a/packages/icons/svg/arrow-narrow-up.svg +++ b/packages/icons/svg/arrow-narrow-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-right.svg b/packages/icons/svg/arrow-right.svg index a039311f8d..df46c99ef4 100644 --- a/packages/icons/svg/arrow-right.svg +++ b/packages/icons/svg/arrow-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-down.svg b/packages/icons/svg/arrow-sm-down.svg index 29720c42dc..08af64de8a 100644 --- a/packages/icons/svg/arrow-sm-down.svg +++ b/packages/icons/svg/arrow-sm-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-left.svg b/packages/icons/svg/arrow-sm-left.svg index b9c4ddcdd9..c58cf69d9a 100644 --- a/packages/icons/svg/arrow-sm-left.svg +++ b/packages/icons/svg/arrow-sm-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-right.svg b/packages/icons/svg/arrow-sm-right.svg index a10292ed6e..ac7a1c562d 100644 --- a/packages/icons/svg/arrow-sm-right.svg +++ b/packages/icons/svg/arrow-sm-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-sm-up.svg b/packages/icons/svg/arrow-sm-up.svg index 88c5472e15..da50a42f09 100644 --- a/packages/icons/svg/arrow-sm-up.svg +++ b/packages/icons/svg/arrow-sm-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/arrow-up.svg b/packages/icons/svg/arrow-up.svg index 4dfcb38564..6a4c2af246 100644 --- a/packages/icons/svg/arrow-up.svg +++ b/packages/icons/svg/arrow-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/astro.svg b/packages/icons/svg/astro.svg index 35345b57f1..4c34b7e85f 100644 --- a/packages/icons/svg/astro.svg +++ b/packages/icons/svg/astro.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/at-symbol.svg b/packages/icons/svg/at-symbol.svg index 053266f1f1..6ccab6fe21 100644 --- a/packages/icons/svg/at-symbol.svg +++ b/packages/icons/svg/at-symbol.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/auth0.svg b/packages/icons/svg/auth0.svg index 999d7539c6..70ac3602d5 100644 --- a/packages/icons/svg/auth0.svg +++ b/packages/icons/svg/auth0.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/authentik.svg b/packages/icons/svg/authentik.svg index 9037c47922..355d07a06d 100644 --- a/packages/icons/svg/authentik.svg +++ b/packages/icons/svg/authentik.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/autodesk.svg b/packages/icons/svg/autodesk.svg index a173962949..7121e4ab69 100644 --- a/packages/icons/svg/autodesk.svg +++ b/packages/icons/svg/autodesk.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/azure.svg b/packages/icons/svg/azure.svg index 8b22ef7705..35a069810a 100644 --- a/packages/icons/svg/azure.svg +++ b/packages/icons/svg/azure.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/backspace.svg b/packages/icons/svg/backspace.svg index 42a3e51e48..4a19a3ac5d 100644 --- a/packages/icons/svg/backspace.svg +++ b/packages/icons/svg/backspace.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/badge-check.svg b/packages/icons/svg/badge-check.svg index c587dbc89b..ac60917053 100644 --- a/packages/icons/svg/badge-check.svg +++ b/packages/icons/svg/badge-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ban.svg b/packages/icons/svg/ban.svg index e65082a06b..5ef6f70b4e 100644 --- a/packages/icons/svg/ban.svg +++ b/packages/icons/svg/ban.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/beaker.svg b/packages/icons/svg/beaker.svg index dee7f0b9fc..aa173bcb1b 100644 --- a/packages/icons/svg/beaker.svg +++ b/packages/icons/svg/beaker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/behance.svg b/packages/icons/svg/behance.svg index 0f391ed2be..27b92213c8 100644 --- a/packages/icons/svg/behance.svg +++ b/packages/icons/svg/behance.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bell.svg b/packages/icons/svg/bell.svg index 5213dacebc..7f21cd0769 100644 --- a/packages/icons/svg/bell.svg +++ b/packages/icons/svg/bell.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bitBucket.svg b/packages/icons/svg/bitBucket.svg index 974bb94cf6..77f826741c 100644 --- a/packages/icons/svg/bitBucket.svg +++ b/packages/icons/svg/bitBucket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bitly.svg b/packages/icons/svg/bitly.svg index ac3e137e60..7b845f2fdb 100644 --- a/packages/icons/svg/bitly.svg +++ b/packages/icons/svg/bitly.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/book-open.svg b/packages/icons/svg/book-open.svg index 22d5663564..f6150a3086 100644 --- a/packages/icons/svg/book-open.svg +++ b/packages/icons/svg/book-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bookmark-alt.svg b/packages/icons/svg/bookmark-alt.svg index d0646c549d..4da5a5bff5 100644 --- a/packages/icons/svg/bookmark-alt.svg +++ b/packages/icons/svg/bookmark-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bookmark.svg b/packages/icons/svg/bookmark.svg index 4a1c0e711a..28b17d164b 100644 --- a/packages/icons/svg/bookmark.svg +++ b/packages/icons/svg/bookmark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/box.svg b/packages/icons/svg/box.svg index 05fe00bf54..3c52706373 100644 --- a/packages/icons/svg/box.svg +++ b/packages/icons/svg/box.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/briefcase.svg b/packages/icons/svg/briefcase.svg index 7a94b4e314..276e11c0a3 100644 --- a/packages/icons/svg/briefcase.svg +++ b/packages/icons/svg/briefcase.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/bun-sh.svg b/packages/icons/svg/bun-sh.svg new file mode 100644 index 0000000000..226980126b --- /dev/null +++ b/packages/icons/svg/bun-sh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/svg/cake.svg b/packages/icons/svg/cake.svg index cb49ead949..80543d4411 100644 --- a/packages/icons/svg/cake.svg +++ b/packages/icons/svg/cake.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/calculator.svg b/packages/icons/svg/calculator.svg index 9f8bc9b069..c85bd4c0ac 100644 --- a/packages/icons/svg/calculator.svg +++ b/packages/icons/svg/calculator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/calendar.svg b/packages/icons/svg/calendar.svg index b1540c3cda..ef31fa39bc 100644 --- a/packages/icons/svg/calendar.svg +++ b/packages/icons/svg/calendar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/camera.svg b/packages/icons/svg/camera.svg index c2f29a8f98..6f53cccae2 100644 --- a/packages/icons/svg/camera.svg +++ b/packages/icons/svg/camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cash.svg b/packages/icons/svg/cash.svg index 0693eb25f3..f67f4f8115 100644 --- a/packages/icons/svg/cash.svg +++ b/packages/icons/svg/cash.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chart-bar.svg b/packages/icons/svg/chart-bar.svg index 8c8d9e6905..79d150d16b 100644 --- a/packages/icons/svg/chart-bar.svg +++ b/packages/icons/svg/chart-bar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chart-pie.svg b/packages/icons/svg/chart-pie.svg index 4e0ddc09c6..ed37c4d8fd 100644 --- a/packages/icons/svg/chart-pie.svg +++ b/packages/icons/svg/chart-pie.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chart-square-bar.svg b/packages/icons/svg/chart-square-bar.svg index d730869727..daf31e071b 100644 --- a/packages/icons/svg/chart-square-bar.svg +++ b/packages/icons/svg/chart-square-bar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chat-alt-2.svg b/packages/icons/svg/chat-alt-2.svg index b89c82b61a..b5777a2b0c 100644 --- a/packages/icons/svg/chat-alt-2.svg +++ b/packages/icons/svg/chat-alt-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chat-alt.svg b/packages/icons/svg/chat-alt.svg index 606a2772d5..7f2e73f8e9 100644 --- a/packages/icons/svg/chat-alt.svg +++ b/packages/icons/svg/chat-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chat.svg b/packages/icons/svg/chat.svg index 6a5e36a3ca..e41a147aae 100644 --- a/packages/icons/svg/chat.svg +++ b/packages/icons/svg/chat.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/check-circle.svg b/packages/icons/svg/check-circle.svg index 55530fa551..dd89aadacb 100644 --- a/packages/icons/svg/check-circle.svg +++ b/packages/icons/svg/check-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/check.svg b/packages/icons/svg/check.svg index f826fe1f94..b3935071f1 100644 --- a/packages/icons/svg/check.svg +++ b/packages/icons/svg/check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-down.svg b/packages/icons/svg/cheveron-down.svg index f55f6661e2..2f186c70ef 100644 --- a/packages/icons/svg/cheveron-down.svg +++ b/packages/icons/svg/cheveron-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-left.svg b/packages/icons/svg/cheveron-left.svg index d988aa61a2..571c91f0f9 100644 --- a/packages/icons/svg/cheveron-left.svg +++ b/packages/icons/svg/cheveron-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-right.svg b/packages/icons/svg/cheveron-right.svg index e8b4ae6fd1..e397eaa141 100644 --- a/packages/icons/svg/cheveron-right.svg +++ b/packages/icons/svg/cheveron-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cheveron-up.svg b/packages/icons/svg/cheveron-up.svg index cfbcc7c2b7..924db25028 100644 --- a/packages/icons/svg/cheveron-up.svg +++ b/packages/icons/svg/cheveron-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-down.svg b/packages/icons/svg/chevron-double-down.svg index 9c85257e54..62fba2ff09 100644 --- a/packages/icons/svg/chevron-double-down.svg +++ b/packages/icons/svg/chevron-double-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-left.svg b/packages/icons/svg/chevron-double-left.svg index d98bca9957..4c8f387013 100644 --- a/packages/icons/svg/chevron-double-left.svg +++ b/packages/icons/svg/chevron-double-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-right.svg b/packages/icons/svg/chevron-double-right.svg index a2d80672d6..764b932016 100644 --- a/packages/icons/svg/chevron-double-right.svg +++ b/packages/icons/svg/chevron-double-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chevron-double-up.svg b/packages/icons/svg/chevron-double-up.svg index bbcc0e4fae..331e886dd3 100644 --- a/packages/icons/svg/chevron-double-up.svg +++ b/packages/icons/svg/chevron-double-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/chip.svg b/packages/icons/svg/chip.svg index 6dfaa6c4c9..8263404f1f 100644 --- a/packages/icons/svg/chip.svg +++ b/packages/icons/svg/chip.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-arrow.svg b/packages/icons/svg/clipboard-arrow.svg index 4810c5f1b5..c1252acfe6 100644 --- a/packages/icons/svg/clipboard-arrow.svg +++ b/packages/icons/svg/clipboard-arrow.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-check.svg b/packages/icons/svg/clipboard-check.svg index 7742262383..8f12877d42 100644 --- a/packages/icons/svg/clipboard-check.svg +++ b/packages/icons/svg/clipboard-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-copy.svg b/packages/icons/svg/clipboard-copy.svg index b7582acf26..fbe0e0ba6c 100644 --- a/packages/icons/svg/clipboard-copy.svg +++ b/packages/icons/svg/clipboard-copy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clipboard-list.svg b/packages/icons/svg/clipboard-list.svg index 8b99744bf3..6fc191ea26 100644 --- a/packages/icons/svg/clipboard-list.svg +++ b/packages/icons/svg/clipboard-list.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/clock.svg b/packages/icons/svg/clock.svg index 7d4185f034..87726a2a70 100644 --- a/packages/icons/svg/clock.svg +++ b/packages/icons/svg/clock.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cloud-download.svg b/packages/icons/svg/cloud-download.svg index 70f34d93bc..cda8397fa5 100644 --- a/packages/icons/svg/cloud-download.svg +++ b/packages/icons/svg/cloud-download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cloud-upload.svg b/packages/icons/svg/cloud-upload.svg index 41828ae96a..b2dc342149 100644 --- a/packages/icons/svg/cloud-upload.svg +++ b/packages/icons/svg/cloud-upload.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cloud.svg b/packages/icons/svg/cloud.svg index d7b533895e..a0e3e11825 100644 --- a/packages/icons/svg/cloud.svg +++ b/packages/icons/svg/cloud.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/code.svg b/packages/icons/svg/code.svg index 04045d7dac..71a10d3ea4 100644 --- a/packages/icons/svg/code.svg +++ b/packages/icons/svg/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cog.svg b/packages/icons/svg/cog.svg index 5212eeecec..c80e146eb4 100644 --- a/packages/icons/svg/cog.svg +++ b/packages/icons/svg/cog.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/collection.svg b/packages/icons/svg/collection.svg index 836eb0f26c..ace705636d 100644 --- a/packages/icons/svg/collection.svg +++ b/packages/icons/svg/collection.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/color-swatch.svg b/packages/icons/svg/color-swatch.svg index 9a7166d176..537970ef97 100644 --- a/packages/icons/svg/color-swatch.svg +++ b/packages/icons/svg/color-swatch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cpp.svg b/packages/icons/svg/cpp.svg index aa0814926a..7cd91508fb 100644 --- a/packages/icons/svg/cpp.svg +++ b/packages/icons/svg/cpp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/credit-card.svg b/packages/icons/svg/credit-card.svg index 32b7bc1de4..c66136eeaa 100644 --- a/packages/icons/svg/credit-card.svg +++ b/packages/icons/svg/credit-card.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/css3.svg b/packages/icons/svg/css3.svg index 10c39bd367..3c646a4cd7 100644 --- a/packages/icons/svg/css3.svg +++ b/packages/icons/svg/css3.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cube-transparent.svg b/packages/icons/svg/cube-transparent.svg index cd56c21219..a25fcdf82a 100644 --- a/packages/icons/svg/cube-transparent.svg +++ b/packages/icons/svg/cube-transparent.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cube.svg b/packages/icons/svg/cube.svg index ad3f1e9388..e6af81d68e 100644 --- a/packages/icons/svg/cube.svg +++ b/packages/icons/svg/cube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-bangladesh.svg b/packages/icons/svg/currency-bangladesh.svg index 37b7dc5001..5f80d9d671 100644 --- a/packages/icons/svg/currency-bangladesh.svg +++ b/packages/icons/svg/currency-bangladesh.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-dollar.svg b/packages/icons/svg/currency-dollar.svg index 9a73a8587b..cb1a5ff935 100644 --- a/packages/icons/svg/currency-dollar.svg +++ b/packages/icons/svg/currency-dollar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-euro.svg b/packages/icons/svg/currency-euro.svg index 2da15a60d3..a0d2fde1d7 100644 --- a/packages/icons/svg/currency-euro.svg +++ b/packages/icons/svg/currency-euro.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-pound.svg b/packages/icons/svg/currency-pound.svg index 954190dbe0..db31e105e7 100644 --- a/packages/icons/svg/currency-pound.svg +++ b/packages/icons/svg/currency-pound.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-rupee.svg b/packages/icons/svg/currency-rupee.svg index adf5ec26f5..0fb49c2904 100644 --- a/packages/icons/svg/currency-rupee.svg +++ b/packages/icons/svg/currency-rupee.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/currency-yen.svg b/packages/icons/svg/currency-yen.svg index 84a4bf859d..c64cd5b08a 100644 --- a/packages/icons/svg/currency-yen.svg +++ b/packages/icons/svg/currency-yen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/cursor-click.svg b/packages/icons/svg/cursor-click.svg index ff4b1f1d83..6588069b96 100644 --- a/packages/icons/svg/cursor-click.svg +++ b/packages/icons/svg/cursor-click.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dailymotion.svg b/packages/icons/svg/dailymotion.svg index 4d623109bf..ebbea78f71 100644 --- a/packages/icons/svg/dailymotion.svg +++ b/packages/icons/svg/dailymotion.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dart.svg b/packages/icons/svg/dart.svg index 8a06355a21..b54b00ad36 100644 --- a/packages/icons/svg/dart.svg +++ b/packages/icons/svg/dart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/database.svg b/packages/icons/svg/database.svg index 83b7d1a44e..09c17e5ebe 100644 --- a/packages/icons/svg/database.svg +++ b/packages/icons/svg/database.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/deno.svg b/packages/icons/svg/deno.svg index f53b633bfc..f86f39bca6 100644 --- a/packages/icons/svg/deno.svg +++ b/packages/icons/svg/deno.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/desktop-computer.svg b/packages/icons/svg/desktop-computer.svg index d9104b32a6..dbfc8ceecf 100644 --- a/packages/icons/svg/desktop-computer.svg +++ b/packages/icons/svg/desktop-computer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/device-ipad.svg b/packages/icons/svg/device-ipad.svg index 3ca251754d..11fd115d30 100644 --- a/packages/icons/svg/device-ipad.svg +++ b/packages/icons/svg/device-ipad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/device-mobile.svg b/packages/icons/svg/device-mobile.svg index ccc1772a66..7ada51781d 100644 --- a/packages/icons/svg/device-mobile.svg +++ b/packages/icons/svg/device-mobile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/discord.svg b/packages/icons/svg/discord.svg index e647aab169..4a8f72b183 100644 --- a/packages/icons/svg/discord.svg +++ b/packages/icons/svg/discord.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/disqus.svg b/packages/icons/svg/disqus.svg index 9dfd76e244..c92bd8a050 100644 --- a/packages/icons/svg/disqus.svg +++ b/packages/icons/svg/disqus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/docker.svg b/packages/icons/svg/docker.svg index b5f19d7866..4238ae2ded 100644 --- a/packages/icons/svg/docker.svg +++ b/packages/icons/svg/docker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-add.svg b/packages/icons/svg/document-add.svg index c5b1f737ff..c3c2881655 100644 --- a/packages/icons/svg/document-add.svg +++ b/packages/icons/svg/document-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-download.svg b/packages/icons/svg/document-download.svg index 72abbfc63d..88a6fe15b8 100644 --- a/packages/icons/svg/document-download.svg +++ b/packages/icons/svg/document-download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-duplicate.svg b/packages/icons/svg/document-duplicate.svg index ff690e463f..78f8c9684d 100644 --- a/packages/icons/svg/document-duplicate.svg +++ b/packages/icons/svg/document-duplicate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-remove.svg b/packages/icons/svg/document-remove.svg index 5e19ad3b27..5587a4c9d0 100644 --- a/packages/icons/svg/document-remove.svg +++ b/packages/icons/svg/document-remove.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-report.svg b/packages/icons/svg/document-report.svg index 3ad30eff1e..54bc3ec0f5 100644 --- a/packages/icons/svg/document-report.svg +++ b/packages/icons/svg/document-report.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-search.svg b/packages/icons/svg/document-search.svg index 30df0144b4..def1a5187b 100644 --- a/packages/icons/svg/document-search.svg +++ b/packages/icons/svg/document-search.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document-text.svg b/packages/icons/svg/document-text.svg index b4cef0934b..f7b9cb6e99 100644 --- a/packages/icons/svg/document-text.svg +++ b/packages/icons/svg/document-text.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/document.svg b/packages/icons/svg/document.svg index 42a1904bd7..13dc121bd9 100644 --- a/packages/icons/svg/document.svg +++ b/packages/icons/svg/document.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dotnet.svg b/packages/icons/svg/dotnet.svg index 210ce4b96d..8711f4e1ca 100644 --- a/packages/icons/svg/dotnet.svg +++ b/packages/icons/svg/dotnet.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dots-circle-horizontal.svg b/packages/icons/svg/dots-circle-horizontal.svg index f431e7673e..d795f4d3bd 100644 --- a/packages/icons/svg/dots-circle-horizontal.svg +++ b/packages/icons/svg/dots-circle-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dots-horizontal.svg b/packages/icons/svg/dots-horizontal.svg index b3ac7e48e7..c443a85033 100644 --- a/packages/icons/svg/dots-horizontal.svg +++ b/packages/icons/svg/dots-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dots-vertical.svg b/packages/icons/svg/dots-vertical.svg index d79d6ba88c..8b714a75a3 100644 --- a/packages/icons/svg/dots-vertical.svg +++ b/packages/icons/svg/dots-vertical.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/download.svg b/packages/icons/svg/download.svg index 08ddaa361a..07c0516f65 100644 --- a/packages/icons/svg/download.svg +++ b/packages/icons/svg/download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dribbble.svg b/packages/icons/svg/dribbble.svg index 51aa79b692..43c7835bfc 100644 --- a/packages/icons/svg/dribbble.svg +++ b/packages/icons/svg/dribbble.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/dropbox.svg b/packages/icons/svg/dropbox.svg index 607bceec2a..09cb5606b2 100644 --- a/packages/icons/svg/dropbox.svg +++ b/packages/icons/svg/dropbox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/duplicate.svg b/packages/icons/svg/duplicate.svg index 12adaf9318..d29f79003d 100644 --- a/packages/icons/svg/duplicate.svg +++ b/packages/icons/svg/duplicate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/emoji-happy.svg b/packages/icons/svg/emoji-happy.svg index 64e6d7e7a8..4697ac7b83 100644 --- a/packages/icons/svg/emoji-happy.svg +++ b/packages/icons/svg/emoji-happy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/emoji-sad.svg b/packages/icons/svg/emoji-sad.svg index 80c1d9717a..4de195e38e 100644 --- a/packages/icons/svg/emoji-sad.svg +++ b/packages/icons/svg/emoji-sad.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/etsy.svg b/packages/icons/svg/etsy.svg index c2958025b3..80603d8426 100644 --- a/packages/icons/svg/etsy.svg +++ b/packages/icons/svg/etsy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/exclamation-circle.svg b/packages/icons/svg/exclamation-circle.svg index a64c16a083..793c7353c6 100644 --- a/packages/icons/svg/exclamation-circle.svg +++ b/packages/icons/svg/exclamation-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/exclamation.svg b/packages/icons/svg/exclamation.svg index 618f2a8c20..e9fb190d09 100644 --- a/packages/icons/svg/exclamation.svg +++ b/packages/icons/svg/exclamation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/external-link.svg b/packages/icons/svg/external-link.svg index afbbaa7ea9..05bc04370b 100644 --- a/packages/icons/svg/external-link.svg +++ b/packages/icons/svg/external-link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/eye-off.svg b/packages/icons/svg/eye-off.svg index 8908483423..9be39d982b 100644 --- a/packages/icons/svg/eye-off.svg +++ b/packages/icons/svg/eye-off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/eye.svg b/packages/icons/svg/eye.svg index 89b8a4aeff..03c0260222 100644 --- a/packages/icons/svg/eye.svg +++ b/packages/icons/svg/eye.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/facebook.svg b/packages/icons/svg/facebook.svg index 47f455817e..2ae585c940 100644 --- a/packages/icons/svg/facebook.svg +++ b/packages/icons/svg/facebook.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/fast-forward.svg b/packages/icons/svg/fast-forward.svg index 52cb86b857..87e88f634a 100644 --- a/packages/icons/svg/fast-forward.svg +++ b/packages/icons/svg/fast-forward.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/figma.svg b/packages/icons/svg/figma.svg index 3991e8ffdc..91f4b5534c 100644 --- a/packages/icons/svg/figma.svg +++ b/packages/icons/svg/figma.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/film.svg b/packages/icons/svg/film.svg index 32cccdf55f..8cf85bd7f5 100644 --- a/packages/icons/svg/film.svg +++ b/packages/icons/svg/film.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/filter-line.svg b/packages/icons/svg/filter-line.svg index be7d443ba0..81efd54eaf 100644 --- a/packages/icons/svg/filter-line.svg +++ b/packages/icons/svg/filter-line.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/filter.svg b/packages/icons/svg/filter.svg index 04d41c531a..54702cb794 100644 --- a/packages/icons/svg/filter.svg +++ b/packages/icons/svg/filter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/finger-print.svg b/packages/icons/svg/finger-print.svg index 92a57011ff..04c1a3a271 100644 --- a/packages/icons/svg/finger-print.svg +++ b/packages/icons/svg/finger-print.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/fire.svg b/packages/icons/svg/fire.svg index 23da84bbfa..55fe0b0bdf 100644 --- a/packages/icons/svg/fire.svg +++ b/packages/icons/svg/fire.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/firefox.svg b/packages/icons/svg/firefox.svg index 6ce361570e..0ff1c46987 100644 --- a/packages/icons/svg/firefox.svg +++ b/packages/icons/svg/firefox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/flag.svg b/packages/icons/svg/flag.svg index 69668e6db5..8925768dd7 100644 --- a/packages/icons/svg/flag.svg +++ b/packages/icons/svg/flag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/flutter.svg b/packages/icons/svg/flutter.svg index e3fef16837..35443912de 100644 --- a/packages/icons/svg/flutter.svg +++ b/packages/icons/svg/flutter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-add.svg b/packages/icons/svg/folder-add.svg index 69c01ad682..de41de6a8a 100644 --- a/packages/icons/svg/folder-add.svg +++ b/packages/icons/svg/folder-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-download.svg b/packages/icons/svg/folder-download.svg index 1cd44baeac..dceb3da399 100644 --- a/packages/icons/svg/folder-download.svg +++ b/packages/icons/svg/folder-download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-open.svg b/packages/icons/svg/folder-open.svg index a455d9076a..64d1672322 100644 --- a/packages/icons/svg/folder-open.svg +++ b/packages/icons/svg/folder-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder-remove.svg b/packages/icons/svg/folder-remove.svg index 4731a075f9..c46533a35d 100644 --- a/packages/icons/svg/folder-remove.svg +++ b/packages/icons/svg/folder-remove.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/folder.svg b/packages/icons/svg/folder.svg index 25ed93e4f3..080825087e 100644 --- a/packages/icons/svg/folder.svg +++ b/packages/icons/svg/folder.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/gift.svg b/packages/icons/svg/gift.svg index 1bbe7d3bd3..bf1a554c10 100644 --- a/packages/icons/svg/gift.svg +++ b/packages/icons/svg/gift.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/git-branch.svg b/packages/icons/svg/git-branch.svg index aff6bfa195..d888b4ad07 100644 --- a/packages/icons/svg/git-branch.svg +++ b/packages/icons/svg/git-branch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/git-commit.svg b/packages/icons/svg/git-commit.svg index bfeb7bf28b..ed7ac4e239 100644 --- a/packages/icons/svg/git-commit.svg +++ b/packages/icons/svg/git-commit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/git.svg b/packages/icons/svg/git.svg index 02d0b53a14..2747f1ae28 100644 --- a/packages/icons/svg/git.svg +++ b/packages/icons/svg/git.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/github.svg b/packages/icons/svg/github.svg index 0441b4bc14..8d32ec6caa 100644 --- a/packages/icons/svg/github.svg +++ b/packages/icons/svg/github.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/gitlab.svg b/packages/icons/svg/gitlab.svg index 1de7f2f04f..cf09ec35c0 100644 --- a/packages/icons/svg/gitlab.svg +++ b/packages/icons/svg/gitlab.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/globe-alt.svg b/packages/icons/svg/globe-alt.svg index 9f0a5d2a63..006974ac37 100644 --- a/packages/icons/svg/globe-alt.svg +++ b/packages/icons/svg/globe-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/globe.svg b/packages/icons/svg/globe.svg index b5d6cee0b9..aeb7722c73 100644 --- a/packages/icons/svg/globe.svg +++ b/packages/icons/svg/globe.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/google.svg b/packages/icons/svg/google.svg index a25023ff52..244a0cd34c 100644 --- a/packages/icons/svg/google.svg +++ b/packages/icons/svg/google.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/graphql.svg b/packages/icons/svg/graphql.svg index 44f31864da..1cd235b60a 100644 --- a/packages/icons/svg/graphql.svg +++ b/packages/icons/svg/graphql.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/hand.svg b/packages/icons/svg/hand.svg index afe12196ce..cf7ad1b921 100644 --- a/packages/icons/svg/hand.svg +++ b/packages/icons/svg/hand.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/hashtag.svg b/packages/icons/svg/hashtag.svg index 8b6aea5f4b..be0ae1ea6c 100644 --- a/packages/icons/svg/hashtag.svg +++ b/packages/icons/svg/hashtag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/heart.svg b/packages/icons/svg/heart.svg index e468bbe5b7..028a953460 100644 --- a/packages/icons/svg/heart.svg +++ b/packages/icons/svg/heart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/home.svg b/packages/icons/svg/home.svg index 47fa9b962e..4c45b1a122 100644 --- a/packages/icons/svg/home.svg +++ b/packages/icons/svg/home.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/html5.svg b/packages/icons/svg/html5.svg index e2c789367f..da8876da5c 100644 --- a/packages/icons/svg/html5.svg +++ b/packages/icons/svg/html5.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/identification.svg b/packages/icons/svg/identification.svg index defc2397e2..be9aac0582 100644 --- a/packages/icons/svg/identification.svg +++ b/packages/icons/svg/identification.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/inbox-in.svg b/packages/icons/svg/inbox-in.svg index 9ffd82b273..e2a3bed0dd 100644 --- a/packages/icons/svg/inbox-in.svg +++ b/packages/icons/svg/inbox-in.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/inbox.svg b/packages/icons/svg/inbox.svg index a3b1c137f8..f9485ff6e4 100644 --- a/packages/icons/svg/inbox.svg +++ b/packages/icons/svg/inbox.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/info.svg b/packages/icons/svg/info.svg index 70bac72187..85f3664c7e 100644 --- a/packages/icons/svg/info.svg +++ b/packages/icons/svg/info.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/instagram.svg b/packages/icons/svg/instagram.svg index 7da93b46d2..24878c41cf 100644 --- a/packages/icons/svg/instagram.svg +++ b/packages/icons/svg/instagram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ionic.svg b/packages/icons/svg/ionic.svg index 2470312a22..bc6b1fab41 100644 --- a/packages/icons/svg/ionic.svg +++ b/packages/icons/svg/ionic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ios.svg b/packages/icons/svg/ios.svg index 8cb95f40e7..72d3f6fa35 100644 --- a/packages/icons/svg/ios.svg +++ b/packages/icons/svg/ios.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/java.svg b/packages/icons/svg/java.svg index 0e823c4a49..193fe55530 100644 --- a/packages/icons/svg/java.svg +++ b/packages/icons/svg/java.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/js.svg b/packages/icons/svg/js.svg index 36fa9be06c..f43d7e92b1 100644 --- a/packages/icons/svg/js.svg +++ b/packages/icons/svg/js.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/key.svg b/packages/icons/svg/key.svg index a14f5af83c..ea30abb229 100644 --- a/packages/icons/svg/key.svg +++ b/packages/icons/svg/key.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/kotlin.svg b/packages/icons/svg/kotlin.svg index f037d3bdcb..f7721b934b 100644 --- a/packages/icons/svg/kotlin.svg +++ b/packages/icons/svg/kotlin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/light-bulb.svg b/packages/icons/svg/light-bulb.svg index 174967c540..8e909889aa 100644 --- a/packages/icons/svg/light-bulb.svg +++ b/packages/icons/svg/light-bulb.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/lightning-bolt.svg b/packages/icons/svg/lightning-bolt.svg index c412e61fea..7504e626d4 100644 --- a/packages/icons/svg/lightning-bolt.svg +++ b/packages/icons/svg/lightning-bolt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/link.svg b/packages/icons/svg/link.svg index 585f0e9998..e359b2b26c 100644 --- a/packages/icons/svg/link.svg +++ b/packages/icons/svg/link.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/linkedin.svg b/packages/icons/svg/linkedin.svg index 2c232e31e1..bd68b837e8 100644 --- a/packages/icons/svg/linkedin.svg +++ b/packages/icons/svg/linkedin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/linux.svg b/packages/icons/svg/linux.svg index 6423e66564..a3f6cbbeff 100644 --- a/packages/icons/svg/linux.svg +++ b/packages/icons/svg/linux.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/list.svg b/packages/icons/svg/list.svg index be7d443ba0..81efd54eaf 100644 --- a/packages/icons/svg/list.svg +++ b/packages/icons/svg/list.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/location-marker.svg b/packages/icons/svg/location-marker.svg index 5ed1ca767e..4adbb62c11 100644 --- a/packages/icons/svg/location-marker.svg +++ b/packages/icons/svg/location-marker.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/lock-closed.svg b/packages/icons/svg/lock-closed.svg index f8bdd4d1c9..79a648a3a3 100644 --- a/packages/icons/svg/lock-closed.svg +++ b/packages/icons/svg/lock-closed.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/lock-open.svg b/packages/icons/svg/lock-open.svg index f4594fec4f..9f7f054fac 100644 --- a/packages/icons/svg/lock-open.svg +++ b/packages/icons/svg/lock-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/logout-left.svg b/packages/icons/svg/logout-left.svg index d29c700e04..c1eb890c11 100644 --- a/packages/icons/svg/logout-left.svg +++ b/packages/icons/svg/logout-left.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/logout-right.svg b/packages/icons/svg/logout-right.svg index 655acdb640..a0186b5ff0 100644 --- a/packages/icons/svg/logout-right.svg +++ b/packages/icons/svg/logout-right.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/mail-open.svg b/packages/icons/svg/mail-open.svg index 591e5d58a7..bad0db7fa3 100644 --- a/packages/icons/svg/mail-open.svg +++ b/packages/icons/svg/mail-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/mail.svg b/packages/icons/svg/mail.svg index e0ca19181c..6308205207 100644 --- a/packages/icons/svg/mail.svg +++ b/packages/icons/svg/mail.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/map.svg b/packages/icons/svg/map.svg index c3df362acc..873014f088 100644 --- a/packages/icons/svg/map.svg +++ b/packages/icons/svg/map.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/md-library.svg b/packages/icons/svg/md-library.svg index 8ef41f118a..38ca5ce16e 100644 --- a/packages/icons/svg/md-library.svg +++ b/packages/icons/svg/md-library.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/medium.svg b/packages/icons/svg/medium.svg index f98d9b4d8d..e5854bb88c 100644 --- a/packages/icons/svg/medium.svg +++ b/packages/icons/svg/medium.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/meilisearch.svg b/packages/icons/svg/meilisearch.svg index 0f4e06f991..818995bf0f 100644 --- a/packages/icons/svg/meilisearch.svg +++ b/packages/icons/svg/meilisearch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-1.svg b/packages/icons/svg/menu-alt-1.svg index 636291cc50..7f8a6bc2ac 100644 --- a/packages/icons/svg/menu-alt-1.svg +++ b/packages/icons/svg/menu-alt-1.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-2.svg b/packages/icons/svg/menu-alt-2.svg index 88007e032d..65ddece2ee 100644 --- a/packages/icons/svg/menu-alt-2.svg +++ b/packages/icons/svg/menu-alt-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-3.svg b/packages/icons/svg/menu-alt-3.svg index 370d11f75a..160444e629 100644 --- a/packages/icons/svg/menu-alt-3.svg +++ b/packages/icons/svg/menu-alt-3.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu-alt-4.svg b/packages/icons/svg/menu-alt-4.svg index 9f25869075..37db1fc9be 100644 --- a/packages/icons/svg/menu-alt-4.svg +++ b/packages/icons/svg/menu-alt-4.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/menu.svg b/packages/icons/svg/menu.svg index 08e31f554c..ce3b2d735c 100644 --- a/packages/icons/svg/menu.svg +++ b/packages/icons/svg/menu.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/microphone.svg b/packages/icons/svg/microphone.svg index 6717db9a0f..21612bcab1 100644 --- a/packages/icons/svg/microphone.svg +++ b/packages/icons/svg/microphone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/microsoft.svg b/packages/icons/svg/microsoft.svg index 81efd54eaf..be7d443ba0 100644 --- a/packages/icons/svg/microsoft.svg +++ b/packages/icons/svg/microsoft.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/microsoft_edge.svg b/packages/icons/svg/microsoft_edge.svg index 79301089df..5275335325 100644 --- a/packages/icons/svg/microsoft_edge.svg +++ b/packages/icons/svg/microsoft_edge.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/minus-circle.svg b/packages/icons/svg/minus-circle.svg index 1fbc6c8c7e..7d2d505efd 100644 --- a/packages/icons/svg/minus-circle.svg +++ b/packages/icons/svg/minus-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/minus-sm.svg b/packages/icons/svg/minus-sm.svg index 82297eb717..f5c27a729d 100644 --- a/packages/icons/svg/minus-sm.svg +++ b/packages/icons/svg/minus-sm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/minus.svg b/packages/icons/svg/minus.svg index 5a4c82368c..673e130d31 100644 --- a/packages/icons/svg/minus.svg +++ b/packages/icons/svg/minus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/mode.svg b/packages/icons/svg/mode.svg index e6f70386dd..5dc51044e3 100644 --- a/packages/icons/svg/mode.svg +++ b/packages/icons/svg/mode.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/moon.svg b/packages/icons/svg/moon.svg index 72910aff33..55e73fcfea 100644 --- a/packages/icons/svg/moon.svg +++ b/packages/icons/svg/moon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ms_yammer.svg b/packages/icons/svg/ms_yammer.svg index 81efd54eaf..be7d443ba0 100644 --- a/packages/icons/svg/ms_yammer.svg +++ b/packages/icons/svg/ms_yammer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/msg91.svg b/packages/icons/svg/msg91.svg index 6c3b4c0a09..12f7ad2ee4 100644 --- a/packages/icons/svg/msg91.svg +++ b/packages/icons/svg/msg91.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/music-note.svg b/packages/icons/svg/music-note.svg index 5bc87b5535..dbfe09807c 100644 --- a/packages/icons/svg/music-note.svg +++ b/packages/icons/svg/music-note.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/newspaper.svg b/packages/icons/svg/newspaper.svg index 72cea75a08..91131c8081 100644 --- a/packages/icons/svg/newspaper.svg +++ b/packages/icons/svg/newspaper.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/nextjs.svg b/packages/icons/svg/nextjs.svg index e7e59c6fb8..e14e810c42 100644 --- a/packages/icons/svg/nextjs.svg +++ b/packages/icons/svg/nextjs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/node_js.svg b/packages/icons/svg/node_js.svg index b61e2cbe61..d8ff84b4bf 100644 --- a/packages/icons/svg/node_js.svg +++ b/packages/icons/svg/node_js.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/notion.svg b/packages/icons/svg/notion.svg index 8040166a6e..ebb24bfc5a 100644 --- a/packages/icons/svg/notion.svg +++ b/packages/icons/svg/notion.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/null.svg b/packages/icons/svg/null.svg index 99ae1fc4ed..3310d6968f 100644 --- a/packages/icons/svg/null.svg +++ b/packages/icons/svg/null.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/nuxt.svg b/packages/icons/svg/nuxt.svg index 9a43ddb06b..c8fd4e7b72 100644 --- a/packages/icons/svg/nuxt.svg +++ b/packages/icons/svg/nuxt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/office-building.svg b/packages/icons/svg/office-building.svg index 028374a70c..03a47d5c40 100644 --- a/packages/icons/svg/office-building.svg +++ b/packages/icons/svg/office-building.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/okta.svg b/packages/icons/svg/okta.svg index b98e3ee25e..21d14b9b11 100644 --- a/packages/icons/svg/okta.svg +++ b/packages/icons/svg/okta.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/open-ai.svg b/packages/icons/svg/open-ai.svg index 9f725c47e5..5518669492 100644 --- a/packages/icons/svg/open-ai.svg +++ b/packages/icons/svg/open-ai.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/openid.svg b/packages/icons/svg/openid.svg index d22141b6b5..749b69ec96 100644 --- a/packages/icons/svg/openid.svg +++ b/packages/icons/svg/openid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/opera.svg b/packages/icons/svg/opera.svg index 3d597925bc..207fa081e6 100644 --- a/packages/icons/svg/opera.svg +++ b/packages/icons/svg/opera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pangea.svg b/packages/icons/svg/pangea.svg index 986b5d65c5..c42934a061 100644 --- a/packages/icons/svg/pangea.svg +++ b/packages/icons/svg/pangea.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/packages/icons/svg/paper-airplane.svg b/packages/icons/svg/paper-airplane.svg index aa4709583e..176b1c9cbc 100644 --- a/packages/icons/svg/paper-airplane.svg +++ b/packages/icons/svg/paper-airplane.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/paper-clip.svg b/packages/icons/svg/paper-clip.svg index e17e08fd28..cbb6511f74 100644 --- a/packages/icons/svg/paper-clip.svg +++ b/packages/icons/svg/paper-clip.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pause.svg b/packages/icons/svg/pause.svg index 4fe99b0c6e..4d481588b8 100644 --- a/packages/icons/svg/pause.svg +++ b/packages/icons/svg/pause.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/paypal.svg b/packages/icons/svg/paypal.svg index cb437b46ab..fe232d440b 100644 --- a/packages/icons/svg/paypal.svg +++ b/packages/icons/svg/paypal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pencil-alt.svg b/packages/icons/svg/pencil-alt.svg index a2c61ad55a..7797f4f782 100644 --- a/packages/icons/svg/pencil-alt.svg +++ b/packages/icons/svg/pencil-alt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pencil.svg b/packages/icons/svg/pencil.svg index 514eb2ea8f..7aa926e36b 100644 --- a/packages/icons/svg/pencil.svg +++ b/packages/icons/svg/pencil.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/perspective-api.svg b/packages/icons/svg/perspective-api.svg index b9e8e10e91..fdfe7f4970 100644 --- a/packages/icons/svg/perspective-api.svg +++ b/packages/icons/svg/perspective-api.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone-incoming.svg b/packages/icons/svg/phone-incoming.svg index d59b4e614f..51e116b2ec 100644 --- a/packages/icons/svg/phone-incoming.svg +++ b/packages/icons/svg/phone-incoming.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone-missed-call.svg b/packages/icons/svg/phone-missed-call.svg index c3ba4eb661..03a9b83e3d 100644 --- a/packages/icons/svg/phone-missed-call.svg +++ b/packages/icons/svg/phone-missed-call.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone-outgoing.svg b/packages/icons/svg/phone-outgoing.svg index 4fe7759bf4..796e032290 100644 --- a/packages/icons/svg/phone-outgoing.svg +++ b/packages/icons/svg/phone-outgoing.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/phone.svg b/packages/icons/svg/phone.svg index 0404e862ef..5e83f7cfda 100644 --- a/packages/icons/svg/phone.svg +++ b/packages/icons/svg/phone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/photograph.svg b/packages/icons/svg/photograph.svg index 17993f6718..6ad5f77d47 100644 --- a/packages/icons/svg/photograph.svg +++ b/packages/icons/svg/photograph.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/php.svg b/packages/icons/svg/php.svg index 0ea9516ba0..b1bd4ce43e 100644 --- a/packages/icons/svg/php.svg +++ b/packages/icons/svg/php.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/pinterest.svg b/packages/icons/svg/pinterest.svg index 3473787771..b078e7233b 100644 --- a/packages/icons/svg/pinterest.svg +++ b/packages/icons/svg/pinterest.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/play-button.svg b/packages/icons/svg/play-button.svg index f2cac31330..be24f3ef63 100644 --- a/packages/icons/svg/play-button.svg +++ b/packages/icons/svg/play-button.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/play.svg b/packages/icons/svg/play.svg index 85566113bc..c43bc621b6 100644 --- a/packages/icons/svg/play.svg +++ b/packages/icons/svg/play.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/plus-circle.svg b/packages/icons/svg/plus-circle.svg index 49216e5da2..22c9c4977b 100644 --- a/packages/icons/svg/plus-circle.svg +++ b/packages/icons/svg/plus-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/plus-sm.svg b/packages/icons/svg/plus-sm.svg index 7c2537ba0f..1a7893e189 100644 --- a/packages/icons/svg/plus-sm.svg +++ b/packages/icons/svg/plus-sm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/plus.svg b/packages/icons/svg/plus.svg index e94213c044..49388e8811 100644 --- a/packages/icons/svg/plus.svg +++ b/packages/icons/svg/plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/podio.svg b/packages/icons/svg/podio.svg index d432dd3f75..b45f0284bc 100644 --- a/packages/icons/svg/podio.svg +++ b/packages/icons/svg/podio.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/presentation-chart-1.svg b/packages/icons/svg/presentation-chart-1.svg index bddf1b6203..32a3ec7af4 100644 --- a/packages/icons/svg/presentation-chart-1.svg +++ b/packages/icons/svg/presentation-chart-1.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/presentation-chart-2.svg b/packages/icons/svg/presentation-chart-2.svg index d856d1cfba..445941f353 100644 --- a/packages/icons/svg/presentation-chart-2.svg +++ b/packages/icons/svg/presentation-chart-2.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/printer.svg b/packages/icons/svg/printer.svg index 9f16d7a78d..a5f0257b4f 100644 --- a/packages/icons/svg/printer.svg +++ b/packages/icons/svg/printer.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/product_hunt.svg b/packages/icons/svg/product_hunt.svg index 94fe7b792a..fabdbfc2c6 100644 --- a/packages/icons/svg/product_hunt.svg +++ b/packages/icons/svg/product_hunt.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/puzzle.svg b/packages/icons/svg/puzzle.svg index 3a779abfdf..ab4b873b52 100644 --- a/packages/icons/svg/puzzle.svg +++ b/packages/icons/svg/puzzle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/python.svg b/packages/icons/svg/python.svg index ef3a5f7d84..2c73d88c00 100644 --- a/packages/icons/svg/python.svg +++ b/packages/icons/svg/python.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/qrcode.svg b/packages/icons/svg/qrcode.svg index b304d7f5d6..e05ff2258b 100644 --- a/packages/icons/svg/qrcode.svg +++ b/packages/icons/svg/qrcode.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/question-mark-circle.svg b/packages/icons/svg/question-mark-circle.svg index 1752d30736..1ac50ebbc9 100644 --- a/packages/icons/svg/question-mark-circle.svg +++ b/packages/icons/svg/question-mark-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/qwik.svg b/packages/icons/svg/qwik.svg index cef7d78424..0da5501efd 100644 --- a/packages/icons/svg/qwik.svg +++ b/packages/icons/svg/qwik.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/react.svg b/packages/icons/svg/react.svg index f8cca43397..fdebaf5188 100644 --- a/packages/icons/svg/react.svg +++ b/packages/icons/svg/react.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/receipt-refund.svg b/packages/icons/svg/receipt-refund.svg index d443a8dd1d..ee9b9c68c7 100644 --- a/packages/icons/svg/receipt-refund.svg +++ b/packages/icons/svg/receipt-refund.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/receipt-tax.svg b/packages/icons/svg/receipt-tax.svg index de77a822e6..8e60645be2 100644 --- a/packages/icons/svg/receipt-tax.svg +++ b/packages/icons/svg/receipt-tax.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/reddit.svg b/packages/icons/svg/reddit.svg index 74e34d1d5a..86999ca9e6 100644 --- a/packages/icons/svg/reddit.svg +++ b/packages/icons/svg/reddit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/refresh.svg b/packages/icons/svg/refresh.svg index bddd581d45..a2a7961bd5 100644 --- a/packages/icons/svg/refresh.svg +++ b/packages/icons/svg/refresh.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/relation.svg b/packages/icons/svg/relation.svg index 0b14f2f164..ca6c970e0b 100644 --- a/packages/icons/svg/relation.svg +++ b/packages/icons/svg/relation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/relationship.svg b/packages/icons/svg/relationship.svg index 3890d4ff24..0dfc93145e 100644 --- a/packages/icons/svg/relationship.svg +++ b/packages/icons/svg/relationship.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/replay.svg b/packages/icons/svg/replay.svg index e17c5987bf..89a9da502f 100644 --- a/packages/icons/svg/replay.svg +++ b/packages/icons/svg/replay.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/rewind.svg b/packages/icons/svg/rewind.svg index c52fd56460..93dfdcf95d 100644 --- a/packages/icons/svg/rewind.svg +++ b/packages/icons/svg/rewind.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/rss.svg b/packages/icons/svg/rss.svg index 49593c47ad..69e980e2ef 100644 --- a/packages/icons/svg/rss.svg +++ b/packages/icons/svg/rss.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ruby.svg b/packages/icons/svg/ruby.svg index 10525b38cc..90b717130c 100644 --- a/packages/icons/svg/ruby.svg +++ b/packages/icons/svg/ruby.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/safari.svg b/packages/icons/svg/safari.svg index 095472d776..0bd7732a28 100644 --- a/packages/icons/svg/safari.svg +++ b/packages/icons/svg/safari.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/salesforce.svg b/packages/icons/svg/salesforce.svg index f5b2766d5f..5f7538f7e9 100644 --- a/packages/icons/svg/salesforce.svg +++ b/packages/icons/svg/salesforce.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/save-as.svg b/packages/icons/svg/save-as.svg index 7fb2ea35ec..da7ffcc86c 100644 --- a/packages/icons/svg/save-as.svg +++ b/packages/icons/svg/save-as.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/save.svg b/packages/icons/svg/save.svg index 395bcd9e25..5fbdd0fe8f 100644 --- a/packages/icons/svg/save.svg +++ b/packages/icons/svg/save.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/scale.svg b/packages/icons/svg/scale.svg index 923b5ae473..d890bfc8a1 100644 --- a/packages/icons/svg/scale.svg +++ b/packages/icons/svg/scale.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/scissors.svg b/packages/icons/svg/scissors.svg index 09bbbf8a02..019419371a 100644 --- a/packages/icons/svg/scissors.svg +++ b/packages/icons/svg/scissors.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/search-circle.svg b/packages/icons/svg/search-circle.svg index 73801c75b7..4a3555fd27 100644 --- a/packages/icons/svg/search-circle.svg +++ b/packages/icons/svg/search-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/search.svg b/packages/icons/svg/search.svg index 98da0c2ebd..fef610bc24 100644 --- a/packages/icons/svg/search.svg +++ b/packages/icons/svg/search.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/selector.svg b/packages/icons/svg/selector.svg index 687cc897d8..a31defd550 100644 --- a/packages/icons/svg/selector.svg +++ b/packages/icons/svg/selector.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/send.svg b/packages/icons/svg/send.svg index 66c3cf2c55..63a0fecb7e 100644 --- a/packages/icons/svg/send.svg +++ b/packages/icons/svg/send.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/server.svg b/packages/icons/svg/server.svg index 5a7284c504..3b4bf7547e 100644 --- a/packages/icons/svg/server.svg +++ b/packages/icons/svg/server.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/share.svg b/packages/icons/svg/share.svg index a8d5502a07..bf19e71621 100644 --- a/packages/icons/svg/share.svg +++ b/packages/icons/svg/share.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shield-check.svg b/packages/icons/svg/shield-check.svg index bcbe876a1c..97c8644107 100644 --- a/packages/icons/svg/shield-check.svg +++ b/packages/icons/svg/shield-check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shield-exclamation.svg b/packages/icons/svg/shield-exclamation.svg index b908997290..3ca134ecc8 100644 --- a/packages/icons/svg/shield-exclamation.svg +++ b/packages/icons/svg/shield-exclamation.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shopping-bag.svg b/packages/icons/svg/shopping-bag.svg index 13e5c261e6..12d12e74d4 100644 --- a/packages/icons/svg/shopping-bag.svg +++ b/packages/icons/svg/shopping-bag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/shopping-cart.svg b/packages/icons/svg/shopping-cart.svg index 58114f0a20..1db44e4c88 100644 --- a/packages/icons/svg/shopping-cart.svg +++ b/packages/icons/svg/shopping-cart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/skype.svg b/packages/icons/svg/skype.svg index 7148736e12..801b6a3198 100644 --- a/packages/icons/svg/skype.svg +++ b/packages/icons/svg/skype.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/slack.svg b/packages/icons/svg/slack.svg index 8741d78b2b..05d028d0e4 100644 --- a/packages/icons/svg/slack.svg +++ b/packages/icons/svg/slack.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sort-ascending.svg b/packages/icons/svg/sort-ascending.svg index 675fff98b9..6788e76069 100644 --- a/packages/icons/svg/sort-ascending.svg +++ b/packages/icons/svg/sort-ascending.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sort-descending.svg b/packages/icons/svg/sort-descending.svg index 5843d4d1d2..9af3471b55 100644 --- a/packages/icons/svg/sort-descending.svg +++ b/packages/icons/svg/sort-descending.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sparkles.svg b/packages/icons/svg/sparkles.svg index 478930013b..3114b62792 100644 --- a/packages/icons/svg/sparkles.svg +++ b/packages/icons/svg/sparkles.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/speakerphone.svg b/packages/icons/svg/speakerphone.svg index 5489659f17..86b9b15df8 100644 --- a/packages/icons/svg/speakerphone.svg +++ b/packages/icons/svg/speakerphone.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/spin.svg b/packages/icons/svg/spin.svg index 97e33090e8..d3273a72b7 100644 --- a/packages/icons/svg/spin.svg +++ b/packages/icons/svg/spin.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/spotify.svg b/packages/icons/svg/spotify.svg index 2a823fc683..7249a1c94b 100644 --- a/packages/icons/svg/spotify.svg +++ b/packages/icons/svg/spotify.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/star.svg b/packages/icons/svg/star.svg index dfda7e32fc..9ff8dc1fdc 100644 --- a/packages/icons/svg/star.svg +++ b/packages/icons/svg/star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/status-offline.svg b/packages/icons/svg/status-offline.svg index 54639beb12..58783871ed 100644 --- a/packages/icons/svg/status-offline.svg +++ b/packages/icons/svg/status-offline.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/status-online.svg b/packages/icons/svg/status-online.svg index ad5938e00d..dd875d1cf9 100644 --- a/packages/icons/svg/status-online.svg +++ b/packages/icons/svg/status-online.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/stop.svg b/packages/icons/svg/stop.svg index a71a97a9f5..dc547d5e6c 100644 --- a/packages/icons/svg/stop.svg +++ b/packages/icons/svg/stop.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/stripe.svg b/packages/icons/svg/stripe.svg index 76e734c165..adced8ce17 100644 --- a/packages/icons/svg/stripe.svg +++ b/packages/icons/svg/stripe.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/sun.svg b/packages/icons/svg/sun.svg index 0f4baa1336..da8c275220 100644 --- a/packages/icons/svg/sun.svg +++ b/packages/icons/svg/sun.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/support.svg b/packages/icons/svg/support.svg index b6652b4618..e2c5c90e97 100644 --- a/packages/icons/svg/support.svg +++ b/packages/icons/svg/support.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/svelte.svg b/packages/icons/svg/svelte.svg index 15335b99fc..ba14cc9126 100644 --- a/packages/icons/svg/svelte.svg +++ b/packages/icons/svg/svelte.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/swift.svg b/packages/icons/svg/swift.svg index 257af98d5a..351591dc31 100644 --- a/packages/icons/svg/swift.svg +++ b/packages/icons/svg/swift.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/switch-horizontal.svg b/packages/icons/svg/switch-horizontal.svg index ffbf49ed6a..cf42af952c 100644 --- a/packages/icons/svg/switch-horizontal.svg +++ b/packages/icons/svg/switch-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/switch-vertical.svg b/packages/icons/svg/switch-vertical.svg index a605c5645f..7088047e5f 100644 --- a/packages/icons/svg/switch-vertical.svg +++ b/packages/icons/svg/switch-vertical.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/table.svg b/packages/icons/svg/table.svg index dc39f33eee..5bd86b6fc7 100644 --- a/packages/icons/svg/table.svg +++ b/packages/icons/svg/table.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tag.svg b/packages/icons/svg/tag.svg index 79ecc59b62..261f05888d 100644 --- a/packages/icons/svg/tag.svg +++ b/packages/icons/svg/tag.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/telegram.svg b/packages/icons/svg/telegram.svg index 3acf81cb6c..55acff5a14 100644 --- a/packages/icons/svg/telegram.svg +++ b/packages/icons/svg/telegram.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/telesign.svg b/packages/icons/svg/telesign.svg index e682165806..ce49928157 100644 --- a/packages/icons/svg/telesign.svg +++ b/packages/icons/svg/telesign.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/template.svg b/packages/icons/svg/template.svg index 3c60fb62b7..9bc959b93d 100644 --- a/packages/icons/svg/template.svg +++ b/packages/icons/svg/template.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/terminal.svg b/packages/icons/svg/terminal.svg index a0a7d5efdd..539d0cd698 100644 --- a/packages/icons/svg/terminal.svg +++ b/packages/icons/svg/terminal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/text.svg b/packages/icons/svg/text.svg index 736fdfa16c..169eb13ba6 100644 --- a/packages/icons/svg/text.svg +++ b/packages/icons/svg/text.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/textmagic.svg b/packages/icons/svg/textmagic.svg index e72cad3c36..a3db160d0d 100644 --- a/packages/icons/svg/textmagic.svg +++ b/packages/icons/svg/textmagic.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/thumb-dowm.svg b/packages/icons/svg/thumb-dowm.svg index dd3b420e55..25ecc9041e 100644 --- a/packages/icons/svg/thumb-dowm.svg +++ b/packages/icons/svg/thumb-dowm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/thumb-up.svg b/packages/icons/svg/thumb-up.svg index ff963b435b..b3d3802005 100644 --- a/packages/icons/svg/thumb-up.svg +++ b/packages/icons/svg/thumb-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ticket.svg b/packages/icons/svg/ticket.svg index 0289b2304d..c05bfcec0a 100644 --- a/packages/icons/svg/ticket.svg +++ b/packages/icons/svg/ticket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tiktok.svg b/packages/icons/svg/tiktok.svg index 3201b78c45..085392ec57 100644 --- a/packages/icons/svg/tiktok.svg +++ b/packages/icons/svg/tiktok.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/toggle.svg b/packages/icons/svg/toggle.svg index a1e0e8e01c..45b6816067 100644 --- a/packages/icons/svg/toggle.svg +++ b/packages/icons/svg/toggle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tradeshift.svg b/packages/icons/svg/tradeshift.svg index ac7de2e2f1..9b280885bc 100644 --- a/packages/icons/svg/tradeshift.svg +++ b/packages/icons/svg/tradeshift.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/translate.svg b/packages/icons/svg/translate.svg index 171f41552b..e4eed82f77 100644 --- a/packages/icons/svg/translate.svg +++ b/packages/icons/svg/translate.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/trash.svg b/packages/icons/svg/trash.svg index cbc493ef02..a0d8e3831f 100644 --- a/packages/icons/svg/trash.svg +++ b/packages/icons/svg/trash.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/trending-down.svg b/packages/icons/svg/trending-down.svg index fff9e2095e..65f941863b 100644 --- a/packages/icons/svg/trending-down.svg +++ b/packages/icons/svg/trending-down.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/trending-up.svg b/packages/icons/svg/trending-up.svg index ef8a7c9fa5..ea9dcf9a28 100644 --- a/packages/icons/svg/trending-up.svg +++ b/packages/icons/svg/trending-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/truck.svg b/packages/icons/svg/truck.svg index e76f7aff8b..9a001257ce 100644 --- a/packages/icons/svg/truck.svg +++ b/packages/icons/svg/truck.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/tumbir.svg b/packages/icons/svg/tumbir.svg index 23b5418736..3571d874db 100644 --- a/packages/icons/svg/tumbir.svg +++ b/packages/icons/svg/tumbir.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/twilio.svg b/packages/icons/svg/twilio.svg index 2063709e97..ff270d6e42 100644 --- a/packages/icons/svg/twilio.svg +++ b/packages/icons/svg/twilio.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/twitch.svg b/packages/icons/svg/twitch.svg index 5c1f6576b2..e154ea2ae7 100644 --- a/packages/icons/svg/twitch.svg +++ b/packages/icons/svg/twitch.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/twitter.svg b/packages/icons/svg/twitter.svg index ccff7faf39..79d72098ce 100644 --- a/packages/icons/svg/twitter.svg +++ b/packages/icons/svg/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/typescript.svg b/packages/icons/svg/typescript.svg index 2a6f238c8a..1bfce11af4 100644 --- a/packages/icons/svg/typescript.svg +++ b/packages/icons/svg/typescript.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/unity.svg b/packages/icons/svg/unity.svg index 29b5cdcb12..7d7fcc1c3a 100644 --- a/packages/icons/svg/unity.svg +++ b/packages/icons/svg/unity.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/upload.svg b/packages/icons/svg/upload.svg index f73fb7798c..986e71e80b 100644 --- a/packages/icons/svg/upload.svg +++ b/packages/icons/svg/upload.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-add.svg b/packages/icons/svg/user-add.svg index df8e17a119..93539d9f5f 100644 --- a/packages/icons/svg/user-add.svg +++ b/packages/icons/svg/user-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-circle.svg b/packages/icons/svg/user-circle.svg index 892da59cc6..bfbb2e1308 100644 --- a/packages/icons/svg/user-circle.svg +++ b/packages/icons/svg/user-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-group.svg b/packages/icons/svg/user-group.svg index 43f7853cc6..e5f0ec49c7 100644 --- a/packages/icons/svg/user-group.svg +++ b/packages/icons/svg/user-group.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user-remove.svg b/packages/icons/svg/user-remove.svg index 442f1b3cd7..7539e08b42 100644 --- a/packages/icons/svg/user-remove.svg +++ b/packages/icons/svg/user-remove.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/user.svg b/packages/icons/svg/user.svg index 8834268f26..df86099dba 100644 --- a/packages/icons/svg/user.svg +++ b/packages/icons/svg/user.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/users.svg b/packages/icons/svg/users.svg index aa68cffd4e..d73360c4b5 100644 --- a/packages/icons/svg/users.svg +++ b/packages/icons/svg/users.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/variable.svg b/packages/icons/svg/variable.svg index c41a439c3c..9a11430410 100644 --- a/packages/icons/svg/variable.svg +++ b/packages/icons/svg/variable.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/video-camera.svg b/packages/icons/svg/video-camera.svg index 39496dc48a..e5b10b1745 100644 --- a/packages/icons/svg/video-camera.svg +++ b/packages/icons/svg/video-camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/video.svg b/packages/icons/svg/video.svg index 4886441995..6741a85337 100644 --- a/packages/icons/svg/video.svg +++ b/packages/icons/svg/video.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-boards.svg b/packages/icons/svg/view-boards.svg index 99b886e97b..6276140efa 100644 --- a/packages/icons/svg/view-boards.svg +++ b/packages/icons/svg/view-boards.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-grid-add.svg b/packages/icons/svg/view-grid-add.svg index 8e1f6afb44..e156eca430 100644 --- a/packages/icons/svg/view-grid-add.svg +++ b/packages/icons/svg/view-grid-add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-grid.svg b/packages/icons/svg/view-grid.svg index fae3e5f9f6..d953e6ca1e 100644 --- a/packages/icons/svg/view-grid.svg +++ b/packages/icons/svg/view-grid.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/view-list.svg b/packages/icons/svg/view-list.svg index c5174e8390..b79a136b25 100644 --- a/packages/icons/svg/view-list.svg +++ b/packages/icons/svg/view-list.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vimeo.svg b/packages/icons/svg/vimeo.svg index 64d10318a1..cc30d870d0 100644 --- a/packages/icons/svg/vimeo.svg +++ b/packages/icons/svg/vimeo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vk.svg b/packages/icons/svg/vk.svg index 965e324f5e..ebda071c92 100644 --- a/packages/icons/svg/vk.svg +++ b/packages/icons/svg/vk.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/volume-off.svg b/packages/icons/svg/volume-off.svg index b06dd7cbcf..43a2c301d2 100644 --- a/packages/icons/svg/volume-off.svg +++ b/packages/icons/svg/volume-off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/volume-up.svg b/packages/icons/svg/volume-up.svg index 188dbbca02..66197d9b64 100644 --- a/packages/icons/svg/volume-up.svg +++ b/packages/icons/svg/volume-up.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vonage.svg b/packages/icons/svg/vonage.svg index 611eeacd2b..047c8903f4 100644 --- a/packages/icons/svg/vonage.svg +++ b/packages/icons/svg/vonage.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vs_code.svg b/packages/icons/svg/vs_code.svg index cad535921c..d0bc8fed0a 100644 --- a/packages/icons/svg/vs_code.svg +++ b/packages/icons/svg/vs_code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/vue.svg b/packages/icons/svg/vue.svg index 81efd54eaf..be7d443ba0 100644 --- a/packages/icons/svg/vue.svg +++ b/packages/icons/svg/vue.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/whatsapp.svg b/packages/icons/svg/whatsapp.svg index 550254f682..5889b3b914 100644 --- a/packages/icons/svg/whatsapp.svg +++ b/packages/icons/svg/whatsapp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/wifi.svg b/packages/icons/svg/wifi.svg index 0dd107596b..f16d9abe71 100644 --- a/packages/icons/svg/wifi.svg +++ b/packages/icons/svg/wifi.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/wordpress.svg b/packages/icons/svg/wordpress.svg index 5061026e02..b0d3c5aa56 100644 --- a/packages/icons/svg/wordpress.svg +++ b/packages/icons/svg/wordpress.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/x-circle.svg b/packages/icons/svg/x-circle.svg index b665759bcf..aa3b0ecdbc 100644 --- a/packages/icons/svg/x-circle.svg +++ b/packages/icons/svg/x-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/x.svg b/packages/icons/svg/x.svg index b48ee7db48..616f270a91 100644 --- a/packages/icons/svg/x.svg +++ b/packages/icons/svg/x.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/yahoo.svg b/packages/icons/svg/yahoo.svg index 6be4e4500c..0e712e10f1 100644 --- a/packages/icons/svg/yahoo.svg +++ b/packages/icons/svg/yahoo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/yandex.svg b/packages/icons/svg/yandex.svg index 5b5d79803c..b132658a5e 100644 --- a/packages/icons/svg/yandex.svg +++ b/packages/icons/svg/yandex.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/ycombinator.svg b/packages/icons/svg/ycombinator.svg index 353768e5c4..ce271184af 100644 --- a/packages/icons/svg/ycombinator.svg +++ b/packages/icons/svg/ycombinator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/youtube.svg b/packages/icons/svg/youtube.svg index 01531f18b6..65a570e182 100644 --- a/packages/icons/svg/youtube.svg +++ b/packages/icons/svg/youtube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/zoom-in.svg b/packages/icons/svg/zoom-in.svg index 42b5b96d6c..cf7e66f849 100644 --- a/packages/icons/svg/zoom-in.svg +++ b/packages/icons/svg/zoom-in.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/zoom-out.svg b/packages/icons/svg/zoom-out.svg index 2958cfd773..f9f51d2f6b 100644 --- a/packages/icons/svg/zoom-out.svg +++ b/packages/icons/svg/zoom-out.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/icons/svg/zoom.svg b/packages/icons/svg/zoom.svg index 52128994d5..7a2bf5709f 100644 --- a/packages/icons/svg/zoom.svg +++ b/packages/icons/svg/zoom.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From 3152f05c680a8b4c94e2446fcef8a7dcd5b8f9f2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 14 Sep 2023 08:11:16 +0000 Subject: [PATCH 52/52] Version Packages (next) --- .changeset/pre.json | 1 + apps/kitchensink/package.json | 4 ++-- apps/pink/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/ui/CHANGELOG.md | 11 +++++++++++ packages/ui/package.json | 4 ++-- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index ef0d974af6..cef8a6defb 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -18,6 +18,7 @@ "ten-pandas-share", "ten-snakes-teach", "three-waves-cheer", + "two-pans-shake", "witty-bulldogs-repeat" ] } diff --git a/apps/kitchensink/package.json b/apps/kitchensink/package.json index 7735388640..b93a91e8e9 100644 --- a/apps/kitchensink/package.json +++ b/apps/kitchensink/package.json @@ -16,8 +16,8 @@ "license": "ISC", "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.8", - "@appwrite.io/pink-icons": "0.1.0-next.8", + "@appwrite.io/pink": "0.1.0-next.9", + "@appwrite.io/pink-icons": "0.1.0-next.9", "vite-plugin-handlebars": "^1.6.0" } } diff --git a/apps/pink/package.json b/apps/pink/package.json index 8bfb6e9e48..5e3ad4872e 100644 --- a/apps/pink/package.json +++ b/apps/pink/package.json @@ -29,8 +29,8 @@ }, "devDependencies": { "@appwrite.io/fonts": "*", - "@appwrite.io/pink": "0.1.0-next.8", - "@appwrite.io/pink-icons": "0.1.0-next.8", + "@appwrite.io/pink": "0.1.0-next.9", + "@appwrite.io/pink-icons": "0.1.0-next.9", "@types/prismjs": "^1.26.0", "glob": "^8.0.3", "sass": "^1.57.1" diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index cc33e526b9..1598a33e22 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @appwrite.io/pink-icons +## 0.1.0-next.9 + +### Minor Changes + +- ccbfc7e2: Add bun icon + ## 0.1.0-next.8 ### Patch Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 4e0b2e0753..ef25a15d06 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink-icons", - "version": "0.1.0-next.8", + "version": "0.1.0-next.9", "description": "", "type": "module", "scripts": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 731e73b2d1..9387f74fbb 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,16 @@ # @appwrite.io/pink +## 0.1.0-next.9 + +### Minor Changes + +- ccbfc7e2: Add bun icon + +### Patch Changes + +- Updated dependencies [ccbfc7e2] + - @appwrite.io/pink-icons@0.1.0-next.9 + ## 0.1.0-next.8 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 183be062dd..8be3c39a3d 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@appwrite.io/pink", - "version": "0.1.0-next.8", + "version": "0.1.0-next.9", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -12,7 +12,7 @@ "author": "", "license": "ISC", "dependencies": { - "@appwrite.io/pink-icons": "0.1.0-next.8", + "@appwrite.io/pink-icons": "0.1.0-next.9", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.7.3" },