diff --git a/apps/kitchensink/auth.html b/apps/kitchensink/auth.html index e574de6ceb..095b7ea4c8 100644 --- a/apps/kitchensink/auth.html +++ b/apps/kitchensink/auth.html @@ -18,7 +18,7 @@ > + - diff --git a/apps/kitchensink/cover-frame.html b/apps/kitchensink/cover-frame.html index 8e7b6f587b..86ecb86f7e 100644 --- a/apps/kitchensink/cover-frame.html +++ b/apps/kitchensink/cover-frame.html @@ -236,15 +236,14 @@
Eldad Test
- + -
-

Function ID: 0123456789012abcdefg

+

Function ID: 0123456789012abcdefg

@@ -255,7 +254,7 @@

Function ID: 0123456789012abcdefg

Chrome
-

Deployment ID: 0123456789012

+

Deployment ID: 0123456789012

Size 555KB
diff --git a/apps/kitchensink/dashboard.html b/apps/kitchensink/dashboard.html index 0fc1bbfb3f..7d9eb74bd6 100644 --- a/apps/kitchensink/dashboard.html +++ b/apps/kitchensink/dashboard.html @@ -38,7 +38,7 @@

-
1.19 GB
+
1.19 GB
Bandwidth
@@ -136,7 +136,7 @@

-
8.0 MB
+
8.0 MB
Users
diff --git a/apps/kitchensink/empty-state-cards.html b/apps/kitchensink/empty-state-cards.html index f9d3f4c144..b8baacf760 100644 --- a/apps/kitchensink/empty-state-cards.html +++ b/apps/kitchensink/empty-state-cards.html @@ -58,7 +58,7 @@

Users

Create your first [object] to get started

-

Need a hand? Check out our documentation.

+

Need a hand? Check out our documentation.

@@ -106,8 +106,8 @@

You have no [files / users/ buckets / etc.]. Create a [file / etc.]

+ - diff --git a/apps/kitchensink/filters.html b/apps/kitchensink/filters.html new file mode 100644 index 0000000000..5d618ec0cf --- /dev/null +++ b/apps/kitchensink/filters.html @@ -0,0 +1,203 @@ + + + + + + + @appwrite/kitchensink - user demo + + + +
+ + {{> topNav}} {{> sideNav}} +
+
+
+
+

+ + + + Movie +

+
+ 637a40ba7a703e3936e2 +
+ +
+
+ +
+
+ + + +
+
+
+
+ +
+

Documents

+
+
+
+ +
+ + +
+
+
Filters
+ +
+
+

Apply filter rules to refine the table view

+
+
+ + +
+
+ + +
+
+ +
+ + +
+ + + +
+ +
+
+ +
+ + +
+ + +
+
+ +
+
+ + +
+
+ +
+ +
+
+ + + diff --git a/apps/kitchensink/functions.html b/apps/kitchensink/functions.html new file mode 100644 index 0000000000..777e7600bb --- /dev/null +++ b/apps/kitchensink/functions.html @@ -0,0 +1,179 @@ + + + + + + @appwrite/kitchensink - user demo + + + +
+ {{> topNav}} {{> sideNav}} +
+
+
+
+

+ + + + Users +

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

Functions

+ +
+ +
+

Total results: 2

+ +
+
+ +
+ +
+ +
+ + + diff --git a/apps/kitchensink/getting-started.html b/apps/kitchensink/getting-started.html index 8383ae4f45..985bd80468 100644 --- a/apps/kitchensink/getting-started.html +++ b/apps/kitchensink/getting-started.html @@ -159,8 +159,8 @@

Add a Platform

+ - diff --git a/apps/kitchensink/index.html b/apps/kitchensink/index.html index e5a7446034..ed047e3c72 100644 --- a/apps/kitchensink/index.html +++ b/apps/kitchensink/index.html @@ -1728,10 +1728,25 @@

Manage

+ - +
+
+ 4 + documents selected +
+
+ + +
+
+ diff --git a/apps/kitchensink/no-side.html b/apps/kitchensink/no-side.html index b66e33de84..eb90fe21fd 100644 --- a/apps/kitchensink/no-side.html +++ b/apps/kitchensink/no-side.html @@ -264,9 +264,8 @@
Eldad Test
- + - diff --git a/apps/kitchensink/partials/sideNav.hbs b/apps/kitchensink/partials/sideNav.hbs index 2e8896a174..579326e8a6 100644 --- a/apps/kitchensink/partials/sideNav.hbs +++ b/apps/kitchensink/partials/sideNav.hbs @@ -1,130 +1,198 @@ \ No newline at end of file + + + + + + \ No newline at end of file diff --git a/apps/kitchensink/partials/topNav.hbs b/apps/kitchensink/partials/topNav.hbs index b288b18bf8..285e846b9e 100644 --- a/apps/kitchensink/partials/topNav.hbs +++ b/apps/kitchensink/partials/topNav.hbs @@ -1,5 +1,5 @@
-
+ +
+
+
+
+
+ +
+
+
+ - diff --git a/apps/kitchensink/users.html b/apps/kitchensink/users.html index d64d85c003..83d026b585 100644 --- a/apps/kitchensink/users.html +++ b/apps/kitchensink/users.html @@ -2,12 +2,31 @@ - + + @appwrite/kitchensink - user demo -
+
+
+
+ +
+
This is a default alert
+

+ Some description about the alert sent to the user. +

+
+
+ +
+
+
+ + {{> topNav}} {{> sideNav}}
@@ -198,34 +217,33 @@

+
- -
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js index a3eb9bbd10..f5ffa53851 100644 --- a/apps/kitchensink/vite.config.js +++ b/apps/kitchensink/vite.config.js @@ -23,6 +23,7 @@ const config = { 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, + functions: new URL("./functions.html", import.meta.url).pathname, userSecurity: new URL("./userSecurity.html", import.meta.url).pathname, auth: new URL("./auth.html", import.meta.url).pathname, auth2: new URL("./auth2.html", import.meta.url).pathname, @@ -35,6 +36,7 @@ const config = { emptyStateCards: new URL("./empty-state-cards.html", import.meta.url).pathname, gettingStarted: new URL("./getting-started.html", import.meta.url).pathname, modalDemo: new URL("./modal-demo.html", import.meta.url).pathname, + filters: new URL("./filters.html", import.meta.url).pathname, }, }, }, diff --git a/apps/kitchensink/wizard-form.html b/apps/kitchensink/wizard-form.html index 89488c798c..582a85f25c 100644 --- a/apps/kitchensink/wizard-form.html +++ b/apps/kitchensink/wizard-form.html @@ -238,7 +238,6 @@
Eldad Test
-
@@ -253,7 +252,7 @@
Eldad Test
-
Create Document
+
Create Document
@@ -262,7 +261,7 @@
Eldad Test
-

Contact the Appwrite Team

+

Contact the Appwrite Team

Found a bug? Need a hand? Just want to say hi? Contact the Appwrite team with your queries.

diff --git a/apps/kitchensink/wizard.html b/apps/kitchensink/wizard.html index bf35231b14..969bda5db5 100644 --- a/apps/kitchensink/wizard.html +++ b/apps/kitchensink/wizard.html @@ -238,7 +238,6 @@
Eldad Test
- @@ -250,7 +249,7 @@
Eldad Test
-
Create Document
+
Create Document
diff --git a/apps/pink/public/empty-state-dark.svg b/apps/pink/public/empty-state-dark.svg new file mode 100644 index 0000000000..40a1126617 --- /dev/null +++ b/apps/pink/public/empty-state-dark.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/empty-state-light.svg b/apps/pink/public/empty-state-light.svg new file mode 100644 index 0000000000..332790627b --- /dev/null +++ b/apps/pink/public/empty-state-light.svg @@ -0,0 +1,157 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/color/dark/appwrite.svg b/apps/pink/public/icons/color/dark/appwrite.svg new file mode 100644 index 0000000000..ec223cea31 --- /dev/null +++ b/apps/pink/public/icons/color/dark/appwrite.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pink/public/icons/color/dark/azure.svg b/apps/pink/public/icons/color/dark/azure.svg new file mode 100644 index 0000000000..06a2264b64 --- /dev/null +++ b/apps/pink/public/icons/color/dark/azure.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/color/light/appwrite.svg b/apps/pink/public/icons/color/light/appwrite.svg new file mode 100644 index 0000000000..053d2dadc5 --- /dev/null +++ b/apps/pink/public/icons/color/light/appwrite.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pink/public/icons/color/light/azure.svg b/apps/pink/public/icons/color/light/azure.svg new file mode 100644 index 0000000000..10216e3660 --- /dev/null +++ b/apps/pink/public/icons/color/light/azure.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pink/public/icons/grayscale/dark/appwrite.svg b/apps/pink/public/icons/grayscale/dark/appwrite.svg new file mode 100644 index 0000000000..d6f7bab119 --- /dev/null +++ b/apps/pink/public/icons/grayscale/dark/appwrite.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pink/public/icons/grayscale/dark/azure.svg b/apps/pink/public/icons/grayscale/dark/azure.svg new file mode 100644 index 0000000000..740cacaabd --- /dev/null +++ b/apps/pink/public/icons/grayscale/dark/azure.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pink/public/icons/grayscale/light/appwrite.svg b/apps/pink/public/icons/grayscale/light/appwrite.svg new file mode 100644 index 0000000000..9c135b0ca4 --- /dev/null +++ b/apps/pink/public/icons/grayscale/light/appwrite.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pink/public/icons/grayscale/light/azure.svg b/apps/pink/public/icons/grayscale/light/azure.svg new file mode 100644 index 0000000000..52ee13a52f --- /dev/null +++ b/apps/pink/public/icons/grayscale/light/azure.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pink/public/search.json b/apps/pink/public/search.json index 4743952d13..80c13bddaa 100644 --- a/apps/pink/public/search.json +++ b/apps/pink/public/search.json @@ -1 +1 @@ -{"documentCount":51,"nextId":51,"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},"fieldIds":{"title":0,"content":1},"fieldLength":{"0":[2,243],"1":[2,222],"2":[3,142],"3":[2,173],"4":[3,193],"5":[3,144],"6":[3,170],"7":[2,103],"8":[2,206],"9":[3,117],"10":[2,194],"11":[3,178],"12":[4,204],"13":[3,133],"14":[2,123],"15":[2,262],"16":[2,155],"17":[2,185],"18":[3,112],"19":[3,304],"20":[2,105],"21":[2,133],"22":[2,161],"23":[3,181],"24":[2,123],"25":[2,187],"26":[2,306],"27":[2,231],"28":[2,141],"29":[3,183],"30":[2,205],"31":[3,152],"32":[2,178],"33":[2,265],"34":[2,209],"35":[2,217],"36":[2,151],"37":[1,345],"38":[2,113],"39":[3,149],"40":[2,125],"41":[2,162],"42":[3,150],"43":[2,121],"44":[2,202],"45":[2,151],"46":[3,141],"47":[2,115],"48":[2,155],"49":[2,96],"50":[2,114]},"averageFieldLength":[2.313725490196078,173.13725490196086],"storedFields":{"0":{"title":"components - alert","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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-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 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 > 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 > Class Type is-info Info Use this alert to provide additional information or tips to the user. 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 > 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 > Class Type is-success Success Use this alert to inform the user of a task that has been completed successfully. 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 > 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 > Class Type is-warning Warning Use this alert to warn the user that action may be required depending on the context. 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 > 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 > Class Type is-danger Danger/Error Use this alert to warn the user about errors, and how they can fix the problem. 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 > 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 > 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. tooltip avatar Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/alert"},"1":{"title":"components - avatar","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 > 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 code panel Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/avatar"},"2":{"title":"components - code panel","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 > avatar collapsible Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/code-panel"},"3":{"title":"components - collapsible","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"4":{"title":"components - drop list","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 > 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"},"5":{"title":"components - file preview","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"6":{"title":"components - grid item","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 Complete Interactive sub-header Header 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-8 \" > Header </ h2 > </ 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 Interactive sub-header Header Disabled Interactive sub-header Header Interactive sub-header Header 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-8 \" > Header </ h2 > </ 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-8 \" > Header </ h2 > </ 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 loader Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/grid-item"},"7":{"title":"components - loader","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs upload box upload file box user profile components 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 > grid item modal Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/loader"},"8":{"title":"components - modal","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 = \" 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 > </ 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 \" > < 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 > </ 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 \" > < 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 > </ 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 > Best Practice Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text. loader secondary tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/modal"},"9":{"title":"components - secondary tabs","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 > 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 > modal tabs Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/secondary-tabs"},"10":{"title":"components - tabs","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 upload box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/tabs"},"11":{"title":"components - upload box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 u-margin-inline-end-16 \" > < 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 u-margin-inline-end-16 \" > < 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 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 \" > % </ 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 u-margin-inline-end-16 \" > < 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 u-margin-inline-end-16 \" > < 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 > tabs upload file box Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/components/upload-box"},"12":{"title":"components - upload file-box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 u-normal \" > 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 u-normal \" > 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 u-normal \" > 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"},"13":{"title":"components - user profile","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"14":{"title":"elements - box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"15":{"title":"elements - button","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"16":{"title":"elements - card","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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. Preview HTML \"> < article class = \" card \" > </ article > < article class = \" card is-border-dashed \" > </ article > 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"},"17":{"title":"elements - checkbox","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 \" /> 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 /> 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 \" checked = \" true \" /> < input type = \" checkbox \" class = \" is-large \" /> 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"},"18":{"title":"elements - inline code","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 input field Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/inline-code"},"19":{"title":"elements - input field","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 \" > < 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 \" > < 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 \" > < span class = \" icon-eye \" aria-hidden = \" true \" > </ span > </ button > < button class = \" options-list-button \" aria-label = \" copy text \" > < span class = \" icon-duplicate \" aria-hidden = \" true \" > </ span > </ button > </ div > </ 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 \" > < 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 > 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 This is a warning \"> < div class = \" u-width-full-line u-max-width-500 \" > < 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 > </ div > inline code keyboard Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/input-field"},"20":{"title":"elements - keyboard","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"21":{"title":"elements - list","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 output Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/list"},"22":{"title":"elements - output","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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-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 = \" u-flex u-cross-child-start u-gap-8 \" > < 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 = \" 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 > 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 = \" 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 > list radio button Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/output"},"23":{"title":"elements - radio button","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"24":{"title":"elements - status","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"25":{"title":"elements - switch","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"26":{"title":"elements - table","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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-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 > 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"},"27":{"title":"elements - tag","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 default info success warning error \"> < 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 > 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"},"28":{"title":"elements - tooltip","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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. Preview HTML 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 alert Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/elements/tooltip"},"29":{"title":"foundations - border radius","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"30":{"title":"foundations - colors","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"31":{"title":"foundations - dark theme","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"32":{"title":"foundations - elevation","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"33":{"title":"foundations - icons","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 the heroicons library. By following the steps below, you can easily include all icons in your projects: Navigate to Heroicons website Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name. Use the selected icon In your code use a class, type icon- and paste the icon’s name right after. 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-amazon icon-android icon-angular icon-apple icon-auth0 icon-authentik icon-autodesk 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-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal 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-amazon icon-android icon-angular icon-apple icon-auth0 icon-authentik icon-autodesk 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-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal 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 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"},"34":{"title":"foundations - responsive","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 Desing 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"},"35":{"title":"foundations - typography","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 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 2 SemiBold Body text level 2 Regular Body text level 2 Underline Link text Underline \"> < p class = \" u-bold \" > Body text level 1 SemiBold </ p > < p > Body text level 1 Regular </ p > < p class = \" u-bold \" > Body text level 2 SemiBold </ p > < p > Body text level 2 Regular </ p > < p style = \" text-decoration : 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"},"36":{"title":"getting started","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"37":{"title":"home","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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! Elad Shechter @elad2412 Web Developer at Appwrite Chen Parnasa @chenparnasa Product Designer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Wess Cope @wess Software Engineer at Appwrite Brandon @kodumbeats Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Philipp Hausleiter @phaus Shmuel Fogel @fogelito Software Engineer at Appwrite Carla @heyCarla Product Designer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Damodar Lohani @lohanidamodar Software Engineer at Appwrite Bishwajeet Parhi @2002Bishwajeet Hardik Sachan @hardiksachan Shimon Newman @shimonewman Full Stack Engineer at Appwrite Thomas G. Lopes @tglide Frontend Engineer at Appwrite Rahul Singh @drph4nt0m Brandon @brandonroberts Matej Bačo @Meldiron Software Engineer at Appwrite achintya @achintya-7 Aditya Rana @codingsamurai-10 Christy Jacob @christyjacob4 Engineering Lead at Appwrite Eldad Fux @eldadfux Appwrite's Founder Join us on GitHub Join us on Discord Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/"},"38":{"title":"layout - container","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"39":{"title":"layout - grid box","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 navigation Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/grid-box"},"40":{"title":"layout - navigation","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 box pagination Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/layout/navigation"},"41":{"title":"layout - pagination","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"42":{"title":"utilities - box model","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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-24 padding: pxToRem(24) !important; padding: 1.5rem !important; u-padding-32 padding: pxToRem(32) !important; padding: 2rem !important; u-padding-inline-0 padding-inline: 0 !important; Stays the same u-padding-inline-12 padding-inline: pxToRem(12) !important; padding-inline: 0.75rem !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-56 padding-inline-end: pxToRem(56) !important; padding-inline-end: 3.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-end-56 padding-block-end: pxToRem(56)!important; padding-block-end: 3.5rem !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-inline-start-4 margin-inline-start: pxToRem(4); margin-inline-start: 0.25rem; u-margin-inline-start-16 margin-inline-start: pxToRem(16); margin-inline-start: 1rem; 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"},"43":{"title":"utilities - colors","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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 display Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/colors"},"44":{"title":"utilities - display","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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-box-sizing-content box-sizing: content-box; Stays the same u-sep-inline-start border-inline-start: solid pxToRem(1) hsl(var(--color-border)); border-inline-start: solid 0.0625rem hsl(var(--color-border)); u-sep-block-start border-block-start: solid pxToRem(1) hsl(var(--color-border)); border-block-start: solid 0.0625rem hsl(var(--color-border)); u-sep-block-end border-block-end: solid pxToRem(1) hsl(var(--color-border)); border-block-end: solid 0.0625rem hsl(var(--color-border)); 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-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-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 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-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-250 inline-size: pxToRem(250); inline-size: 15.625rem; 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-400 max-inline-size: pxToRem(400); max-inline-size: 25rem; u-max-width-500 max-inline-size: pxToRem(500); max-inline-size: 31.25rem; u-max-width-100-percent max-inline-size:100%; Stays the same u-height-100-percent block-size: 100%; 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-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 > colors position Terms Privacy ⓒ 2023 Appwrite. All rights reserved. ","url":"/utilities/display"},"45":{"title":"utilities - position","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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-inset-inline-end-8 inset-inline-end: pxToRem(8); inset-inline-end: 0.5rem; u-inset-block-start-8 inset-block-start: pxToRem(8); inset-block-start: 0.5rem; 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"},"46":{"title":"utilities - reset inputs","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"47":{"title":"utilities - responsive","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"48":{"title":"utilities - text","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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); font-size: 0.75rem; u-small font-size: pxToRem(14); font-size: 0.875rem; u-font-size-32 font-size: pxToRem(32); font-size: 2rem; u-bold font-weight: 600; Stays the same u-normal font-weight: normal; Stays the same u-text-center text-align: center; 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 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"},"49":{"title":"utilities - theme","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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"},"50":{"title":"utilities - visibility","content":" search Ctrl + --> K GitHub 224 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors display position reset inputs responsive text theme visibility Layout container grid box navigation pagination Elements box button card checkbox inline code input field keyboard list output radio button status switch table tag tooltip Components alert avatar code panel collapsible drop list file preview grid item loader modal secondary tabs tabs 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":[["99px",{"1":{"34":5,"44":1}}],["zoom",{"1":{"33":2}}],["z",{"1":{"32":1,"45":13}}],["zagar",{"1":{"26":18}}],["$break3open",{"1":{"34":3,"44":1,"47":2}}],["$break2open",{"1":{"34":3,"47":1}}],["$break2",{"1":{"34":4,"47":1}}],["$break1",{"1":{"34":5,"44":1,"47":3}}],["$",{"1":{"31":2,"34":4,"37":2}}],["$theme",{"1":{"31":2,"49":2}}],["queries",{"1":{"34":1}}],["quot",{"1":{"26":4,"32":2}}],["quickly",{"1":{"25":1,"45":1}}],["justify",{"1":{"44":3}}],["jacob",{"1":{"37":1}}],["jake",{"1":{"37":1}}],["javascript",{"1":{"36":1}}],["java",{"1":{"33":2}}],["join",{"1":{"37":3}}],["journey",{"1":{"35":1}}],["jw",{"1":{"37":1}}],["jenny",{"1":{"37":3}}],["jeremiah",{"1":{"26":18}}],["js",{"1":{"33":2}}],["jpg",{"1":{"5":1,"26":12,"37":1}}],["jpeg",{"1":{"5":1,"26":18}}],["⌘",{"1":{"20":3}}],["75rem",{"1":{"42":3,"44":3,"48":1}}],["767",{"1":{"34":3,"44":1}}],["767px",{"1":{"34":1,"39":1}}],["768px",{"1":{"34":6,"39":1}}],["7",{"1":{"12":3,"35":4,"37":2}}],["70",{"1":{"11":2,"30":1}}],["0625rem",{"1":{"44":3}}],["0px",{"1":{"34":1}}],["0",{"1":{"11":7,"12":13,"13":1,"26":1,"30":2,"31":2,"42":13,"44":14,"45":4,"46":1,"48":2,"50":4}}],["52",{"1":{"42":2}}],["50",{"1":{"29":1,"30":5,"31":2,"44":2,"50":1}}],["500",{"1":{"19":9,"30":1,"44":2}}],["57",{"1":{"26":18}}],["56",{"1":{"19":1,"30":1,"42":8}}],["5",{"1":{"8":3,"19":4,"22":1,"26":6,"30":2,"35":4,"41":5,"45":2,"48":2,"50":1}}],["5rem",{"1":{"0":10,"12":2,"15":1,"19":1,"34":2,"39":1,"42":7,"44":8,"45":2}}],["31",{"1":{"44":1}}],["3rem",{"1":{"42":1,"45":1}}],["343",{"1":{"30":1}}],["39",{"1":{"26":1,"36":1,"37":1,"41":1,"45":1,"46":1,"50":1}}],["336",{"1":{"26":18}}],["300",{"1":{"30":2}}],["30",{"1":{"11":3,"30":1}}],["350px",{"1":{"10":1}}],["3",{"1":{"6":3,"11":6,"15":3,"19":4,"26":22,"30":1,"35":8,"37":1,"41":3,"42":3,"44":3}}],["32",{"1":{"3":1,"26":12,"42":9,"44":2,"48":2}}],["32px",{"1":{"1":2}}],["625rem",{"1":{"44":2}}],["60",{"1":{"11":3}}],["600",{"1":{"5":1,"35":1,"48":1}}],["6",{"1":{"6":3,"19":4,"26":18,"35":4,"42":1,"44":1}}],["6rem",{"1":{"4":1}}],["64px",{"1":{"1":1}}],["875rem",{"1":{"48":1}}],["87",{"1":{"30":1}}],["8px",{"1":{"17":1,"23":1,"25":1,"29":1}}],["8rem",{"1":{"4":5,"39":1}}],["8",{"1":{"3":6,"6":6,"11":3,"12":1,"13":1,"19":2,"20":1,"21":2,"22":4,"26":3,"28":1,"32":2,"38":1,"42":2,"44":6,"45":5}}],["vue",{"1":{"33":2}}],["vs",{"1":{"33":2}}],["vk",{"1":{"33":2}}],["verified",{"1":{"27":1}}],["verbatim",{"1":{"18":1}}],["vertical",{"1":{"3":16,"12":3,"21":1,"44":2,"48":1}}],["valid",{"1":{"19":1}}],["values",{"1":{"19":1,"30":1}}],["valuemax",{"1":{"11":7}}],["valuemin",{"1":{"11":7}}],["valuenow",{"1":{"11":7}}],["value",{"1":{"11":7,"19":10,"26":5,"29":4,"39":1}}],["variant",{"1":{"31":1,"34":1}}],["variable",{"1":{"26":3,"29":4,"31":3,"32":1,"34":1,"39":1}}],["variables",{"1":{"12":3,"19":4,"28":10,"30":2,"34":2,"39":1,"45":2}}],["vars",{"1":{"19":3}}],["var",{"1":{"12":3,"29":4,"30":2,"31":12,"32":2,"34":3,"43":8,"44":6,"48":1}}],["via",{"1":{"42":1,"45":1}}],["vimeo",{"1":{"33":2}}],["visually",{"1":{"27":1,"32":1}}],["visual",{"1":{"17":1,"18":1,"33":1}}],["visible",{"1":{"10":2,"22":3,"26":5,"47":15,"50":2}}],["visibility",{"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":2,"36":1,"37":1,"38":2,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":2,"50":4}}],["view",{"1":{"2":1,"37":1}}],["48",{"1":{"42":2}}],["48px",{"1":{"1":2}}],["4px",{"1":{"29":1,"33":3,"35":1}}],["442",{"1":{"26":1}}],["41",{"1":{"26":1}}],["4mb",{"1":{"12":6}}],["4",{"1":{"12":5,"15":3,"19":7,"29":1,"30":1,"35":4,"41":3,"42":4,"44":2,"45":1}}],["400",{"1":{"30":1,"31":2,"35":1,"44":2}}],["40px",{"1":{"1":2,"15":1}}],["40",{"1":{"1":1,"26":6,"42":2}}],["ycombinator",{"1":{"33":2}}],["yandex",{"1":{"33":2}}],["yammer",{"1":{"33":2}}],["yahoo",{"1":{"33":2}}],["y",{"1":{"26":18,"50":3}}],["year",{"1":{"26":12}}],["yet",{"1":{"1":1}}],["youtube",{"1":{"33":2}}],["you",{"1":{"3":10,"4":1,"10":1,"14":1,"15":2,"17":1,"23":1,"25":1,"26":2,"27":2,"33":2,"34":2,"41":1,"45":1}}],["yourself",{"1":{"37":1}}],["your",{"1":{"0":2,"16":1,"19":3,"33":2,"36":5,"37":3,"41":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}}],["ellipsis",{"1":{"48":2}}],["eldadfux",{"1":{"37":1}}],["eldad",{"1":{"37":1}}],["elad2412",{"1":{"37":1}}],["elad",{"1":{"37":1}}],["elevated",{"1":{"32":1}}],["elevation",{"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":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":2,"32":5,"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}}],["element",{"1":{"8":1,"10":2,"14":3,"20":2,"22":1,"27":1,"28":1,"29":1,"44":1,"45":3,"50":1}}],["elements",{"0":{"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},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":2,"15":2,"16":3,"17":2,"18":2,"19":2,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":3,"29":4,"30":1,"31":1,"32":3,"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":2,"48":1,"49":2,"50":1}}],["even",{"1":{"37":1}}],["everything",{"1":{"37":1}}],["every",{"1":{"15":2,"17":1,"23":1,"25":1}}],["edge",{"1":{"33":2,"46":1}}],["edit",{"1":{"19":1,"27":2,"37":2}}],["etsy",{"1":{"33":2}}],["etc",{"1":{"5":1}}],["effect",{"1":{"32":1}}],["efficient",{"1":{"19":1}}],["e",{"1":{"27":1,"32":2}}],["eye",{"1":{"19":2,"22":1,"26":2}}],["eyebrow",{"1":{"6":3,"26":22,"35":15}}],["emphasis",{"1":{"18":1}}],["empty",{"1":{"1":8,"13":3,"16":2}}],["eight",{"1":{"12":1}}],["easier",{"1":{"31":1,"34":1}}],["easily",{"1":{"1":1,"19":1,"33":1}}],["easy",{"1":{"27":1,"37":1,"40":1}}],["each",{"1":{"4":1,"14":1,"15":1,"17":1,"23":1,"25":2,"27":1}}],["ensures",{"1":{"42":1,"48":1}}],["engineering",{"1":{"37":3}}],["engineer",{"1":{"37":8}}],["env",{"1":{"19":3}}],["entered",{"1":{"19":3}}],["enter",{"1":{"19":1}}],["enabling",{"1":{"17":1}}],["end",{"1":{"4":12,"6":15,"8":3,"10":2,"11":6,"12":2,"19":2,"42":15,"44":9,"45":5}}],["enough",{"1":{"0":1,"10":1}}],["exercitationem",{"1":{"26":3}}],["experience",{"1":{"37":3}}],["expanded",{"1":{"30":1}}],["express",{"1":{"15":1}}],["explain",{"1":{"0":1}}],["extra",{"1":{"13":4,"29":1}}],["external",{"1":{"2":1,"5":1,"15":1}}],["exceeds",{"1":{"10":1,"26":2}}],["exclamation",{"1":{"8":1,"12":1,"19":3,"27":2}}],["example",{"1":{"1":1,"2":1,"16":1,"19":2,"30":1,"34":2,"45":1,"46":1}}],["errors",{"1":{"0":1}}],["error",{"1":{"0":1,"12":4,"19":6,"27":5,"30":2}}],["xsmall",{"1":{"12":3,"29":3}}],["xlarge",{"1":{"1":1}}],["x",{"1":{"0":10,"1":11,"8":3,"11":4,"12":2,"15":1,"19":2,"48":5,"50":2}}],["=210px",{"1":{"39":2}}],["=24px",{"1":{"39":1}}],["=",{"1":{"0":165,"1":55,"2":25,"3":87,"4":100,"5":17,"6":67,"7":1,"8":55,"9":20,"10":27,"11":131,"12":90,"13":16,"14":6,"15":67,"16":2,"17":12,"18":1,"19":148,"20":3,"21":38,"22":26,"23":19,"24":18,"25":17,"26":512,"27":33,"28":19,"29":8,"31":2,"32":6,"34":2,"35":15,"36":4,"37":10,"38":2,"39":8,"40":41,"41":47,"42":1,"43":8,"44":4,"45":3,"46":6,"47":5,"48":4,"50":3}}],["280",{"1":{"44":2}}],["25",{"1":{"48":2}}],["250",{"1":{"44":4,"46":2}}],["25rem",{"1":{"34":3,"42":5,"44":6}}],["2eem",{"1":{"44":1}}],["230",{"1":{"26":2}}],["24",{"1":{"12":3,"42":6,"44":6}}],["24px",{"1":{"1":2,"45":2}}],["2002bishwajeet",{"1":{"37":1}}],["200",{"1":{"30":6,"44":4}}],["2022",{"1":{"26":36}}],["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":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}}],["20",{"1":{"6":2,"11":10,"19":3,"41":3,"42":2,"45":2,"50":1}}],["2rem",{"1":{"6":1,"42":4,"48":1}}],["2",{"1":{"0":30,"1":2,"4":21,"5":1,"12":3,"15":4,"19":5,"23":2,"34":2,"35":17,"37":1,"41":3,"42":3,"44":3,"48":2,"50":1}}],["224",{"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}}],["17",{"1":{"44":1}}],["15",{"1":{"44":2,"45":2}}],["150",{"1":{"30":1}}],["1fr",{"1":{"44":2}}],["13",{"1":{"39":2}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"22":3}}],["13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73",{"1":{"22":3}}],["14",{"1":{"48":1}}],["14px",{"1":{"35":1}}],["140",{"1":{"26":2}}],["1rem",{"1":{"34":4,"39":1,"42":4,"44":3}}],["184",{"1":{"44":2}}],["185",{"1":{"26":10}}],["18rem",{"1":{"6":1}}],["125rem",{"1":{"39":2,"42":1}}],["12",{"1":{"26":6,"37":2,"42":6,"44":7,"48":1}}],["120",{"1":{"26":2,"30":5}}],["12rem",{"1":{"4":4}}],["1198",{"1":{"34":2}}],["1198px",{"1":{"34":1}}],["1199px",{"1":{"34":3,"44":1}}],["11",{"1":{"26":18,"44":1}}],["10",{"1":{"30":5,"37":1,"45":2}}],["10mb",{"1":{"12":9}}],["100lvh",{"1":{"44":1}}],["100vh",{"1":{"44":1}}],["100",{"1":{"2":1,"11":9,"26":2,"30":15,"31":2,"37":2,"42":2,"44":14}}],["16px",{"1":{"29":1,"35":1}}],["16rem",{"1":{"6":1,"39":1}}],["16",{"1":{"2":1,"6":3,"8":3,"11":6,"12":5,"14":4,"26":1,"42":8,"44":6}}],["1",{"1":{"0":40,"4":21,"6":19,"12":2,"15":3,"19":7,"22":1,"23":2,"26":24,"34":3,"35":17,"39":1,"41":3,"42":4,"44":10,"45":2,"48":9}}],["h3",{"1":{"35":2}}],["h1",{"1":{"35":2}}],["hsl",{"1":{"30":3,"31":4,"43":8,"44":6}}],["hustle",{"1":{"26":18}}],["human",{"1":{"0":1}}],["h5",{"1":{"12":6,"35":4}}],["h2",{"1":{"6":6,"35":2}}],["href",{"1":{"5":2,"10":4,"21":1,"26":3,"27":1,"36":2,"40":6,"41":3}}],["heycarla",{"1":{"37":1}}],["heroicons",{"1":{"33":3}}],["here",{"1":{"12":12,"19":1,"34":1}}],["height",{"1":{"22":1,"26":12,"44":6,"48":9}}],["head",{"1":{"26":2,"36":1}}],["headings",{"1":{"35":5}}],["heading",{"1":{"6":6,"8":3,"12":3,"26":22,"35":41}}],["headers",{"1":{"3":16,"35":1}}],["header",{"1":{"2":3,"6":18,"8":11,"11":8,"37":1}}],["hello",{"1":{"2":6,"11":18}}],["helps",{"1":{"30":1}}],["helper",{"1":{"12":1,"19":12}}],["help",{"1":{"0":1,"4":1,"27":1,"41":1,"43":1}}],["hierarchy",{"1":{"32":1,"35":1}}],["hiding",{"1":{"22":1}}],["hides",{"1":{"47":1,"49":1}}],["hide",{"1":{"3":16,"10":1,"19":2,"26":10,"31":1,"41":1,"50":4}}],["hidden",{"1":{"0":20,"2":2,"3":6,"5":2,"6":9,"8":4,"10":3,"11":8,"12":11,"13":1,"15":9,"19":13,"21":6,"22":7,"26":31,"27":8,"28":3,"40":6,"41":2,"46":1,"48":3,"50":2}}],["high",{"1":{"1":1}}],["https",{"1":{"1":1,"5":1,"26":6,"36":2}}],["html5",{"1":{"33":2}}],["html",{"1":{"0":10,"1":4,"2":2,"3":2,"4":2,"5":1,"6":2,"7":1,"8":2,"9":2,"10":1,"11":2,"12":3,"13":1,"14":2,"15":4,"16":1,"17":3,"18":1,"19":10,"20":1,"21":3,"22":2,"23":3,"24":1,"25":3,"26":5,"27":2,"28":1,"29":4,"32":1,"35":5,"36":1,"38":1,"39":1,"40":1,"41":1,"43":1,"44":1,"46":1,"47":1,"48":1}}],["hardiksachan",{"1":{"37":1}}],["hardik",{"1":{"37":1}}],["hausleiter",{"1":{"37":1}}],["hand",{"1":{"16":1}}],["happen",{"1":{"3":9}}],["have",{"1":{"1":3,"4":1,"15":2,"17":1,"23":1,"25":1,"26":1,"27":1,"37":1}}],["has",{"1":{"0":1,"15":1,"17":1,"23":1,"25":1,"27":2,"31":1}}],["hold",{"1":{"38":1}}],["hover",{"1":{"12":2,"22":1,"28":1}}],["horizontally",{"1":{"26":1}}],["horizontal",{"1":{"10":1,"26":8}}],["how",{"1":{"0":1,"19":1,"31":1,"44":1}}],["home",{"0":{"37":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":1,"49":1,"50":1}}],["h6",{"1":{"0":10,"35":6}}],["h4",{"1":{"0":10,"8":6,"11":4,"35":4}}],["nguyen",{"1":{"37":1}}],["nik",{"1":{"37":1}}],["npm",{"1":{"36":3,"37":1}}],["numquam",{"1":{"26":3}}],["numeric",{"1":{"21":15,"46":2}}],["number",{"1":{"2":6,"21":1,"39":1,"46":4}}],["nowrap",{"1":{"48":3}}],["none",{"1":{"46":1,"47":5,"49":2,"50":1}}],["node",{"1":{"33":2,"36":1}}],["normal",{"1":{"12":3,"48":2}}],["no",{"1":{"4":3,"5":3,"10":1,"12":3,"34":1}}],["notion",{"1":{"33":2}}],["notify",{"1":{"0":1}}],["not",{"1":{"1":2,"4":1,"5":5,"10":1,"12":3,"17":1,"23":1,"25":1,"27":2,"29":1,"32":2,"33":2,"34":1,"35":3,"47":4,"49":1}}],["nav",{"1":{"40":4,"41":2}}],["navigate",{"1":{"31":1,"33":2}}],["navigation",{"0":{"40":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":1,"12":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":2,"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":5,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["names",{"1":{"18":1,"33":1}}],["name",{"1":{"11":6,"12":6,"13":4,"19":2,"23":7,"26":23,"33":2,"37":3,"42":1}}],["native",{"1":{"8":1,"26":1}}],["narrow",{"1":{"2":1}}],["neutral",{"1":{"30":14,"31":8}}],["neutrals",{"1":{"30":2}}],["needed",{"1":{"37":1}}],["need",{"1":{"16":1,"41":1}}],["needs",{"1":{"0":1,"7":1,"29":2}}],["next",{"1":{"15":1,"17":1,"22":1,"23":1,"25":1,"41":5}}],["negative",{"1":{"15":1,"42":1}}],["newman",{"1":{"37":1}}],["new",{"1":{"5":1,"15":8,"26":1,"37":1}}],["necessary",{"1":{"0":2,"19":1,"27":2}}],["wordpress",{"1":{"33":2}}],["word",{"1":{"15":2,"22":2,"26":6,"48":3}}],["wrapped",{"1":{"26":1}}],["wrapper",{"1":{"3":8,"4":9,"6":1,"14":2,"19":5,"26":3,"39":1}}],["wrap",{"1":{"6":3,"44":3}}],["watson",{"1":{"37":4}}],["want",{"1":{"26":1,"34":1}}],["waiting",{"1":{"24":5}}],["way",{"1":{"19":1}}],["was",{"1":{"5":1}}],["warn",{"1":{"0":2,"27":2}}],["warning",{"1":{"0":4,"11":1,"19":11,"24":1,"27":6,"30":8,"43":3}}],["white",{"1":{"48":5}}],["while",{"1":{"29":1,"41":1}}],["which",{"1":{"15":1,"45":1}}],["who",{"1":{"27":2,"37":1}}],["why",{"1":{"15":1}}],["whatsapp",{"1":{"33":2}}],["what",{"1":{"3":9,"15":1,"19":2,"41":1}}],["whenever",{"1":{"17":1,"23":1,"25":1}}],["when",{"1":{"1":1,"10":1,"15":1,"19":2,"23":1,"26":1,"27":2,"29":1,"35":1,"37":1,"46":1}}],["where",{"1":{"0":2,"4":1,"15":1}}],["wilson",{"1":{"37":1}}],["will",{"1":{"3":9,"5":1,"14":1,"15":2,"19":3,"22":1,"28":1,"29":1,"35":1,"36":1,"39":1,"45":1}}],["wizard",{"1":{"26":1}}],["window",{"1":{"5":1,"8":1}}],["width",{"1":{"2":1,"3":2,"4":1,"10":1,"11":2,"12":14,"19":19,"26":29,"34":11,"44":13,"46":2}}],["without",{"1":{"14":1,"26":2,"46":2}}],["with",{"1":{"1":1,"3":1,"5":1,"8":2,"12":1,"15":6,"17":1,"19":5,"21":2,"22":1,"26":3,"31":1,"32":1,"34":1,"35":2,"36":1,"37":7,"39":1,"45":2,"46":2}}],["within",{"1":{"0":1,"6":1,"9":1,"10":1,"18":1,"27":2,"41":1}}],["weight",{"1":{"48":3}}],["weights",{"1":{"35":1}}],["wess",{"1":{"37":2}}],["webkit",{"1":{"46":1,"48":3}}],["web",{"1":{"37":1}}],["website",{"1":{"33":1,"40":1}}],["well",{"1":{"35":1}}],["were",{"1":{"33":1}}],["we",{"1":{"0":2,"4":2,"8":1,"15":3,"16":1,"17":1,"21":1,"26":1,"27":3,"29":1,"30":2,"31":1,"32":2,"33":2,"34":3,"35":2,"37":1,"43":1,"44":1}}],["oberai",{"1":{"37":1}}],["objects",{"1":{"16":1}}],["object",{"1":{"1":1,"8":1,"32":1,"37":1}}],["okta",{"1":{"33":2}}],["ol",{"1":{"21":2,"41":2}}],["our",{"1":{"16":1,"27":1,"30":3,"37":3,"42":1,"48":1}}],["outer",{"1":{"26":3}}],["out",{"1":{"15":1,"16":1,"37":2}}],["outputs",{"1":{"22":1}}],["output",{"0":{"22":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":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":2,"22":15,"23":2,"24":1,"25":1,"26":7,"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}}],["own",{"1":{"15":1,"17":1,"23":1,"25":1,"37":2}}],["occured",{"1":{"27":1}}],["occur",{"1":{"15":1}}],["others",{"1":{"37":1}}],["other",{"1":{"14":1,"16":1,"19":1}}],["otherwise",{"1":{"10":1}}],["over",{"1":{"28":1}}],["overflow",{"1":{"26":5,"48":5,"50":10}}],["overviews",{"1":{"16":1}}],["overview",{"1":{"10":3,"37":1}}],["overlap",{"1":{"34":1}}],["overlay",{"1":{"8":1}}],["overly",{"1":{"0":1}}],["optimized",{"1":{"37":1}}],["option",{"1":{"3":12,"4":1,"19":36}}],["options",{"1":{"3":15,"17":1,"19":3,"23":1,"25":2,"26":13}}],["optionally",{"1":{"36":2}}],["optional",{"1":{"3":26,"19":4}}],["opera",{"1":{"33":2,"46":1}}],["opening",{"1":{"26":1}}],["open",{"1":{"3":1,"5":1,"8":6,"11":3,"20":3,"34":2,"36":1,"37":6}}],["opacity",{"1":{"6":2,"30":1,"50":7}}],["one",{"1":{"1":1,"3":3,"4":1,"17":2,"19":2,"23":3,"29":1,"34":1,"37":3,"46":2}}],["on",{"1":{"0":1,"8":1,"10":1,"14":1,"15":2,"17":1,"18":1,"19":1,"22":1,"23":1,"25":5,"27":2,"29":3,"31":1,"37":4,"39":2,"41":1,"43":1,"47":16,"49":1}}],["only",{"1":{"0":10,"4":1,"8":3,"10":1,"12":14,"15":4,"16":1,"19":2,"23":2,"26":42,"27":2,"29":1,"34":7,"37":1,"41":1,"47":6,"49":4}}],["offline",{"1":{"43":3}}],["off",{"1":{"25":4,"26":1}}],["often",{"1":{"15":1,"30":4}}],["of",{"1":{"0":6,"1":3,"2":3,"3":26,"4":4,"5":2,"8":4,"9":2,"10":3,"11":3,"12":1,"13":1,"15":6,"16":1,"17":5,"18":3,"19":5,"21":2,"23":6,"24":1,"25":5,"26":4,"27":5,"28":1,"29":5,"30":1,"32":2,"33":8,"34":3,"35":5,"36":2,"37":7,"38":1,"39":5,"41":1,"45":2,"47":1}}],["orient",{"1":{"48":1}}],["orientation",{"1":{"35":1}}],["order",{"1":{"31":1,"35":1}}],["organize",{"1":{"26":1,"27":1,"35":1}}],["orange",{"1":{"1":7,"8":1,"27":1,"30":2}}],["or",{"1":{"0":5,"1":5,"3":16,"6":6,"8":3,"9":1,"13":1,"15":1,"16":1,"17":2,"18":4,"19":6,"22":1,"25":3,"26":2,"27":8,"28":11,"29":3,"31":1,"32":3,"33":1,"35":4,"37":2,"40":1,"46":1,"47":1,"49":2}}],["m",{"1":{"47":15}}],["might",{"1":{"34":1}}],["microsoft",{"1":{"33":4}}],["mix",{"1":{"27":2}}],["middle",{"1":{"14":7}}],["min",{"1":{"2":1,"4":4,"12":11,"34":6,"37":3,"39":1,"44":17}}],["mind",{"1":{"1":1,"15":1,"29":1,"37":1,"41":1}}],["minimum",{"1":{"0":1,"17":1,"23":1,"25":1,"33":2}}],["mp4",{"1":{"11":18}}],["mdn",{"1":{"8":1}}],["multi",{"1":{"19":1,"24":1}}],["multiple",{"1":{"6":2,"9":1,"10":1,"14":2,"17":2,"23":1,"25":1,"33":2,"34":1,"41":1}}],["must",{"1":{"8":1}}],["matej",{"1":{"37":1}}],["matched",{"1":{"35":1}}],["match",{"1":{"27":2,"35":1}}],["mar",{"1":{"26":18}}],["margins",{"1":{"42":1}}],["margin",{"1":{"2":1,"3":6,"4":6,"6":4,"11":9,"12":10,"15":1,"19":2,"20":1,"21":2,"22":1,"26":2,"28":1,"32":2,"38":1,"42":61,"45":1,"46":1}}],["make",{"1":{"15":1,"17":1,"23":2,"25":1,"29":1,"32":1,"33":2,"41":1}}],["maximum",{"1":{"26":1,"39":1}}],["max",{"1":{"12":9,"19":10,"34":5,"39":1,"44":15,"46":2}}],["maintenance",{"1":{"31":1,"34":1}}],["maintain",{"1":{"26":1,"30":1}}],["maintains",{"1":{"10":1}}],["main",{"1":{"4":2,"8":3,"12":3,"35":1,"40":1,"44":4}}],["may",{"1":{"0":1,"27":5}}],["mouse",{"1":{"46":1}}],["moz",{"1":{"46":1}}],["most",{"1":{"10":1,"15":1,"22":1,"37":1}}],["mostly",{"1":{"8":1,"10":1,"15":1,"26":1,"30":1,"35":2}}],["mobile",{"1":{"10":1,"12":6,"26":7,"44":1,"47":10}}],["more",{"1":{"1":2,"8":1,"10":1,"17":3,"19":2,"26":9,"34":1}}],["modules",{"1":{"36":1}}],["mode",{"1":{"1":1,"30":2,"37":1}}],["model",{"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":2,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":4,"43":2,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["modals",{"1":{"8":7,"19":1,"29":1,"30":1,"32":2}}],["modal",{"0":{"8":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":2,"8":53,"9":2,"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}}],["me",{"1":{"50":2}}],["meldiron",{"1":{"37":1}}],["media",{"1":{"34":15,"44":4,"47":5}}],["medium",{"1":{"1":3,"8":2,"15":6,"17":2,"23":2,"25":2,"29":5,"33":2,"34":11,"39":1}}],["methods",{"1":{"8":1,"37":2}}],["method",{"1":{"8":3}}],["meaning",{"1":{"4":1,"15":2,"43":1}}],["meanings",{"1":{"1":1}}],["menus",{"1":{"40":1}}],["menu",{"1":{"4":1,"29":1,"40":18}}],["messaging",{"1":{"0":1}}],["message",{"1":{"0":5,"12":3,"19":1}}],["messages",{"1":{"0":17}}],["utility",{"1":{"31":2,"43":1,"46":1}}],["utilities",{"0":{"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"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":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["ul",{"1":{"1":8,"3":6,"4":14,"6":8,"9":4,"10":2,"11":4,"12":4,"15":2,"19":16,"21":4,"39":2,"40":2}}],["unpkg",{"1":{"36":2}}],["underlined",{"1":{"35":1}}],["underlines",{"1":{"35":1}}],["underline",{"1":{"35":11}}],["underlying",{"1":{"29":1}}],["underneath",{"1":{"19":1}}],["understanding",{"1":{"27":1}}],["understand",{"1":{"0":1,"4":1}}],["un",{"1":{"13":3,"44":1,"48":1}}],["uncluttered",{"1":{"10":1}}],["unsafe",{"1":{"6":3}}],["unsecure",{"1":{"6":3}}],["unsplash",{"1":{"1":1,"5":1,"26":6}}],["units",{"1":{"42":1}}],["unity",{"1":{"33":2}}],["unique",{"1":{"4":1}}],["universal",{"1":{"1":1,"4":1,"15":2}}],["upon",{"1":{"28":1}}],["update",{"1":{"16":1}}],["uppercase",{"1":{"1":1,"15":2}}],["up",{"1":{"1":2,"2":1,"17":1,"19":1,"41":1}}],["uploading",{"1":{"11":4}}],["uploads",{"1":{"11":6}}],["uploaded",{"1":{"5":3,"11":2}}],["upload",{"0":{"11":1,"12":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":2,"9":2,"10":3,"11":57,"12":59,"13":3,"14":2,"15":2,"16":2,"17":2,"18":2,"19":4,"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}}],["usage",{"1":{"30":1,"37":1}}],["us",{"1":{"30":1,"37":4}}],["using",{"1":{"1":1,"4":1,"6":1,"14":1,"15":3,"22":1,"29":1,"32":1,"33":1,"39":1,"41":1,"44":1,"45":2}}],["useful",{"1":{"26":1}}],["used",{"1":{"0":1,"1":2,"2":2,"3":16,"6":1,"8":1,"9":1,"10":1,"15":5,"16":2,"18":1,"19":8,"25":2,"26":3,"27":3,"29":3,"30":8,"31":2,"32":3,"35":6,"38":1,"46":1}}],["use",{"1":{"0":8,"1":5,"4":4,"5":2,"7":1,"8":2,"10":1,"15":6,"16":2,"17":4,"19":1,"21":3,"23":4,"25":4,"26":2,"27":11,"29":3,"30":2,"31":1,"32":3,"33":5,"34":4,"35":4,"37":1,"41":1,"43":1,"44":1,"46":1}}],["users",{"1":{"4":1,"7":1,"9":1,"10":2,"12":1,"17":3,"19":2,"22":1,"23":2,"27":1,"34":1,"35":2,"41":1}}],["user",{"0":{"13":1},"1":{"0":40,"1":3,"2":1,"3":1,"4":2,"5":1,"6":1,"7":1,"8":2,"9":1,"10":3,"11":1,"12":2,"13":23,"14":1,"15":2,"16":1,"17":1,"18":1,"19":7,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":2,"27":8,"28":8,"29":2,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":4,"38":1,"39":1,"40":2,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["u",{"1":{"0":10,"2":4,"3":9,"4":8,"6":21,"8":12,"10":1,"11":12,"12":60,"13":4,"14":12,"15":1,"19":29,"20":1,"21":2,"22":13,"26":60,"28":1,"32":2,"35":2,"37":6,"38":1,"41":1,"42":33,"43":16,"44":60,"45":13,"46":4,"48":21,"49":4,"50":10}}],["ui",{"1":{"0":1,"10":1,"29":3}}],["absolute",{"1":{"45":2}}],["abnegate",{"1":{"37":1}}],["above",{"1":{"29":1,"39":1}}],["about",{"1":{"0":18,"13":1,"19":2,"27":1,"28":1}}],["aggressive",{"1":{"37":1}}],["affordance",{"1":{"35":1}}],["affect",{"1":{"34":7}}],["after",{"1":{"33":1,"36":1}}],["auth",{"1":{"37":1}}],["authentik",{"1":{"33":2}}],["auth0",{"1":{"33":2}}],["autodesk",{"1":{"33":2}}],["auto",{"1":{"2":1,"6":1,"12":2,"15":1,"42":4,"44":4,"45":4,"50":5}}],["axis",{"1":{"32":1}}],["airport",{"1":{"26":12}}],["aid",{"1":{"4":1,"15":1}}],["amazon",{"1":{"33":2}}],["amp",{"1":{"11":15,"31":1,"34":4,"47":10}}],["amount",{"1":{"10":1,"11":2,"19":2,"41":1}}],["available",{"1":{"5":4,"10":1,"24":1,"30":1,"33":2}}],["avatars",{"1":{"1":30,"8":1,"16":1,"29":1,"30":1}}],["avatar",{"0":{"1":1},"1":{"0":2,"1":43,"2":2,"3":1,"4":1,"5":3,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":2,"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":7,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"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}}],["avoid",{"1":{"4":1,"15":1}}],["advocate",{"1":{"37":1}}],["advanced",{"1":{"3":9}}],["adityaoberai",{"1":{"37":1}}],["aditya",{"1":{"37":2}}],["adam",{"1":{"26":18}}],["add",{"1":{"15":8,"17":1,"19":1,"23":1,"25":1,"36":2}}],["added",{"1":{"12":1,"36":1}}],["adding",{"1":{"10":2,"34":1}}],["additional",{"1":{"0":2,"19":1,"27":1,"28":1,"30":1,"33":1,"35":2}}],["assist",{"1":{"35":1}}],["as",{"1":{"3":16,"5":2,"15":2,"19":3,"26":1,"27":2,"29":4,"30":3,"31":1,"32":2,"33":1,"34":1,"35":1,"36":3,"39":1}}],["apart",{"1":{"1":1}}],["apple",{"1":{"33":2}}],["applied",{"1":{"19":2,"22":1}}],["application",{"1":{"0":1,"40":1}}],["apply",{"1":{"14":1}}],["appearance",{"1":{"46":2}}],["appear",{"1":{"5":1,"8":1,"14":1,"19":1,"22":1,"28":1}}],["appwrite",{"1":{"0":3,"1":2,"2":1,"3":2,"4":2,"5":1,"6":1,"7":1,"8":2,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":2,"17":1,"18":1,"19":1,"20":1,"21":2,"22":1,"23":1,"24":1,"25":1,"26":4,"27":5,"28":1,"29":3,"30":3,"31":1,"32":2,"33":2,"34":2,"35":1,"36":7,"37":28,"38":1,"39":1,"40":1,"41":1,"42":1,"43":2,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["aa",{"1":{"1":75,"30":1}}],["any",{"1":{"38":1}}],["announcing",{"1":{"37":1}}],["angular",{"1":{"33":2}}],["another",{"1":{"15":1}}],["an",{"1":{"1":4,"4":1,"5":3,"8":1,"10":1,"11":1,"12":1,"15":2,"17":1,"18":1,"19":9,"21":1,"22":1,"24":1,"25":1,"27":3,"32":1,"33":2,"36":1,"39":2,"44":1,"45":1,"50":1}}],["android",{"1":{"33":2}}],["and",{"1":{"0":4,"1":4,"4":1,"5":1,"7":1,"8":2,"10":1,"12":10,"14":1,"15":6,"16":3,"17":2,"18":1,"19":2,"22":1,"23":2,"25":2,"26":3,"27":7,"28":1,"29":5,"30":5,"32":4,"33":8,"34":7,"35":4,"36":1,"37":9,"38":2,"39":2,"42":1,"44":1,"46":1,"48":1,"50":1}}],["along",{"1":{"32":1}}],["align",{"1":{"28":1,"44":6,"48":3}}],["aligned",{"1":{"17":2,"23":2,"25":2,"33":2}}],["alignments",{"1":{"4":1,"44":2}}],["alignment",{"1":{"4":1,"44":1}}],["always",{"1":{"10":1,"37":1}}],["alt",{"1":{"1":1,"5":1,"26":6,"37":1}}],["allowed",{"1":{"17":1,"23":1,"25":1}}],["allows",{"1":{"9":1,"10":1,"12":1,"19":1,"34":1,"41":1}}],["allow",{"1":{"3":16,"4":1,"17":3,"22":1,"23":3,"25":3,"26":1,"27":1}}],["all",{"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":2,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":4,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":2,"31":1,"32":1,"33":3,"34":4,"35":1,"36":1,"37":2,"38":1,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":4,"49":1,"50":1}}],["alerts",{"1":{"0":8,"29":1,"30":4,"32":2}}],["alert",{"0":{"0":1},"1":{"0":123,"1":2,"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":2,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"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}}],["achintya",{"1":{"37":2}}],["according",{"1":{"29":1}}],["access",{"1":{"34":1,"40":1}}],["accessibile",{"1":{"37":1}}],["accessibility",{"1":{"30":1,"37":1}}],["accessible",{"1":{"19":1}}],["accepted",{"1":{"12":9}}],["active",{"1":{"10":1}}],["activity",{"1":{"10":3}}],["actions",{"1":{"0":15,"8":1,"22":1,"30":1}}],["action",{"1":{"0":63,"4":3,"15":6,"27":2,"33":1}}],["across",{"1":{"0":1,"30":1,"34":1,"42":1,"48":1}}],["attach",{"1":{"45":1}}],["attachment",{"1":{"5":1}}],["attribute",{"1":{"17":1,"19":1,"23":1,"25":1}}],["attention",{"1":{"8":1,"15":1}}],["at",{"1":{"0":1,"17":1,"19":3,"23":1,"25":1,"33":2,"37":17}}],["armannik",{"1":{"37":1}}],["arman",{"1":{"37":1}}],["articles",{"1":{"19":1,"37":2}}],["article",{"1":{"16":4}}],["arrows",{"1":{"46":1}}],["arrow",{"1":{"2":1,"4":10,"10":4,"21":3}}],["aria",{"1":{"0":30,"2":2,"3":6,"5":4,"6":15,"8":7,"10":4,"11":39,"12":16,"13":2,"15":18,"19":19,"21":6,"22":8,"26":51,"27":8,"28":4,"40":6,"41":12}}],["areas",{"1":{"14":1,"40":1}}],["are",{"1":{"0":1,"1":4,"2":1,"3":16,"5":1,"6":1,"8":2,"15":3,"16":2,"17":2,"19":2,"22":1,"23":2,"24":1,"25":4,"26":2,"27":3,"29":2,"30":2,"33":6,"35":3,"46":1,"50":1}}],["a",{"1":{"0":23,"1":8,"2":5,"3":27,"4":4,"5":9,"6":4,"7":2,"8":4,"9":2,"10":11,"11":2,"12":24,"13":4,"14":4,"15":11,"16":5,"17":7,"18":4,"19":16,"20":2,"21":7,"22":1,"23":9,"24":5,"25":8,"26":13,"27":7,"28":2,"29":2,"30":2,"31":2,"32":3,"33":6,"34":2,"35":7,"36":1,"37":1,"38":3,"39":4,"40":15,"41":6,"46":1}}],["lopes",{"1":{"37":1}}],["lohanidamodar",{"1":{"37":1}}],["lohani",{"1":{"37":1}}],["looking",{"1":{"33":1}}],["look",{"1":{"29":1,"32":1}}],["lorem",{"1":{"26":3}}],["long",{"1":{"15":1}}],["lot",{"1":{"15":1}}],["local",{"1":{"45":1}}],["location",{"1":{"12":1}}],["lock",{"1":{"6":3}}],["load",{"1":{"10":1}}],["loaders",{"1":{"7":1}}],["loader",{"0":{"7":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":2,"7":7,"8":2,"9":1,"10":1,"11":4,"12":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}}],["logs",{"1":{"2":1}}],["lowercase",{"1":{"1":1}}],["lead",{"1":{"37":3}}],["learn",{"1":{"31":1}}],["legibility",{"1":{"17":1,"23":1,"25":1,"33":1}}],["letter",{"1":{"15":1}}],["letters",{"1":{"1":3}}],["level",{"1":{"6":3,"8":3,"12":3,"30":1,"35":55}}],["left",{"1":{"6":2,"10":3,"15":2,"41":1,"45":1}}],["less",{"1":{"1":1,"33":1}}],["library",{"1":{"33":1,"34":1,"36":4}}],["light",{"1":{"30":1,"31":1,"37":1,"49":3}}],["like",{"1":{"18":1,"26":1}}],["linux",{"1":{"33":2}}],["lines",{"1":{"2":1,"17":1,"19":1,"23":1,"25":1,"33":2}}],["line",{"1":{"2":6,"3":2,"11":2,"17":2,"19":10,"22":1,"23":2,"25":2,"26":6,"33":3,"44":1,"48":10}}],["linked",{"1":{"35":1}}],["linkedin",{"1":{"33":2}}],["links",{"1":{"26":2,"35":3}}],["link",{"1":{"2":1,"5":1,"15":1,"21":5,"35":5,"36":2}}],["li",{"1":{"1":32,"3":18,"4":28,"6":16,"9":12,"10":8,"11":12,"12":4,"15":8,"19":22,"21":18,"39":12,"40":10,"41":16}}],["lists",{"1":{"4":2,"16":2,"35":1}}],["list",{"0":{"4":1,"21":1},"1":{"0":2,"1":2,"2":2,"3":20,"4":32,"5":3,"6":2,"7":2,"8":2,"9":2,"10":5,"11":6,"12":6,"13":2,"14":2,"15":8,"16":2,"17":3,"18":2,"19":14,"20":3,"21":54,"22":3,"23":4,"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":8,"41":3,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["layers",{"1":{"37":1}}],["layered",{"1":{"32":1}}],["layout",{"0":{"38":1,"39":1,"40":1,"41":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":2,"29":1,"30":1,"31":1,"32":3,"33":1,"34":1,"35":1,"36":1,"37":1,"38":2,"39":3,"40":2,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["landing",{"1":{"15":1}}],["language",{"1":{"0":1,"31":2,"34":2}}],["larger",{"1":{"34":4}}],["large",{"1":{"1":11,"9":3,"15":5,"17":4,"23":4,"25":4,"29":3,"32":8,"34":5,"39":1,"41":1}}],["labels",{"1":{"15":1,"17":1,"23":1,"25":1,"33":1,"35":1}}],["label",{"1":{"0":10,"3":7,"5":2,"6":6,"8":12,"10":2,"11":22,"12":5,"13":1,"15":9,"17":2,"19":72,"22":4,"23":2,"25":2,"26":22,"27":1,"28":1,"33":3,"41":10}}],["lt",{"1":{"0":260,"1":105,"2":46,"3":156,"4":180,"5":21,"6":118,"7":2,"8":87,"9":40,"10":36,"11":144,"12":128,"13":28,"14":12,"15":96,"16":4,"17":7,"18":2,"19":200,"20":6,"21":62,"22":36,"23":7,"24":36,"25":7,"26":628,"27":48,"28":24,"29":8,"30":2,"31":6,"32":8,"34":12,"35":34,"36":4,"37":16,"38":4,"39":26,"40":58,"41":64,"42":2,"43":16,"44":8,"45":4,"46":3,"47":10,"48":10,"50":6}}],["frontend",{"1":{"37":2}}],["from",{"1":{"1":1,"4":1,"17":3,"19":1,"23":3}}],["framework",{"1":{"37":1}}],["friendly",{"1":{"37":1}}],["f02e65",{"1":{"37":2}}],["fallbacks",{"1":{"48":2}}],["facebook",{"1":{"33":2}}],["failed",{"1":{"11":3,"24":6,"27":1}}],["features",{"1":{"28":1,"37":1}}],["few",{"1":{"19":1,"24":1}}],["feedback",{"1":{"0":15,"19":2}}],["flutter",{"1":{"33":2}}],["flat",{"1":{"32":1}}],["floating",{"1":{"32":4}}],["float",{"1":{"28":1,"29":1}}],["floyd",{"1":{"12":6}}],["flexbox",{"1":{"44":1}}],["flex",{"1":{"0":10,"2":1,"4":4,"6":9,"8":3,"12":10,"13":1,"14":4,"22":3,"26":14,"37":2,"44":21}}],["fux",{"1":{"37":1}}],["fun",{"1":{"37":1}}],["functions",{"1":{"37":1,"42":1}}],["functionality",{"1":{"19":1}}],["function",{"1":{"2":6,"19":3}}],["fully",{"1":{"37":2}}],["full",{"1":{"3":2,"4":1,"11":2,"12":3,"19":10,"37":1,"44":2,"48":2}}],["fogelito",{"1":{"37":1}}],["fogel",{"1":{"37":1}}],["font",{"1":{"35":3,"48":10}}],["fonts",{"1":{"35":1}}],["follow",{"1":{"36":1}}],["follows",{"1":{"30":1}}],["following",{"1":{"17":1,"22":1,"23":1,"25":1,"33":1,"36":2}}],["focus",{"1":{"28":1,"46":1}}],["focused",{"1":{"2":1}}],["footer",{"1":{"8":5}}],["founder",{"1":{"37":1}}],["foundations",{"0":{"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":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":2,"30":2,"31":2,"32":2,"33":2,"34":2,"35":2,"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}}],["four",{"1":{"1":1,"4":1,"6":1,"10":1,"15":1}}],["for",{"1":{"0":15,"1":2,"2":1,"4":1,"8":2,"9":1,"10":1,"11":6,"15":2,"16":3,"17":1,"19":4,"23":1,"24":1,"25":2,"26":1,"27":7,"29":1,"30":7,"31":1,"32":1,"33":1,"34":2,"35":8,"36":1,"37":6,"45":1}}],["forms",{"1":{"19":1}}],["form",{"1":{"0":1,"3":5,"8":11,"19":38,"37":1}}],["find",{"1":{"41":2}}],["finished",{"1":{"11":2}}],["filled",{"1":{"39":1}}],["filename",{"1":{"26":6}}],["file1",{"1":{"11":6}}],["files",{"1":{"11":1,"12":9,"33":1,"36":1}}],["file",{"0":{"5":1,"12":1},"1":{"0":2,"1":3,"2":2,"3":2,"4":3,"5":18,"6":3,"7":2,"8":2,"9":2,"10":2,"11":16,"12":70,"13":3,"14":2,"15":2,"16":4,"17":2,"18":3,"19":9,"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":3,"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}}],["fit",{"1":{"35":1,"39":1,"41":1}}],["firefox",{"1":{"33":2,"46":1}}],["first",{"1":{"15":1,"16":1,"17":1,"23":1,"25":1,"26":19,"33":2}}],["firstname",{"1":{"2":6}}],["figma",{"1":{"33":2}}],["fix",{"1":{"0":1,"19":1}}],["five",{"1":{"0":1,"1":2,"3":1,"8":1,"26":1}}],["fields",{"1":{"15":2,"19":3,"29":1,"46":2}}],["field",{"0":{"19":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":2,"19":12,"20":2,"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":2,"47":1,"48":1,"49":1,"50":1}}],["bishwajeet",{"1":{"37":1}}],["bitly",{"1":{"33":2}}],["bitbucket",{"1":{"33":2}}],["bigger",{"1":{"29":1}}],["big",{"1":{"8":3,"9":1,"15":2}}],["basis",{"1":{"44":6}}],["based",{"1":{"31":1,"43":1}}],["bačo",{"1":{"37":1}}],["barnby",{"1":{"37":1}}],["background",{"1":{"30":1,"31":2}}],["bg",{"1":{"31":6}}],["build",{"1":{"37":3}}],["building",{"1":{"36":2,"37":4}}],["built",{"1":{"31":1}}],["but",{"1":{"33":1,"42":1}}],["buttons",{"1":{"0":10,"8":1,"15":15,"16":2,"19":3,"20":3,"22":2,"23":5,"25":1,"29":2,"46":2}}],["button",{"0":{"15":1,"23":1},"1":{"0":102,"1":2,"2":8,"3":17,"4":86,"5":2,"6":4,"7":2,"8":50,"9":22,"10":16,"11":32,"12":27,"13":5,"14":3,"15":101,"16":3,"17":2,"18":2,"19":22,"20":2,"21":7,"22":17,"23":7,"24":3,"25":2,"26":84,"27":6,"28":8,"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":26,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["br",{"1":{"46":1}}],["brandonroberts",{"1":{"37":1}}],["brandon",{"1":{"37":2}}],["brand",{"1":{"30":3}}],["browser",{"1":{"26":1,"37":1,"48":2}}],["breaks",{"1":{"48":1}}],["break3open",{"1":{"34":1}}],["break2open",{"1":{"34":1}}],["break2",{"1":{"34":1}}],["break1",{"1":{"34":1}}],["breakpoints",{"1":{"34":3}}],["break",{"1":{"22":2,"26":6,"41":1,"48":7}}],["blurs",{"1":{"32":1}}],["blue",{"1":{"1":7,"27":1,"30":2}}],["blog",{"1":{"19":1}}],["block",{"1":{"2":1,"3":6,"4":10,"6":3,"11":3,"12":1,"19":2,"20":1,"21":2,"22":1,"26":2,"28":1,"32":2,"38":1,"42":52,"44":18,"45":7,"48":2,"49":2}}],["by",{"1":{"0":1,"6":1,"10":1,"14":1,"15":3,"26":1,"32":1,"33":1,"34":1,"36":1,"44":1,"45":1,"50":1}}],["bell",{"1":{"40":1}}],["below",{"1":{"4":1,"19":1,"28":1,"30":1,"32":1,"33":1,"34":1,"36":1,"46":1,"50":1}}],["better",{"1":{"37":1}}],["between",{"1":{"9":2,"10":1,"17":1,"23":1,"25":2,"27":1,"32":4,"33":2,"34":1,"44":3,"46":1}}],["behance",{"1":{"33":2}}],["behavior",{"1":{"26":1}}],["beneath",{"1":{"32":1}}],["being",{"1":{"31":1,"42":1}}],["begin",{"1":{"21":2}}],["before",{"1":{"8":1}}],["best",{"1":{"0":1,"1":1,"4":1,"8":1,"10":1,"15":1,"16":1,"17":1,"23":1,"25":1,"27":2,"29":1,"32":1,"33":1,"35":1,"37":1,"41":1,"46":1}}],["been",{"1":{"0":1,"27":1,"37":1}}],["be",{"1":{"0":4,"1":3,"8":2,"10":3,"15":2,"16":1,"17":2,"18":2,"19":5,"22":2,"23":3,"25":3,"26":2,"27":4,"29":1,"30":1,"31":1,"32":1,"33":2,"35":3,"36":1,"39":1,"45":1}}],["bold",{"1":{"35":2,"48":5}}],["bottom",{"1":{"6":2,"14":3,"28":3,"40":1,"45":1}}],["both",{"1":{"0":1,"30":1}}],["body",{"1":{"0":1,"12":3,"26":1,"35":16,"49":1}}],["boxes",{"1":{"11":1,"12":1,"14":6}}],["box",{"0":{"11":1,"12":1,"14":1,"39":1,"42":1},"1":{"0":10,"1":5,"2":5,"3":5,"4":7,"5":5,"6":7,"7":5,"8":5,"9":5,"10":6,"11":46,"12":45,"13":6,"14":30,"15":6,"16":5,"17":5,"18":5,"19":5,"20":8,"21":5,"22":5,"23":5,"24":5,"25":5,"26":5,"27":5,"28":5,"29":5,"30":5,"31":5,"32":7,"33":7,"34":5,"35":6,"36":5,"37":5,"38":6,"39":11,"40":6,"41":6,"42":9,"43":6,"44":11,"45":5,"46":5,"47":5,"48":7,"49":5,"50":6}}],["borders",{"1":{"16":3,"42":1}}],["border",{"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":10,"13":2,"14":3,"15":1,"16":3,"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":22,"30":3,"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":13,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["pxtorem",{"1":{"42":27,"44":26,"45":2,"48":3}}],["phaus",{"1":{"37":1}}],["philipp",{"1":{"37":1}}],["php",{"1":{"33":2}}],["put",{"1":{"34":1}}],["purple",{"1":{"30":1}}],["purpose",{"1":{"0":2,"15":1,"17":1,"23":1,"25":1}}],["python",{"1":{"33":2}}],["placeholder",{"1":{"19":15,"46":2}}],["placed",{"1":{"15":1}}],["placement",{"1":{"4":2,"27":2}}],["plus",{"1":{"15":2,"26":1}}],["please",{"1":{"8":1,"20":3}}],["pngs",{"1":{"12":9}}],["png",{"1":{"5":1,"12":6,"26":6}}],["podio",{"1":{"33":2}}],["possible",{"1":{"25":1}}],["posts",{"1":{"19":1}}],["positions",{"1":{"6":2}}],["position",{"0":{"45":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"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":2,"45":16,"46":2,"47":1,"48":1,"49":1,"50":1}}],["popup",{"1":{"12":3,"19":1,"28":4}}],["popovers",{"1":{"29":1,"32":2}}],["popover",{"1":{"4":1,"13":1}}],["pixels",{"1":{"42":1}}],["pie",{"1":{"40":1}}],["pinterest",{"1":{"33":2}}],["pink",{"1":{"1":3,"12":6,"15":1,"30":4,"31":2,"34":1,"36":10,"37":9,"43":3}}],["picture",{"1":{"1":1}}],["people",{"1":{"37":1}}],["pet",{"1":{"19":1}}],["pets",{"1":{"19":1}}],["pencil",{"1":{"1":1,"27":1}}],["pending",{"1":{"1":1,"11":3,"24":6}}],["perception",{"1":{"35":1}}],["perceived",{"1":{"35":1}}],["percent",{"1":{"2":1,"44":7}}],["perform",{"1":{"15":1}}],["performed",{"1":{"0":1}}],["person",{"1":{"1":1}}],["persist",{"1":{"0":1}}],["p",{"1":{"0":20,"3":22,"5":2,"11":6,"12":8,"19":12,"20":2,"21":4,"22":2,"26":23,"28":2,"31":8,"32":4,"34":12,"35":10,"38":2,"45":2,"47":10,"48":8,"50":4}}],["prioritize",{"1":{"37":1}}],["priority",{"1":{"32":1}}],["principal",{"1":{"15":1}}],["primary",{"1":{"15":7,"30":8,"37":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}}],["practice",{"1":{"0":1,"1":1,"4":1,"8":1,"10":1,"15":1,"16":1,"17":1,"23":1,"25":1,"27":2,"29":1,"32":1,"33":1,"35":1,"41":1,"46":1}}],["properties",{"1":{"43":2,"47":1,"49":1,"50":1}}],["project",{"1":{"36":3}}],["projects",{"1":{"33":1}}],["product",{"1":{"35":1,"37":2}}],["products",{"1":{"30":1,"37":2,"42":1,"48":1}}],["processing",{"1":{"24":6,"27":1}}],["process",{"1":{"24":1}}],["progressbar",{"1":{"11":7}}],["progress",{"1":{"7":1,"11":15}}],["progressively",{"1":{"3":16}}],["problem",{"1":{"0":1,"44":1}}],["provides",{"1":{"19":2}}],["provide",{"1":{"0":19,"19":3,"27":2,"28":1,"35":3,"40":1}}],["profiles",{"1":{"13":1}}],["profile",{"0":{"13":1},"1":{"0":1,"1":2,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":2,"13":15,"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":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"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}}],["prev",{"1":{"41":5}}],["preview",{"0":{"5":1},"1":{"0":11,"1":6,"2":3,"3":3,"4":4,"5":17,"6":4,"7":2,"8":3,"9":3,"10":2,"11":3,"12":4,"13":2,"14":3,"15":5,"16":2,"17":4,"18":2,"19":11,"20":2,"21":4,"22":3,"23":4,"24":2,"25":4,"26":6,"27":3,"28":2,"29":5,"30":1,"31":1,"32":2,"33":1,"34":1,"35":5,"36":1,"37":1,"38":2,"39":2,"40":2,"41":2,"42":1,"43":2,"44":2,"45":1,"46":2,"47":2,"48":2,"49":1,"50":1}}],["preferred",{"1":{"37":2}}],["preserve",{"1":{"35":1}}],["presented",{"1":{"42":1}}],["present",{"1":{"0":1}}],["press",{"1":{"20":3}}],["pre",{"1":{"2":12}}],["package",{"1":{"36":2}}],["paypal",{"1":{"33":2}}],["paste",{"1":{"33":1}}],["passed",{"1":{"19":3}}],["passwords",{"1":{"19":1}}],["password",{"1":{"19":7}}],["palette",{"1":{"30":3}}],["pair",{"1":{"15":1}}],["pages",{"1":{"15":1,"41":3}}],["page",{"1":{"15":1,"35":1,"41":9}}],["pagination",{"0":{"41":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":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":2,"41":19,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["parhi",{"1":{"37":1}}],["parnasa",{"1":{"37":1}}],["parent",{"1":{"32":1}}],["parameters",{"1":{"19":1,"39":2}}],["paragraphs",{"1":{"35":1}}],["paragraph",{"1":{"3":3}}],["part",{"1":{"15":1,"18":3,"29":1,"34":1}}],["partials",{"1":{"31":1}}],["partial",{"1":{"12":1,"31":16,"34":13}}],["paddings",{"1":{"42":1}}],["padding",{"1":{"3":1,"12":3,"13":1,"19":1,"26":1,"34":15,"42":29}}],["patronizing",{"1":{"0":1}}],["panels",{"1":{"2":1}}],["panel",{"0":{"2":1},"1":{"0":1,"1":2,"2":10,"3":2,"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}}],["i",{"1":{"37":1,"47":15}}],["io",{"1":{"36":5,"37":6}}],["ios",{"1":{"33":2}}],["ipsum",{"1":{"26":3}}],["illustration",{"1":{"26":6}}],["illustrations",{"1":{"8":1,"16":1}}],["identity",{"1":{"30":1}}],["ids",{"1":{"18":1}}],["id",{"1":{"8":3,"13":3,"19":2,"26":12,"27":1,"28":6}}],["its",{"1":{"15":1,"17":1,"23":1,"25":1,"33":1,"44":1}}],["it",{"1":{"1":1,"5":1,"10":1,"15":1,"26":7,"29":1,"35":1,"36":2,"37":1,"38":1}}],["items",{"1":{"6":2,"10":2,"17":3,"21":3,"29":1,"39":1,"44":3}}],["item",{"0":{"6":1},"1":{"0":1,"1":17,"2":1,"3":24,"4":59,"5":2,"6":28,"7":2,"8":1,"9":27,"10":7,"11":9,"12":1,"13":1,"14":1,"15":14,"16":1,"17":2,"18":1,"19":12,"20":1,"21":41,"22":1,"23":5,"24":1,"25":4,"26":6,"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":7,"40":24,"41":9,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["important",{"1":{"42":21,"47":5,"48":1,"50":8}}],["import",{"1":{"36":2,"37":1}}],["importing",{"1":{"36":1}}],["implementation",{"1":{"31":1,"34":1}}],["imply",{"1":{"17":1}}],["img",{"1":{"1":1,"5":1,"26":6,"37":1}}],["images",{"1":{"16":1}}],["image",{"1":{"0":5,"1":2,"5":6,"11":8,"12":5,"26":24}}],["if",{"1":{"0":1,"3":9,"4":2,"10":3,"17":1,"23":1,"25":2,"26":1,"27":2,"33":2,"35":1}}],["icon",{"1":{"0":30,"1":5,"2":2,"3":12,"4":1,"5":2,"6":10,"8":7,"10":2,"11":16,"12":13,"13":1,"15":15,"19":14,"21":7,"22":4,"24":9,"26":47,"27":11,"28":3,"29":1,"33":170,"40":6,"41":4,"43":8,"48":2}}],["icons",{"0":{"33":1},"1":{"0":1,"1":3,"2":1,"3":1,"4":4,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":5,"16":1,"17":1,"18":1,"19":2,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":5,"28":1,"29":1,"30":1,"31":1,"32":2,"33":12,"34":2,"35":1,"36":5,"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}}],["isn",{"1":{"17":1,"23":1,"25":1}}],["is",{"1":{"0":77,"1":50,"2":3,"4":20,"5":5,"6":2,"7":1,"8":22,"9":2,"10":7,"11":6,"12":23,"15":23,"16":2,"17":4,"19":24,"21":1,"22":3,"23":4,"24":10,"25":4,"26":66,"27":11,"28":2,"29":1,"30":3,"31":1,"32":2,"33":1,"34":1,"35":4,"36":1,"37":8,"38":1,"40":1,"41":12,"42":1,"44":1,"46":1,"47":10}}],["infinite",{"1":{"34":2}}],["informative",{"1":{"27":4,"30":1}}],["information",{"1":{"0":4,"3":16,"8":1,"19":6,"27":4,"28":1,"30":6,"35":1,"41":1}}],["inform",{"1":{"0":1,"27":1}}],["info",{"1":{"0":14,"12":11,"13":4,"19":3,"27":8,"28":2,"30":1,"43":3}}],["inner",{"1":{"26":1}}],["index",{"1":{"45":13}}],["independently",{"1":{"25":1}}],["indication",{"1":{"19":2}}],["indicates",{"1":{"24":1,"32":1}}],["indicate",{"1":{"7":1,"18":1,"30":1}}],["invalid",{"1":{"19":1}}],["inset",{"1":{"45":11}}],["installing",{"1":{"36":1}}],["install",{"1":{"36":3,"37":1}}],["instagram",{"1":{"33":2}}],["instructions",{"1":{"19":1}}],["inside",{"1":{"2":1,"15":1,"26":1,"31":1}}],["integrate",{"1":{"37":1}}],["internal",{"1":{"37":1}}],["interfaces",{"1":{"36":1,"37":2,"38":1}}],["interface",{"1":{"28":1}}],["interact",{"1":{"19":2,"22":1}}],["interacts",{"1":{"15":1}}],["interacting",{"1":{"8":1}}],["interactive",{"1":{"6":9,"13":2,"22":12,"26":6,"27":12}}],["into",{"1":{"19":3,"33":1,"36":1,"38":1}}],["initial",{"1":{"48":2}}],["initialize",{"1":{"15":1}}],["initials",{"1":{"1":2}}],["including",{"1":{"44":1}}],["include",{"1":{"8":1,"16":2,"33":1,"36":3,"48":5}}],["incorrect",{"1":{"19":2}}],["inconsistent",{"1":{"1":1}}],["increase",{"1":{"1":1,"15":3}}],["in",{"1":{"0":6,"1":5,"3":1,"4":3,"5":3,"7":1,"8":1,"10":3,"15":10,"16":2,"17":3,"19":8,"21":3,"22":1,"23":3,"25":4,"26":4,"27":4,"28":1,"29":3,"30":5,"31":2,"32":2,"33":7,"34":5,"35":1,"36":3,"37":2,"39":2,"40":1,"41":1,"42":1,"43":1,"44":1}}],["input",{"0":{"19":1},"1":{"0":1,"1":1,"2":1,"3":7,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":3,"16":1,"17":8,"18":2,"19":52,"20":2,"21":1,"22":1,"23":8,"24":1,"25":8,"26":1,"27":1,"28":1,"29":2,"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":10,"47":1,"48":1,"49":1,"50":1}}],["inputs",{"0":{"46":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":3,"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":2,"46":4,"47":2,"48":1,"49":1,"50":1}}],["inline",{"0":{"18":1},"1":{"0":3,"1":1,"2":2,"3":2,"4":10,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":7,"12":16,"13":2,"14":1,"15":1,"16":1,"17":2,"18":8,"19":3,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":8,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":5,"36":1,"37":3,"38":1,"39":1,"40":1,"41":1,"42":28,"43":1,"44":24,"45":7,"46":1,"47":1,"48":1,"49":1,"50":1}}],["dynamic",{"1":{"39":2}}],["during",{"1":{"35":1,"42":1}}],["duration",{"1":{"26":12}}],["duplicate",{"1":{"6":3,"13":1,"15":1,"19":1,"22":3,"26":8,"27":4,"28":2}}],["drph4nt0m",{"1":{"37":1}}],["dribbble",{"1":{"33":2}}],["drag",{"1":{"12":9}}],["draw",{"1":{"8":1}}],["dropbox",{"1":{"33":2}}],["dropdown",{"1":{"19":1}}],["drop",{"0":{"4":1},"1":{"0":1,"1":1,"2":1,"3":2,"4":69,"5":2,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":10,"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":2,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":15,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["doesn",{"1":{"35":1,"41":1}}],["dotnet",{"1":{"33":2}}],["dots",{"1":{"26":8}}],["docker",{"1":{"33":2}}],["documentation",{"1":{"8":1,"16":2,"37":1}}],["document",{"1":{"5":1,"11":1,"12":2,"26":12,"40":1}}],["download",{"1":{"15":1}}],["down",{"1":{"3":6,"11":2,"19":1}}],["don",{"1":{"0":1,"1":2,"4":1,"15":1,"17":1,"23":1,"25":1,"27":4,"29":1,"32":1,"33":1,"35":1,"41":1}}],["done",{"1":{"0":1}}],["do",{"1":{"0":1,"1":4,"4":2,"15":1,"17":2,"23":2,"25":2,"27":2,"29":2,"32":2,"33":3,"35":2,"37":1,"41":1}}],["damodar",{"1":{"37":1}}],["dart",{"1":{"33":2}}],["dark",{"0":{"31":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":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":7,"27":1,"28":1,"29":1,"30":3,"31":15,"32":2,"33":1,"34":1,"35":1,"36":1,"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":6,"50":1}}],["dailymotion",{"1":{"33":2}}],["date",{"1":{"26":3}}],["database",{"1":{"37":1}}],["data",{"1":{"2":3,"19":1,"26":67,"37":2,"41":1}}],["dashed",{"1":{"12":3,"16":4}}],["danger",{"1":{"0":4,"11":1,"12":1,"19":1,"27":3,"30":7,"43":3}}],["definition",{"1":{"44":1}}],["define",{"1":{"42":1,"45":2,"48":1}}],["defines",{"1":{"39":1}}],["default",{"1":{"0":16,"1":2,"12":1,"15":2,"16":1,"19":4,"24":1,"26":2,"27":4,"31":1,"37":1,"45":1}}],["develop",{"1":{"37":1}}],["developer",{"1":{"37":6}}],["dev",{"1":{"37":2}}],["device",{"1":{"33":1,"34":1}}],["devices",{"1":{"10":1}}],["decoration",{"1":{"35":1}}],["declared",{"1":{"31":1}}],["determine",{"1":{"35":1}}],["details",{"1":{"3":12,"13":1,"27":1}}],["deno",{"1":{"33":2}}],["delete",{"1":{"16":1,"19":2,"26":5,"37":2}}],["deletion",{"1":{"8":1}}],["desing",{"1":{"34":1}}],["designer",{"1":{"37":2}}],["designed",{"1":{"29":2,"37":1}}],["design",{"1":{"15":1,"30":3,"31":2,"34":1,"36":6,"37":13}}],["desired",{"1":{"3":16}}],["desktops",{"1":{"47":3}}],["desktop",{"1":{"12":6,"26":24,"41":1,"44":1,"47":7}}],["description",{"1":{"0":16,"3":9,"13":3}}],["depending",{"1":{"0":1,"27":2,"47":1,"49":1}}],["difference",{"1":{"46":1}}],["differentiate",{"1":{"27":1}}],["different",{"1":{"1":3,"19":1,"24":1,"27":1,"29":1,"34":1,"40":1}}],["dittmann",{"1":{"37":1}}],["direction",{"1":{"44":3,"45":5,"48":2}}],["directions",{"1":{"26":6}}],["directly",{"1":{"35":1}}],["directory",{"1":{"33":1,"36":1}}],["directors",{"1":{"26":6}}],["dialogue",{"1":{"19":1}}],["dialog5",{"1":{"8":1}}],["dialog4",{"1":{"8":1}}],["dialog",{"1":{"8":11}}],["divides",{"1":{"38":1}}],["div",{"1":{"0":60,"1":62,"2":14,"3":38,"4":40,"5":10,"6":56,"7":2,"8":20,"10":2,"11":36,"12":30,"13":8,"14":12,"19":26,"22":12,"24":12,"26":102,"27":10,"29":8,"30":1,"32":4,"37":6,"38":2,"39":12,"40":6,"42":2,"43":16,"44":8,"48":2,"50":2}}],["disqus",{"1":{"33":2}}],["distance",{"1":{"32":1}}],["distract",{"1":{"27":2}}],["discord",{"1":{"33":2,"37":3}}],["discoverable",{"1":{"19":1}}],["disclose",{"1":{"3":15}}],["disabling",{"1":{"17":1}}],["disable",{"1":{"17":1,"23":1,"25":1}}],["disabled",{"1":{"2":1,"6":4,"9":2,"10":1,"17":4,"19":3,"23":4,"25":4,"27":2,"30":1,"41":2,"43":3}}],["dismissed",{"1":{"0":1,"8":1}}],["displays",{"1":{"11":2,"19":1,"20":1}}],["displayed",{"1":{"1":1,"22":2,"44":1}}],["display",{"0":{"44":1},"1":{"0":2,"1":3,"2":2,"3":18,"4":1,"5":1,"6":2,"7":1,"8":1,"9":1,"10":2,"11":1,"12":4,"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":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":2,"44":9,"45":2,"46":1,"47":6,"48":4,"49":5,"50":2}}],["tglide",{"1":{"37":1}}],["twitter",{"1":{"33":2}}],["twitch",{"1":{"33":2}}],["two",{"1":{"0":1,"1":1,"3":3,"9":1,"15":1,"16":1,"19":3,"21":1,"22":1,"25":1,"26":1,"28":1,"32":2,"35":2,"46":1}}],["tumbir",{"1":{"33":2}}],["turning",{"1":{"25":1}}],["td",{"1":{"26":114,"37":4}}],["tbody",{"1":{"26":14}}],["try",{"1":{"37":1}}],["truth",{"1":{"37":1}}],["true",{"1":{"0":20,"2":2,"3":6,"5":2,"6":9,"8":4,"10":2,"11":8,"12":11,"13":1,"15":9,"17":3,"19":13,"21":6,"22":4,"23":3,"25":3,"26":29,"27":8,"28":3,"40":6,"41":2}}],["tr",{"1":{"26":30}}],["tradeshift",{"1":{"33":2}}],["transform",{"1":{"48":1}}],["translated",{"1":{"33":1,"42":1,"45":1}}],["transparent",{"1":{"8":1}}],["trailing",{"1":{"19":1}}],["trash",{"1":{"15":1,"26":5}}],["trim",{"1":{"12":2,"48":6}}],["template",{"1":{"44":1}}],["telegram",{"1":{"33":2}}],["technology",{"1":{"33":1}}],["team",{"1":{"1":1,"13":1,"37":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":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":1,"49":1,"50":1}}],["textfield",{"1":{"46":1}}],["texts",{"1":{"35":1}}],["textareas",{"1":{"22":1}}],["textarea",{"1":{"19":4,"22":2}}],["text",{"0":{"48":1},"1":{"0":52,"1":3,"2":4,"3":15,"4":50,"5":1,"6":6,"7":1,"8":23,"9":7,"10":5,"11":9,"12":14,"13":6,"14":1,"15":30,"16":3,"17":2,"18":3,"19":53,"20":2,"21":12,"22":25,"23":2,"24":7,"25":2,"26":96,"27":11,"28":5,"29":1,"30":7,"31":1,"32":3,"33":3,"34":1,"35":27,"36":1,"37":1,"38":2,"39":1,"40":7,"41":18,"42":1,"43":26,"44":1,"45":2,"46":1,"47":2,"48":20,"49":2,"50":4}}],["t",{"1":{"0":1,"1":2,"4":2,"15":1,"17":2,"19":2,"23":2,"25":2,"27":4,"29":1,"32":1,"33":1,"35":2,"41":2}}],["tiktok",{"1":{"33":2}}],["time",{"1":{"26":12}}],["tips",{"1":{"0":1,"1":1,"15":1,"27":1,"29":1,"37":1,"41":1}}],["title",{"1":{"0":26,"3":3,"8":14,"11":4,"12":5,"26":69,"37":2}}],["thomas",{"1":{"37":1}}],["those",{"1":{"37":1}}],["th",{"1":{"26":40}}],["through",{"1":{"41":1,"43":1}}],["throughout",{"1":{"26":1,"29":1}}],["three",{"1":{"1":1,"3":3,"4":1,"8":1,"13":1,"17":1,"23":1,"25":1,"26":1,"34":1,"39":1}}],["thumbnail",{"1":{"5":1}}],["think",{"1":{"4":1}}],["this",{"1":{"0":20,"3":9,"10":1,"16":1,"19":16,"20":1,"22":1,"27":6,"30":1,"31":1,"35":1}}],["than",{"1":{"1":1,"10":1,"19":1,"33":1,"34":1}}],["that",{"1":{"0":2,"1":2,"3":16,"7":1,"8":2,"10":1,"15":1,"18":1,"19":6,"27":3,"29":2,"32":2,"35":2,"39":1,"41":1}}],["these",{"1":{"27":1,"37":1}}],["their",{"1":{"27":2,"32":1}}],["thead",{"1":{"26":40}}],["there",{"1":{"1":1,"5":1,"6":1,"10":1,"15":1,"17":2,"19":2,"23":2,"24":1,"25":2,"33":2,"34":1,"35":1,"37":1}}],["them",{"1":{"0":1,"29":1,"33":1,"34":1}}],["theme",{"0":{"31":1,"49":1},"1":{"0":2,"1":2,"2":3,"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":3,"31":17,"32":3,"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":3,"49":6,"50":3}}],["the",{"1":{"0":50,"1":4,"2":1,"3":1,"4":7,"5":1,"6":1,"8":6,"10":9,"11":2,"14":1,"15":8,"16":2,"17":5,"19":15,"21":1,"22":5,"23":6,"24":1,"25":5,"26":10,"27":16,"28":4,"29":6,"30":5,"31":2,"32":6,"33":12,"34":4,"35":9,"36":8,"37":5,"39":2,"42":6,"43":1,"44":22,"45":3,"46":4,"47":2,"48":10,"49":1,"50":1}}],["they",{"1":{"0":3,"3":16,"4":2,"8":1,"15":1,"17":1,"19":1,"25":1,"26":1,"33":1,"41":1}}],["torstendittmann",{"1":{"37":1}}],["torsten",{"1":{"37":1}}],["tooling",{"1":{"37":1}}],["tooltips",{"1":{"28":2,"29":1}}],["tooltip",{"0":{"28":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":10,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":4,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":2,"28":17,"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}}],["too",{"1":{"29":1}}],["toggle",{"1":{"11":2,"25":1}}],["top",{"1":{"2":3,"6":2,"8":1,"14":3,"45":3}}],["to",{"1":{"0":30,"1":4,"2":5,"3":32,"4":3,"6":2,"7":3,"8":3,"9":2,"10":3,"12":11,"14":1,"15":7,"16":5,"17":7,"18":1,"19":17,"20":3,"22":3,"23":7,"25":8,"26":3,"27":17,"29":6,"30":2,"31":5,"32":3,"33":7,"34":2,"35":7,"36":3,"37":3,"38":1,"40":1,"41":4,"42":1,"43":2,"44":1,"46":1}}],["typically",{"1":{"1":1,"19":1,"27":2}}],["typical",{"1":{"0":15}}],["type",{"1":{"0":6,"1":5,"2":1,"3":8,"4":4,"5":2,"6":2,"7":1,"8":3,"9":3,"10":2,"11":3,"12":4,"13":2,"14":1,"15":3,"16":2,"17":9,"18":1,"19":27,"20":1,"21":2,"22":2,"23":9,"24":3,"25":10,"26":18,"27":3,"28":2,"30":1,"32":1,"33":1,"38":1,"39":1,"40":1,"41":1,"46":2}}],["types",{"1":{"0":2,"1":2,"5":2,"15":2,"19":3,"21":2,"32":2}}],["typography",{"0":{"35":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":2,"35":5,"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":1}}],["tappable",{"1":{"27":1}}],["take",{"1":{"17":1,"45":1}}],["taken",{"1":{"8":1}}],["tall",{"1":{"15":1}}],["task",{"1":{"0":2,"27":3}}],["tab",{"1":{"10":1,"26":1}}],["tabs",{"0":{"9":1,"10":1},"1":{"0":2,"1":2,"2":2,"3":2,"4":2,"5":2,"6":2,"7":2,"8":3,"9":26,"10":29,"11":3,"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":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["tablets",{"1":{"47":9}}],["tablet",{"1":{"47":2}}],["tables",{"1":{"26":5,"29":1,"32":2}}],["table",{"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":162,"27":2,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":3,"38":1,"39":1,"40":1,"41":2,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["tags",{"1":{"8":1,"16":1,"19":6,"27":10,"29":1,"35":1}}],["tag",{"0":{"27":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":5,"7":1,"8":1,"9":1,"10":1,"11":3,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":5,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":14,"27":21,"28":4,"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}}],["rtl",{"1":{"48":2}}],["richards",{"1":{"37":1}}],["right",{"1":{"6":2,"10":3,"15":1,"21":3,"33":1,"41":1,"45":1,"48":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}}],["rr",{"1":{"37":4}}],["run",{"1":{"36":1}}],["runtime",{"1":{"19":3}}],["rule",{"1":{"34":1}}],["ruby",{"1":{"33":2}}],["ronald",{"1":{"37":2}}],["rowgroup",{"1":{"26":1}}],["rowheader",{"1":{"26":1}}],["rows",{"1":{"26":2,"39":1}}],["row",{"1":{"26":26,"44":12}}],["rounded",{"1":{"14":1,"15":1,"29":1}}],["role",{"1":{"11":7,"12":3,"19":5,"26":27,"28":3}}],["rana",{"1":{"37":1}}],["range",{"1":{"34":1}}],["ranges",{"1":{"34":1}}],["rahul",{"1":{"37":1}}],["raw",{"1":{"2":3}}],["radio",{"0":{"23":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":2,"23":22,"24":2,"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}}],["radius",{"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":7,"13":2,"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":24,"30":2,"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}}],["rem",{"1":{"42":1}}],["remove",{"1":{"12":2,"15":1,"26":2,"46":2}}],["rel",{"1":{"36":2}}],["relative",{"1":{"32":1,"45":2}}],["related",{"1":{"0":1,"16":1,"17":1,"21":1}}],["reusable",{"1":{"36":1,"37":2}}],["regular",{"1":{"35":6}}],["react",{"1":{"33":2}}],["ready",{"1":{"24":3}}],["read",{"1":{"19":1,"37":3}}],["readonly",{"1":{"19":3}}],["readability",{"1":{"15":2}}],["readable",{"1":{"0":1}}],["refresh",{"1":{"26":10}}],["refer",{"1":{"8":1,"23":1,"25":1}}],["reveal",{"1":{"3":16}}],["recognition",{"1":{"4":1,"15":2}}],["recognizable",{"1":{"1":2}}],["recommended",{"1":{"10":1}}],["recommend",{"1":{"4":1,"15":1,"17":1,"27":2,"32":1,"33":1,"35":1}}],["recently",{"1":{"0":1}}],["reddit",{"1":{"33":2}}],["reduces",{"1":{"10":1}}],["red",{"1":{"1":3,"27":1,"30":2}}],["represent",{"1":{"30":1}}],["representing",{"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,"18":1,"20":1,"21":1,"22":1,"24":1,"25":1,"26":1,"27":1,"28":1,"38":1,"39":1,"40":1,"41":1}}],["representation",{"1":{"1":1,"5":2,"33":1}}],["required",{"1":{"0":1,"19":1,"27":1}}],["resolutions",{"1":{"34":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}}],["resets",{"1":{"37":1}}],["reset",{"0":{"46":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":2,"38":1,"39":1,"40":1,"41":1,"42":1,"43":1,"44":1,"45":2,"46":7,"47":2,"48":1,"49":1,"50":1}}],["responsive",{"0":{"34":1,"47":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":3,"34":7,"35":3,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":2,"43":2,"44":2,"45":2,"46":3,"47":5,"48":3,"49":2,"50":2}}],["swift",{"1":{"33":2}}],["switches",{"1":{"17":1,"25":7,"29":1}}],["switch",{"0":{"25":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":3,"10":2,"11":1,"12":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":15,"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}}],["slack",{"1":{"33":2}}],["skype",{"1":{"33":2}}],["svg",{"1":{"33":1}}],["same",{"1":{"42":5,"44":21,"45":2,"48":10}}],["sachan",{"1":{"37":1}}],["salesforce",{"1":{"33":2}}],["safari",{"1":{"33":2,"46":1}}],["safe",{"1":{"6":3}}],["sass",{"1":{"31":3,"34":2}}],["sandler",{"1":{"26":18}}],["solve",{"1":{"44":1}}],["solid",{"1":{"16":2,"33":1,"44":6}}],["software",{"1":{"37":7}}],["soften",{"1":{"29":2}}],["source",{"1":{"36":1,"37":6}}],["social",{"1":{"33":1}}],["so",{"1":{"15":1,"17":1,"23":1,"25":1,"27":2}}],["sometimes",{"1":{"19":1}}],["something",{"1":{"0":1,"7":1}}],["some",{"1":{"0":15,"34":1,"50":2}}],["spotify",{"1":{"33":2}}],["special",{"1":{"30":1,"34":1}}],["specific",{"1":{"11":1,"12":1,"15":1,"29":1,"30":1}}],["spacing",{"1":{"14":1,"44":1}}],["space",{"1":{"10":2,"17":2,"23":1,"25":1,"33":3,"44":3,"48":5}}],["span",{"1":{"0":80,"1":2,"2":8,"3":36,"4":42,"5":4,"6":30,"8":22,"9":12,"10":12,"11":42,"12":60,"13":18,"15":50,"19":48,"21":30,"22":14,"24":24,"26":232,"27":32,"28":16,"37":2,"40":24,"41":28}}],["scannable",{"1":{"38":1}}],["scanning",{"1":{"27":2,"35":1}}],["scale",{"1":{"33":2,"35":1}}],["scss",{"1":{"31":5,"34":6,"42":2,"44":1,"45":1,"48":1}}],["scenarios",{"1":{"10":1}}],["screen",{"1":{"10":1,"15":1,"26":1,"34":5,"39":3,"44":1,"47":1}}],["screens",{"1":{"6":1,"34":15,"39":4}}],["scrim",{"1":{"8":1}}],["scrolling",{"1":{"10":1,"26":1}}],["scroll",{"1":{"2":3,"10":7,"26":7}}],["snippets",{"1":{"9":1,"18":2,"30":1,"35":1}}],["shimonewman",{"1":{"37":1}}],["shimon",{"1":{"37":1}}],["shield",{"1":{"6":3}}],["shmuel",{"1":{"37":1}}],["shechter",{"1":{"37":1}}],["shades",{"1":{"30":2}}],["shadows",{"1":{"32":3}}],["shadow",{"1":{"12":3,"32":14}}],["sharp",{"1":{"29":1}}],["shrink",{"1":{"12":2,"44":3}}],["shortcuts",{"1":{"20":2}}],["short",{"1":{"15":1,"27":2}}],["shows",{"1":{"13":1,"46":1,"47":1,"49":1}}],["showmodal",{"1":{"8":1}}],["shown",{"1":{"1":1,"34":1}}],["show",{"1":{"0":1,"8":1,"10":2,"16":1,"19":3,"22":1,"26":2,"31":1,"32":2,"41":2}}],["should",{"1":{"0":2,"10":4,"15":1,"16":1,"17":3,"19":2,"23":3,"25":3,"26":3,"32":1,"33":2}}],["sizing",{"1":{"44":2}}],["sizes",{"1":{"1":4,"8":2,"9":1,"15":2,"17":2,"23":2,"25":2,"29":3,"34":3,"35":3,"39":1}}],["size",{"1":{"0":10,"1":24,"4":4,"6":2,"12":15,"15":6,"17":2,"19":2,"23":5,"25":2,"26":13,"29":1,"34":2,"35":1,"39":8,"44":27,"47":1,"48":10}}],["singh",{"1":{"37":1}}],["single",{"1":{"9":1,"10":1,"16":1,"17":1,"23":3,"25":2,"33":1,"41":1}}],["simple",{"1":{"27":2,"37":1}}],["simplify",{"1":{"6":1}}],["six",{"1":{"10":1,"11":1,"43":1}}],["sidebar",{"1":{"29":1,"40":2}}],["side",{"1":{"10":2,"40":4}}],["surface",{"1":{"32":2}}],["surfaces",{"1":{"32":1}}],["sure",{"1":{"15":1,"17":1,"23":1,"25":1,"33":2}}],["support",{"1":{"31":1,"35":1,"37":2}}],["such",{"1":{"15":1,"29":4,"30":1,"32":2}}],["successfully",{"1":{"0":1,"27":1}}],["success",{"1":{"0":4,"11":1,"19":6,"27":6,"30":8,"43":3}}],["subtle",{"1":{"35":1}}],["sub",{"1":{"6":9}}],["subheading",{"1":{"3":9}}],["summary",{"1":{"3":12}}],["src",{"1":{"1":1,"5":1,"26":6,"37":1}}],["s",{"1":{"1":3,"8":1,"15":1,"26":1,"27":1,"30":2,"33":1,"36":1,"37":3,"45":1,"46":1,"50":1}}],["small",{"1":{"0":10,"1":18,"6":1,"8":9,"17":4,"23":4,"25":4,"29":7,"32":7,"34":9,"39":3,"48":12}}],["stnguyen90",{"1":{"37":1}}],["steven",{"1":{"37":1}}],["steps",{"1":{"33":1,"36":1}}],["storage",{"1":{"37":1}}],["still",{"1":{"7":1}}],["sticky",{"1":{"0":43,"26":4,"45":9}}],["stretch",{"1":{"44":1}}],["stripe",{"1":{"33":2}}],["string",{"1":{"1":1}}],["strong",{"1":{"4":1,"15":1,"35":1}}],["stylesheet",{"1":{"36":2}}],["styles",{"1":{"16":2,"26":5,"37":1,"45":2,"46":1}}],["style",{"1":{"0":10,"4":10,"6":1,"10":1,"11":7,"12":5,"15":1,"19":3,"22":1,"26":21,"27":1,"29":4,"30":2,"31":6,"32":2,"34":12,"35":5,"39":1,"45":2}}],["stays",{"1":{"42":5,"44":21,"45":2,"48":10}}],["stars",{"1":{"26":12}}],["start",{"1":{"2":1,"3":6,"4":11,"6":18,"10":2,"11":3,"12":8,"13":1,"19":2,"20":1,"21":2,"22":4,"26":4,"28":1,"32":2,"36":1,"38":1,"42":53,"44":10,"45":7,"48":1}}],["started",{"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":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":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":2,"37":4,"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}}],["standard",{"1":{"32":1}}],["stand",{"1":{"15":1}}],["stack",{"1":{"14":1,"37":1}}],["static",{"1":{"27":1}}],["state",{"1":{"11":1,"12":1,"16":1,"24":2,"27":1}}],["states",{"1":{"0":2,"16":1,"17":1,"19":2,"23":1,"24":2,"25":2,"43":2}}],["status",{"0":{"24":1},"1":{"0":2,"1":1,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":2,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":2,"24":22,"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}}],["system",{"1":{"0":2,"27":1,"30":2,"35":1,"36":1,"37":3,"43":1}}],["see",{"1":{"46":1}}],["self",{"1":{"44":3}}],["selector",{"1":{"49":1}}],["selectors",{"1":{"23":1,"25":1,"30":1}}],["selection",{"1":{"23":1}}],["selecting",{"1":{"23":1}}],["selected",{"1":{"10":1,"23":1,"26":1,"27":1,"30":2,"33":1,"40":1,"49":1}}],["select",{"1":{"3":9,"4":1,"12":1,"17":3,"19":9,"23":1,"33":1}}],["semantics",{"1":{"35":1}}],["semibold",{"1":{"35":6}}],["semi",{"1":{"8":1}}],["serious",{"1":{"29":1}}],["sensitive",{"1":{"19":1}}],["sentences",{"1":{"15":1}}],["sent",{"1":{"0":15}}],["set",{"1":{"17":2,"19":3,"23":1,"25":1,"28":9,"43":1}}],["settings",{"1":{"10":3}}],["seperators",{"1":{"30":1}}],["separator",{"1":{"13":1,"19":1}}],["sep",{"1":{"13":2,"44":3}}],["sessions",{"1":{"10":3}}],["secret",{"1":{"19":3,"28":9}}],["secure",{"1":{"6":3}}],["sections",{"1":{"9":2,"10":1,"38":1}}],["section",{"1":{"0":20,"2":2,"4":23,"9":1,"11":4,"26":2,"36":1,"40":6,"45":2}}],["secondary",{"0":{"9":1},"1":{"0":1,"1":1,"2":2,"3":1,"4":1,"5":1,"6":1,"7":1,"8":5,"9":24,"10":2,"11":1,"12":4,"13":1,"14":1,"15":16,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":2,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"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}}],["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":7,"20":4,"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}}],["guide",{"1":{"37":1}}],["guarantees",{"1":{"35":1}}],["google",{"1":{"33":2}}],["global",{"1":{"31":2}}],["g",{"1":{"27":1,"32":2,"37":1}}],["gt",{"1":{"8":1,"26":2,"36":1}}],["gap",{"1":{"2":1,"6":7,"8":3,"12":3,"13":1,"14":4,"22":3,"26":8,"37":2,"39":3,"44":42}}],["growing",{"1":{"37":1}}],["grouping",{"1":{"21":1}}],["group",{"1":{"1":21,"16":1,"38":1,"40":1}}],["groups",{"1":{"1":2}}],["green",{"1":{"1":7,"27":1,"30":2}}],["grayscale",{"1":{"33":1}}],["gray",{"1":{"1":1,"27":1,"33":2,"43":3}}],["graphical",{"1":{"1":1}}],["grid",{"0":{"6":1,"39":1},"1":{"0":7,"1":2,"2":12,"3":2,"4":4,"5":3,"6":34,"7":3,"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":3,"36":2,"37":2,"38":3,"39":19,"40":3,"41":2,"42":2,"43":2,"44":6,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["gitlab",{"1":{"33":2}}],["git",{"1":{"33":2,"37":2}}],["github",{"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":3,"34":1,"35":1,"36":1,"37":4,"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}}],["give",{"1":{"0":1}}],["get",{"1":{"16":1,"37":1,"39":1}}],["getting",{"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":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":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}}],["generic",{"1":{"0":1}}],["general",{"1":{"0":1,"27":1,"33":1}}],["generated",{"1":{"0":2}}],["kind",{"1":{"38":1}}],["kodumbeats",{"1":{"37":1}}],["kotlin",{"1":{"33":2}}],["kristin",{"1":{"37":4}}],["kb",{"1":{"26":18}}],["kbd",{"1":{"20":7}}],["keys",{"1":{"19":3,"28":9}}],["keyword",{"1":{"18":3}}],["keyboard",{"0":{"20":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":6,"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":1,"46":2,"47":1,"48":1,"49":1,"50":1}}],["keeping",{"1":{"15":1}}],["keep",{"1":{"1":1,"15":1,"27":2,"29":1,"41":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":4,"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}}],[">",{"1":{"0":271,"1":110,"2":49,"3":159,"4":183,"5":23,"6":121,"7":4,"8":89,"9":43,"10":38,"11":147,"12":132,"13":30,"14":15,"15":101,"16":6,"17":11,"18":4,"19":211,"20":8,"21":66,"22":39,"23":11,"24":38,"25":11,"26":632,"27":51,"28":26,"29":13,"30":3,"31":7,"32":10,"33":1,"34":13,"35":39,"36":5,"37":19,"38":6,"39":28,"40":60,"41":66,"42":4,"43":18,"44":10,"45":6,"46":5,"47":12,"48":12,"49":1,"50":8}}],["+2",{"1":{"1":12}}],["+",{"1":{"0":1,"1":1,"2":1,"3":1,"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":4,"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}}],["custom",{"1":{"39":1}}],["current",{"1":{"24":1}}],["currently",{"1":{"8":1,"27":1}}],["cdn",{"1":{"36":1}}],["cpp",{"1":{"33":2}}],["css3",{"1":{"33":2}}],["css",{"1":{"30":2,"31":3,"34":2,"36":3,"37":4,"39":2,"42":1,"44":2,"45":1,"48":1}}],["circular",{"1":{"29":3}}],["circle",{"1":{"12":1,"19":2,"21":3,"27":2}}],["cell",{"1":{"26":15}}],["centered",{"1":{"33":1}}],["center",{"1":{"1":1,"4":4,"12":11,"14":4,"17":2,"23":2,"25":2,"26":6,"33":3,"37":2,"44":6,"48":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"22":3}}],["creation",{"1":{"8":1}}],["created",{"1":{"26":12,"37":1}}],["create",{"1":{"2":1,"16":2,"18":1,"19":1,"26":3,"30":1,"32":2,"37":3,"38":1}}],["cross",{"1":{"4":2,"12":5,"13":1,"14":4,"22":3,"26":8,"37":2,"44":6}}],["clamp",{"1":{"48":1}}],["clarify",{"1":{"27":1}}],["class=",{"1":{"26":2}}],["classes",{"1":{"4":1,"31":2,"43":2,"45":2,"50":1}}],["class",{"1":{"0":131,"1":59,"2":19,"3":78,"4":95,"5":12,"6":55,"7":3,"8":46,"9":24,"10":22,"11":76,"12":67,"13":17,"14":9,"15":52,"16":5,"17":4,"18":3,"19":95,"20":5,"21":34,"22":22,"23":4,"24":22,"25":11,"26":322,"27":27,"28":15,"29":4,"31":2,"32":4,"33":2,"35":14,"37":6,"38":4,"39":9,"40":31,"41":34,"42":3,"43":10,"44":6,"45":5,"46":4,"47":6,"48":5,"50":4}}],["click",{"1":{"41":1}}],["clickability",{"1":{"35":1}}],["clickable",{"1":{"26":2,"27":1}}],["clicking",{"1":{"17":1,"23":1,"25":1}}],["clear",{"1":{"3":9,"19":2,"35":1}}],["closed",{"1":{"6":3}}],["close",{"1":{"0":10,"8":5,"11":2}}],["chrome",{"1":{"46":1}}],["christyjacob4",{"1":{"37":1}}],["christy",{"1":{"37":1}}],["chart",{"1":{"40":1}}],["change",{"1":{"0":1,"19":1}}],["child",{"1":{"13":1,"22":3,"26":2,"44":3}}],["choose",{"1":{"12":9,"19":1,"27":2}}],["choice",{"1":{"3":12}}],["chenparnasa",{"1":{"37":1}}],["chen",{"1":{"37":1}}],["checked",{"1":{"17":3,"23":3,"25":3}}],["check",{"1":{"6":3,"11":1,"16":1,"19":1,"21":3,"27":1,"43":8}}],["checkboxes",{"1":{"3":2,"17":6,"23":1,"29":1}}],["checkbox",{"0":{"17":1},"1":{"0":1,"1":1,"2":1,"3":7,"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":2,"17":12,"18":2,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":8,"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}}],["cheveron",{"1":{"3":6,"10":2,"11":2,"15":2,"19":1,"41":2}}],["capitalize",{"1":{"48":2}}],["carla",{"1":{"37":1}}],["cards",{"1":{"6":1,"16":4,"29":1,"32":2}}],["card",{"0":{"16":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":4,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":2,"14":1,"15":2,"16":10,"17":2,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":3,"27":1,"28":1,"29":5,"30":1,"31":1,"32":3,"33":1,"34":1,"35":1,"36":1,"37":2,"38":1,"39":25,"40":1,"41":1,"42":1,"43":1,"44":2,"45":1,"46":1,"47":1,"48":1,"49":1,"50":1}}],["categories",{"1":{"27":1}}],["case",{"1":{"15":1,"19":3,"26":1}}],["cases",{"1":{"4":1,"5":2,"15":1,"21":2,"34":2}}],["call",{"1":{"0":1,"15":2}}],["cancel",{"1":{"11":2,"15":1}}],["cannot",{"1":{"1":1}}],["can",{"1":{"0":4,"1":5,"3":1,"4":1,"8":2,"10":3,"15":2,"16":2,"18":2,"19":4,"22":2,"23":1,"25":1,"26":1,"30":1,"33":1,"34":1,"35":2,"38":1,"39":2,"45":3}}],["cog",{"1":{"40":1}}],["cognitive",{"1":{"10":1}}],["codingsamurai",{"1":{"37":1}}],["code",{"0":{"2":1,"18":1},"1":{"0":2,"1":3,"2":27,"3":3,"4":2,"5":2,"6":2,"7":2,"8":2,"9":3,"10":2,"11":2,"12":2,"13":2,"14":2,"15":2,"16":2,"17":3,"18":15,"19":3,"20":2,"21":2,"22":2,"23":2,"24":2,"25":2,"26":2,"27":2,"28":2,"29":2,"30":3,"31":2,"32":2,"33":7,"34":4,"35":12,"36":3,"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}}],["count",{"1":{"19":1}}],["counter",{"1":{"19":4}}],["cope",{"1":{"37":1}}],["copied",{"1":{"18":1}}],["copying",{"1":{"22":1}}],["copy",{"1":{"13":1,"19":3,"22":3,"26":2,"27":2,"33":1,"36":1}}],["com",{"1":{"36":2}}],["community",{"1":{"37":1}}],["commit",{"1":{"37":2}}],["command",{"1":{"33":1,"36":1}}],["common",{"1":{"22":1,"33":1}}],["commonly",{"1":{"15":1,"25":1}}],["compilation",{"1":{"42":1}}],["compiled",{"1":{"31":1,"34":1,"42":1,"44":1,"48":1}}],["compliment",{"1":{"35":1}}],["complete",{"1":{"6":4,"7":1,"15":1,"24":6}}],["completed",{"1":{"0":1,"27":1}}],["complex",{"1":{"6":1}}],["component",{"1":{"15":1,"29":1,"32":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},"1":{"0":2,"1":2,"2":2,"3":4,"4":4,"5":2,"6":2,"7":2,"8":4,"9":4,"10":4,"11":4,"12":4,"13":4,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":2,"23":1,"24":2,"25":1,"26":3,"27":1,"28":3,"29":4,"30":2,"31":2,"32":5,"33":1,"34":1,"35":1,"36":1,"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}}],["core",{"1":{"37":1}}],["corner",{"1":{"29":2}}],["corners",{"1":{"14":1,"15":1,"29":2}}],["correct",{"1":{"19":1}}],["correctly",{"1":{"15":1,"17":1,"23":1,"25":1}}],["cover",{"1":{"12":6}}],["configured",{"1":{"45":1}}],["confused",{"1":{"35":1}}],["confusion",{"1":{"4":1}}],["convey",{"1":{"27":2,"43":1}}],["conduct",{"1":{"19":1}}],["conjunction",{"1":{"15":1}}],["consist",{"1":{"3":1,"4":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"26":1,"28":1}}],["consistency",{"1":{"1":1,"15":1}}],["consistent",{"1":{"0":1,"30":1,"36":1,"37":3,"42":1,"43":1,"48":1}}],["console",{"1":{"0":2,"1":1,"3":1,"4":1,"8":1,"15":1,"16":1,"21":1,"26":3,"27":4,"29":1,"30":2,"32":1,"34":1,"43":1,"44":1}}],["contributing",{"1":{"37":1}}],["controls",{"1":{"44":1}}],["controlled",{"1":{"25":1,"50":1}}],["control",{"1":{"4":1,"30":1,"44":1}}],["contrast",{"1":{"1":1,"32":3}}],["contains",{"1":{"22":1,"24":1,"30":1}}],["containing",{"1":{"19":1,"41":1}}],["contain",{"1":{"0":1,"3":1}}],["containers",{"1":{"8":1}}],["container",{"0":{"38":1},"1":{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":2,"10":1,"11":1,"12":2,"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":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":11,"39":4,"40":1,"41":1,"42":1,"43":1,"44":1,"45":1,"46":1,"47":1,"48":1,"49":1,"50":2}}],["context",{"1":{"0":2,"27":4,"35":1}}],["contextual",{"1":{"0":15,"12":3,"19":1}}],["content",{"1":{"0":11,"2":1,"3":27,"5":6,"8":6,"9":1,"10":1,"11":4,"14":1,"16":1,"19":1,"21":1,"22":1,"26":1,"27":1,"34":1,"38":3,"41":1,"44":5}}],["colours",{"1":{"27":1}}],["colored",{"1":{"1":1}}],["color",{"1":{"1":27,"8":1,"11":1,"12":1,"19":4,"30":56,"31":24,"33":3,"37":1,"43":32,"44":6}}],["colors",{"0":{"30":1,"43":1},"1":{"0":2,"1":4,"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":3,"30":12,"31":3,"32":2,"33":2,"34":2,"35":2,"36":2,"37":2,"38":2,"39":2,"40":2,"41":2,"42":3,"43":9,"44":3,"45":2,"46":2,"47":2,"48":2,"49":2,"50":2}}],["collaborating",{"1":{"37":1}}],["collaboration",{"1":{"37":1}}],["collaborate",{"1":{"37":4}}],["collapsibles",{"1":{"3":17}}],["collapsible",{"0":{"3":1},"1":{"0":1,"1":1,"2":2,"3":45,"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":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}}],["collection",{"1":{"26":18}}],["col",{"1":{"26":120,"37":2}}],["columnheader",{"1":{"26":5}}],["columns",{"1":{"26":2,"44":2}}],["column",{"1":{"13":3,"26":4,"44":15}}],["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}}]],"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,134],"1":[2,263],"2":[2,230],"3":[3,133],"4":[3,149],"5":[2,180],"6":[3,205],"7":[3,151],"8":[3,189],"9":[3,137],"10":[3,203],"11":[2,252],"12":[3,147],"13":[3,125],"14":[2,201],"15":[3,162],"16":[3,182],"17":[4,210],"18":[3,140],"19":[2,131],"20":[2,268],"21":[2,195],"22":[2,207],"23":[3,120],"24":[3,137],"25":[3,395],"26":[2,113],"27":[2,141],"28":[2,112],"29":[2,179],"30":[3,188],"31":[2,131],"32":[2,193],"33":[2,341],"34":[2,243],"35":[2,154],"36":[3,191],"37":[2,213],"38":[3,160],"39":[2,186],"40":[2,273],"41":[2,217],"42":[2,224],"43":[2,159],"44":[1,354],"45":[2,121],"46":[3,157],"47":[3,152],"48":[2,133],"49":[2,169],"50":[3,165],"51":[2,129],"52":[2,100],"53":[2,232],"54":[2,168],"55":[3,149],"56":[2,123],"57":[2,173],"58":[2,104],"59":[2,122]},"averageFieldLength":[2.4,180.25],"storedFields":{"0":{"title":"components - action bar","content":" search Ctrl + --> K GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 > 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 > 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 Preview HTML 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 the heroicons library. By following the steps below, you can easily include all icons in your projects: Navigate to Heroicons website Navigate to heroicons and make sure you are looking at the solid icons. Select an icon and copy its name. Use the selected icon In your code use a class, type icon- and paste the icon’s name right after. 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-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-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal 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-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-microsoft icon-microsoft_edge icon-node icon-notion icon-okta icon-opera icon-paypal 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 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 Desing 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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! Shmuel Fogel @fogelito Software Engineer at Appwrite Arman Nik @ArmanNik Frontend Engineer at Appwrite Eldad Fux @eldadfux Appwrite's Founder Carla @heyCarla Product Designer at Appwrite Philipp Hausleiter @phaus Wess Cope @wess Software Engineer at Appwrite Torsten Dittmann @TorstenDittmann Engineering Lead at Appwrite Elad Shechter @elad2412 Web Developer at Appwrite Everly Precia Suresh @everly-gif Software Engineer at Appwrite Brandon @brandonroberts Bishwajeet Parhi @2002Bishwajeet Hardik Sachan @hardiksachan Shimon Newman @shimonewman Full Stack Engineer at Appwrite Aditya Oberai @adityaoberai Developer Advocate at Appwrite achintya @achintya-7 Aditya Rana @codingsamurai-10 Matej Bačo @Meldiron Software Engineer at Appwrite Jake Barnby @abnegate Engineering Lead at Appwrite Steven Nguyen @stnguyen90 Software Engineer at Appwrite Rahul Singh @drph4nt0m Chen Parnasa @chenparnasa Product Designer at Appwrite Brandon @kodumbeats Damodar Lohani @lohanidamodar Software Engineer at Appwrite Bradley Schofield @PineappleIOnic Software 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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 GitHub 318 Home Getting Started Foundations border radius colors dark theme elevation icons responsive typography Utilities box model colors cursor display position reset inputs responsive text theme visibility Layout container grid box grid header navigation pagination Elements box button card checkbox inline code inline tag input field keyboard list loader output radio button status switch table tag tooltip Components action bar alert avatar clickable list code panel collapsible drop 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}}],["$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}}],["queries",{"1":{"41":1}}],["quot",{"1":{"33":4,"39":2}}],["quickly",{"1":{"32":1,"54":1}}],["zoom",{"1":{"40":2}}],["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}}],["java",{"1":{"40":2}}],["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":2}}],["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":2}}],["vs",{"1":{"40":2}}],["vk",{"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,"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,"41":1,"46":1}}],["variables",{"1":{"17":3,"25":12,"35":10,"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}}],["vimeo",{"1":{"40":2}}],["view",{"1":{"4":1,"15":16,"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}}],["318",{"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}}],["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":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,"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}}],["ycombinator",{"1":{"40":2}}],["yandex",{"1":{"40":2}}],["yammer",{"1":{"40":2}}],["yahoo",{"1":{"40":2}}],["y",{"1":{"33":18,"59":3}}],["year",{"1":{"33":12}}],["yet",{"1":{"2":1}}],["youtube",{"1":{"40":2}}],["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":2,"41":2,"49":1,"54":1}}],["yourself",{"1":{"44":1}}],["your",{"1":{"1":2,"21":1,"25":12,"40":2,"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,"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,"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}}],["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,"41":3,"42":23,"46":1,"47":5,"49":3,"50":7,"53":11,"54":10,"57":9}}],["wordpress",{"1":{"40":2}}],["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,"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":2}}],["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":2,"36":1,"42":1,"43":1,"46":1,"52":2,"54":1}}],["williamson",{"1":{"3":6}}],["wizard",{"1":{"33":1}}],["window",{"1":{"7":1,"11":1}}],["without",{"1":{"19":1,"33":2,"55":2}}],["with",{"1":{"2":1,"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}}],["webkit",{"1":{"55":1,"57":3}}],["web",{"1":{"44":1}}],["website",{"1":{"40":1,"48":1}}],["wess",{"1":{"44":2}}],["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}}],["nguyen",{"1":{"44":1}}],["nik",{"1":{"44":1}}],["npm",{"1":{"43":3,"44":1}}],["null",{"1":{"25":6}}],["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":2,"43":1}}],["no",{"1":{"6":4,"7":3,"14":1,"17":3,"25":8,"41":1}}],["notion",{"1":{"40":2}}],["notify",{"1":{"1":1,"10":3}}],["note",{"1":{"22":3}}],["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,"40":2}}],["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":2,"44":3,"50":1}}],["narrow",{"1":{"4":1,"33":1}}],["needed",{"1":{"44":1}}],["need",{"1":{"21":1,"49":1}}],["needs",{"1":{"1":1,"28":1,"36":2}}],["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}}],["newman",{"1":{"44":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":55,"3":19,"4":25,"5":87,"6":117,"7":17,"8":79,"9":50,"10":118,"11":106,"12":49,"13":20,"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,"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":2,"55":1}}],["edit",{"1":{"25":1,"34":2,"44":2}}],["etsy",{"1":{"40":2}}],["etc",{"1":{"7":1}}],["effect",{"1":{"39":1}}],["efficient",{"1":{"25":1}}],["e",{"1":{"34":1,"39":2}}],["emphasis",{"1":{"23":1}}],["empty",{"1":{"2":8,"18":3,"21":2,"25":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}}],["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,"40":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}}],["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}}],["exceeds",{"1":{"14":1,"33":2}}],["exclamation",{"1":{"8":3,"9":1,"11":1,"17":1,"25":5,"34":2}}],["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":2}}],["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,"50":24,"53":9,"54":36,"57":2}}],["m",{"1":{"56":15}}],["might",{"1":{"41":1}}],["microsoft",{"1":{"40":4}}],["mix",{"1":{"34":2}}],["middle",{"1":{"19":7}}],["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}}],["mdn",{"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}}],["must",{"1":{"11":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":2,"41":11,"46":1,"57":1}}],["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,"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}}],["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}}],["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":2,"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}}],["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,"47":1,"53":2,"56":10}}],["modules",{"1":{"43":1}}],["mode",{"1":{"2":1,"37":2,"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":2}}],["ol",{"1":{"27":2,"49":2}}],["our",{"1":{"21":1,"34":1,"37":3,"44":3,"50":1,"57":1}}],["outer",{"1":{"33":3}}],["out",{"1":{"20":1,"21":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":2,"55":1}}],["opening",{"1":{"33":1}}],["open",{"1":{"5":1,"7":1,"11":7,"16":3,"25":4,"26":3,"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":11,"36":3,"38":1,"39":3,"40":1,"42":4,"44":2,"48":1,"55":1,"56":1,"58":2}}],["off",{"1":{"32":4,"33":1}}],["offline",{"1":{"9":2,"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":1,"36":5,"37":1,"39":2,"40":8,"41":3,"42":5,"43":2,"44":7,"45":1,"46":5,"49":1,"54":2,"56":1}}],["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}}],["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}}],["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":8,"3":2,"5":6,"6":16,"8":8,"10":4,"11":2,"12":2,"13":4,"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":2}}],["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":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}}],["updated",{"1":{"33":4}}],["update",{"1":{"21":1}}],["uppercase",{"1":{"2":1,"20":2}}],["up",{"1":{"2":2,"4":1,"22":1,"25":5,"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,"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":8,"36":2,"37":1,"38":1,"39":1,"40":1,"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}}],["affordance",{"1":{"42":1}}],["affect",{"1":{"41":7}}],["after",{"1":{"40":1,"43":1}}],["azure",{"1":{"40":2}}],["auth",{"1":{"44":1}}],["authentik",{"1":{"40":2}}],["auth0",{"1":{"40":2}}],["autodesk",{"1":{"40":2}}],["auto",{"1":{"4":1,"8":1,"10":10,"11":3,"17":2,"20":1,"25":4,"50":4,"53":6,"54":4,"59":5}}],["axis",{"1":{"39":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":2}}],["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":30,"11":1,"21":1,"36":1,"37":1}}],["avatar",{"0":{"2":1},"1":{"0":1,"1":2,"2":43,"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}}],["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":{"10":3,"11":1,"15":1,"20":8,"22":1,"25":2,"30":1,"32":1,"43":2}}],["assist",{"1":{"42":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":1,"41":1,"42":1,"43":3,"46":1,"47":1}}],["apart",{"1":{"2":1}}],["apple",{"1":{"40":2}}],["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":4,"41":2,"42":1,"43":7,"44":28,"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}}],["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":17}}],["armannik",{"1":{"44":1}}],["arman",{"1":{"44":1}}],["array",{"1":{"22":2}}],["arrows",{"1":{"55":1}}],["arrow",{"1":{"4":1,"6":11,"14":4,"25":5,"27":3}}],["articles",{"1":{"25":1,"44":2}}],["article",{"1":{"21":4}}],["aria",{"1":{"1":50,"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":6,"42":3,"55":1,"59":1}}],["along",{"1":{"39":1}}],["align",{"1":{"35":3,"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,"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":1,"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":3,"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}}],["angular",{"1":{"40":2}}],["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":2,"43":1,"46":2,"53":1,"54":1,"59":1}}],["android",{"1":{"40":2}}],["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":8,"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,"49":1,"54":1}}],["less",{"1":{"2":1,"40":1}}],["library",{"1":{"40":1,"41":1,"43":4}}],["like",{"1":{"23":1,"33":1}}],["lightning",{"1":{"10":3,"12":1}}],["light",{"1":{"8":3,"25":2,"37":1,"38":1,"44":1,"58":3}}],["linux",{"1":{"40":2}}],["lines",{"1":{"4":1,"22":1,"25":1,"30":1,"32":1,"40":2}}],["line",{"1":{"4":6,"5":2,"12":4,"16":2,"22":2,"25":22,"29":1,"30":2,"32":2,"33":9,"40":3,"53":1,"57":12}}],["linked",{"1":{"42":1}}],["linkedin",{"1":{"40":2}}],["links",{"1":{"33":2,"42":3}}],["link",{"1":{"4":1,"7":1,"20":1,"25":2,"27":5,"42":5,"43":2}}],["li",{"1":{"2":32,"3":4,"5":18,"6":32,"8":16,"10":20,"11":4,"12":6,"13":12,"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":3,"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":105,"3":34,"4":46,"5":156,"6":208,"7":21,"8":136,"9":72,"10":131,"11":153,"12":88,"13":40,"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}}],["looking",{"1":{"40":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}}],["located",{"1":{"0":2}}],["lock",{"1":{"8":3}}],["logs",{"1":{"4":1}}],["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":1,"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":2}}],["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,"40":1,"43":2}}],["folder",{"1":{"12":1}}],["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":1,"6":1,"8":1,"14":1,"20":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":2}}],["flat",{"1":{"39":1}}],["flags",{"1":{"10":7}}],["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":2,"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":2}}],["find",{"1":{"25":3,"49":2}}],["finished",{"1":{"16":2}}],["filled",{"1":{"46":1}}],["films",{"1":{"3":6}}],["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}}],["phaus",{"1":{"44":1}}],["philipp",{"1":{"44":1}}],["php",{"1":{"40":2}}],["put",{"1":{"41":1}}],["purple",{"1":{"37":1}}],["purpose",{"1":{"1":2,"20":1,"22":1,"30":1,"32":1}}],["python",{"1":{"40":2}}],["plus",{"1":{"20":2,"33":1,"47":1}}],["please",{"1":{"11":1,"26":3}}],["playingball",{"1":{"25":3}}],["play",{"1":{"21":1}}],["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":2}}],["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}}],["pie",{"1":{"48":1}}],["pineappleionic",{"1":{"44":1}}],["pinterest",{"1":{"40":2}}],["pink",{"1":{"2":3,"17":6,"20":1,"37":4,"38":2,"41":1,"43":10,"44":9,"51":3}}],["picture",{"1":{"2":1}}],["people",{"1":{"44":1}}],["pet",{"1":{"25":1}}],["pets",{"1":{"25":1}}],["pencil",{"1":{"2":1,"34":1}}],["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}}],["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}}],["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":6,"3":2,"4":3,"5":3,"6":5,"7":17,"8":4,"9":6,"10":3,"11":4,"12":3,"13":3,"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}}],["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,"40":1}}],["product",{"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":2}}],["paste",{"1":{"40":1}}],["passed",{"1":{"25":9}}],["passwords",{"1":{"25":1}}],["password",{"1":{"11":5,"25":7}}],["passion",{"1":{"10":3}}],["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":1,"38":16,"41":13}}],["parts",{"1":{"15":1}}],["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}}],["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,"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":2}}],["html",{"1":{"0":1,"1":20,"2":4,"3":1,"4":2,"5":2,"6":3,"7":1,"8":2,"9":5,"10":2,"11":3,"12":2,"13":2,"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}}],["hand",{"1":{"21":1}}],["happen",{"1":{"5":9}}],["have",{"1":{"2":3,"6":1,"20":2,"22":1,"30":1,"32":1,"33":1,"34":1,"44":1,"52":2}}],["has",{"1":{"1":1,"20":1,"22":1,"30":1,"32":1,"34":2,"38":1}}],["heycarla",{"1":{"44":1}}],["heroicons",{"1":{"40":3}}],["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}}],["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}}],["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}}],["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":1,"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}}],["i",{"1":{"44":1,"56":15}}],["io",{"1":{"43":5,"44":6}}],["ios",{"1":{"40":2}}],["ipsum",{"1":{"33":3}}],["illustration",{"1":{"33":9}}],["illustrations",{"1":{"11":1,"21":1}}],["identity",{"1":{"37":1}}],["ids",{"1":{"23":1}}],["id",{"1":{"11":4,"18":3,"25":2,"33":16,"34":1,"35":6}}],["its",{"1":{"20":1,"22":1,"30":1,"32":1,"40":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":17,"3":6,"4":1,"5":24,"6":67,"7":2,"8":28,"9":2,"10":3,"11":3,"12":1,"13":27,"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":5,"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":174,"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":12,"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":50,"4":3,"6":23,"7":5,"8":2,"9":7,"10":18,"11":30,"12":2,"13":2,"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":3,"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,"51":3}}],["invalid",{"1":{"25":1}}],["installing",{"1":{"43":1}}],["install",{"1":{"43":3,"44":1}}],["instagram",{"1":{"40":2}}],["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,"40":1,"43":3,"57":5}}],["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}}],["d",{"1":{"25":1}}],["drph4nt0m",{"1":{"44":1}}],["dribbble",{"1":{"40":2}}],["drag",{"1":{"17":9}}],["draw",{"1":{"11":1}}],["dropbox",{"1":{"40":2}}],["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":2}}],["dots",{"1":{"33":11}}],["docker",{"1":{"40":2}}],["documentation",{"1":{"11":1,"21":2,"44":1}}],["document",{"1":{"7":1,"16":1,"17":2,"22":2,"33":12,"48":1}}],["documents",{"1":{"0":3,"25":3}}],["doing",{"1":{"24":1}}],["download",{"1":{"20":1}}],["down",{"1":{"5":6,"16":2,"25":9}}],["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":2}}],["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":2}}],["date",{"1":{"33":3}}],["databases",{"1":{"47":3}}],["database",{"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}}],["develop",{"1":{"44":1}}],["developer",{"1":{"44":6}}],["dev",{"1":{"44":2}}],["device",{"1":{"40":1,"41":1}}],["devices",{"1":{"14":1}}],["determine",{"1":{"42":1}}],["details",{"1":{"5":12,"18":1,"34":1}}],["deno",{"1":{"40":2}}],["demo",{"1":{"21":1}}],["deletion",{"1":{"11":1}}],["delete",{"1":{"0":3,"21":1,"25":2,"33":7,"44":2}}],["deselect",{"1":{"33":1}}],["desing",{"1":{"41":1}}],["designer",{"1":{"44":2}}],["designed",{"1":{"36":2,"44":1}}],["design",{"1":{"20":1,"37":3,"38":2,"41":1,"43":6,"44":13}}],["desired",{"1":{"5":16}}],["desktops",{"1":{"56":3}}],["desktop",{"1":{"17":6,"33":36,"47":1,"49":1,"53":1,"56":7}}],["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":3,"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":2}}],["distance",{"1":{"39":1}}],["distract",{"1":{"34":2}}],["discord",{"1":{"40":2,"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":2,"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":62,"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}}],["twitter",{"1":{"40":2}}],["twitch",{"1":{"40":2}}],["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}}],["tumbir",{"1":{"40":2}}],["turning",{"1":{"32":1}}],["td",{"1":{"33":152,"44":4}}],["tbody",{"1":{"33":20}}],["try",{"1":{"44":1}}],["truth",{"1":{"44":1}}],["true",{"1":{"1":35,"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}}],["tr",{"1":{"33":42}}],["tradeshift",{"1":{"40":2}}],["transform",{"1":{"57":1}}],["translated",{"1":{"40":1,"50":1,"54":1}}],["transparent",{"1":{"11":1}}],["trailing",{"1":{"25":1}}],["trash",{"1":{"20":1,"33":7}}],["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":2}}],["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}}],["template",{"1":{"53":1}}],["telegram",{"1":{"40":2}}],["technology",{"1":{"40":1}}],["team",{"1":{"2":1,"18":1,"44":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}}],["textfield",{"1":{"55":1}}],["texts",{"1":{"42":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":7,"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":3,"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}}],["types",{"1":{"1":2,"2":2,"7":2,"20":2,"25":3,"27":2,"39":2}}],["type",{"1":{"0":1,"1":8,"2":5,"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,"40":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}}],["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}}],["thumbnail",{"1":{"7":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":1,"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":6,"36":6,"37":5,"38":2,"39":6,"40":12,"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":18,"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":2,"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":7,"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":1,"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}}],["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":26,"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":1,"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":1,"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}}],["run",{"1":{"43":1}}],["runtime",{"1":{"25":9}}],["rule",{"1":{"41":1}}],["ruby",{"1":{"40":2}}],["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}}],["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":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,"55":2}}],["rel",{"1":{"43":2}}],["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":2}}],["ready",{"1":{"31":3}}],["read",{"1":{"25":1,"44":3}}],["readonly",{"1":{"25":3}}],["readability",{"1":{"20":2}}],["readable",{"1":{"1":1}}],["refresh",{"1":{"33":14}}],["refer",{"1":{"11":1,"30":1,"32":1}}],["reveal",{"1":{"5":16}}],["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}}],["recently",{"1":{"1":1}}],["reddit",{"1":{"40":2}}],["reduces",{"1":{"14":1}}],["red",{"1":{"2":3,"34":1,"37":2}}],["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}}],["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}}],["bishwajeet",{"1":{"44":1}}],["bitly",{"1":{"40":2}}],["bitbucket",{"1":{"40":2}}],["bigger",{"1":{"36":1}}],["big",{"1":{"11":4,"13":1,"20":2,"47":1}}],["bg",{"1":{"38":6}}],["build",{"1":{"44":3}}],["building",{"1":{"43":2,"44":4}}],["built",{"1":{"38":1}}],["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":23,"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":3,"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}}],["bradley",{"1":{"44":1}}],["brandonroberts",{"1":{"44":1}}],["brandon",{"1":{"44":2}}],["brand",{"1":{"37":3}}],["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}}],["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}}],["background",{"1":{"37":1,"38":2}}],["ball",{"1":{"25":4}}],["bandwidth",{"1":{"12":6}}],["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":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}}],["by",{"1":{"1":1,"8":1,"14":1,"19":1,"20":3,"24":1,"33":1,"39":1,"40":1,"41":1,"43":1,"53":1,"54":1,"59":1}}],["behave",{"1":{"47":1}}],["behavior",{"1":{"33":1}}],["behance",{"1":{"40":2}}],["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,"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":1,"36":1,"37":1,"38":1,"39":1,"40":2,"42":3,"43":1,"46":1,"54":1}}],["boards",{"1":{"47":1}}],["bolt",{"1":{"10":3,"12":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":7,"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":1,"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}}],["swift",{"1":{"40":2}}],["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":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}}],["slack",{"1":{"40":2}}],["skype",{"1":{"40":2}}],["same",{"1":{"50":6,"53":23,"54":10,"57":17}}],["sachan",{"1":{"44":1}}],["salesforce",{"1":{"40":2}}],["safari",{"1":{"40":2,"55":1}}],["safe",{"1":{"8":3}}],["sass",{"1":{"38":3,"41":2}}],["sandler",{"1":{"33":18}}],["solve",{"1":{"53":1}}],["solid",{"1":{"21":2,"40":1,"53":6}}],["software",{"1":{"44":9}}],["soften",{"1":{"36":2}}],["source",{"1":{"43":1,"44":6}}],["social",{"1":{"40":1}}],["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":2}}],["special",{"1":{"21":1,"37":1,"41":1}}],["specific",{"1":{"16":1,"17":1,"20":1,"36":1,"37":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":2,"3":12,"4":8,"5":36,"6":48,"7":4,"8":42,"9":38,"10":10,"11":34,"12":32,"13":12,"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}}],["svg",{"1":{"10":7,"25":2,"40":1}}],["schofield",{"1":{"44":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":2,"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}}],["shechter",{"1":{"44":1}}],["shmuel",{"1":{"44":1}}],["shades",{"1":{"37":2}}],["shadows",{"1":{"39":3}}],["shadow",{"1":{"17":3,"39":14}}],["sharp",{"1":{"36":1}}],["shrink",{"1":{"17":2,"25":2,"53":3}}],["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,"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}}],["surface",{"1":{"39":2}}],["surfaces",{"1":{"39":1}}],["suresh",{"1":{"44":1}}],["sure",{"1":{"20":1,"22":1,"30":1,"32":1,"40":2}}],["support",{"1":{"38":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}}],["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,"40":1,"43":1,"44":3,"54":1,"55":1,"59":1}}],["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}}],["sizing",{"1":{"53":2}}],["sizes",{"1":{"2":4,"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":24,"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":{"40":1,"43":1}}],["still",{"1":{"28":1}}],["sticky",{"1":{"1":43,"33":5,"54":9}}],["storage",{"1":{"12":3,"44":1}}],["stripe",{"1":{"40":2}}],["string",{"1":{"2":1}}],["stretch",{"1":{"9":7,"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}}],["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,"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":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}}],["system",{"1":{"1":2,"34":1,"37":2,"42":1,"43":1,"44":3,"51":1}}],["self",{"1":{"53":3}}],["selector",{"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,"40":1}}],["selected",{"1":{"0":3,"14":1,"15":3,"30":1,"33":1,"34":1,"37":2,"40":1,"47":1,"48":1,"58":1}}],["semantics",{"1":{"42":1}}],["semibold",{"1":{"42":6}}],["semi",{"1":{"11":1}}],["serious",{"1":{"36":1}}],["services",{"1":{"8":9}}],["sensitive",{"1":{"25":1}}],["sentences",{"1":{"20":1}}],["sent",{"1":{"1":45}}],["set",{"1":{"22":2,"25":9,"30":1,"32":1,"35":9,"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":9}}],["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":24,"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":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}}],["guide",{"1":{"44":1}}],["guarantees",{"1":{"42":1}}],["google",{"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}}],["growing",{"1":{"44":1}}],["grouping",{"1":{"27":1}}],["group",{"1":{"2":21,"21":1,"45":1,"48":1}}],["groups",{"1":{"2":2}}],["green",{"1":{"2":7,"34":1,"37":2}}],["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":3,"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}}],["gif",{"1":{"44":1}}],["gitlab",{"1":{"40":2}}],["git",{"1":{"40":2,"44":2}}],["github",{"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":3,"41":1,"42":1,"43":1,"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}}],["give",{"1":{"1":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}}],["kind",{"1":{"45":1}}],["kingdom",{"1":{"10":1}}],["kodumbeats",{"1":{"44":1}}],["kotlin",{"1":{"40":2}}],["kristin",{"1":{"44":4}}],["kb",{"1":{"33":27}}],["kbd",{"1":{"26":7}}],["keys",{"1":{"25":9,"35":9}}],["keyword",{"1":{"23":3}}],["key",{"1":{"21":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":110,"3":36,"4":49,"5":159,"6":212,"7":23,"8":139,"9":78,"10":134,"11":156,"12":91,"13":43,"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":2}}],["css3",{"1":{"40":2}}],["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}}],["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":3,"40":3,"44":2,"47":1,"53":6,"57":2}}],["c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi13g73c9ge4e2u5wi",{"1":{"29":3}}],["custom",{"1":{"25":7,"46":1}}],["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":1,"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}}],["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}}],["chrome",{"1":{"55":1}}],["choose",{"1":{"17":9,"25":1,"34":2}}],["choice",{"1":{"5":12}}],["chart",{"1":{"12":2,"48":1}}],["change",{"1":{"1":1,"25":1,"33":1}}],["chenparnasa",{"1":{"44":1}}],["chen",{"1":{"44":1}}],["checked",{"1":{"22":2,"30":3,"32":3}}],["check",{"1":{"8":3,"9":2,"16":1,"21":1,"25":1,"27":3,"34":1,"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}}],["cheveron",{"1":{"5":6,"14":2,"16":2,"20":2,"25":9,"49":2}}],["child",{"1":{"1":5,"10":1,"18":1,"33":2,"47":1,"53":3}}],["capitalize",{"1":{"57":2}}],["carla",{"1":{"44":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":2,"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}}],["categories",{"1":{"34":1}}],["case",{"1":{"20":1,"25":3,"33":1}}],["cases",{"1":{"6":1,"7":2,"20":1,"24":1,"27":2,"41":2}}],["cameron",{"1":{"3":6}}],["call",{"1":{"1":31,"20":2}}],["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,"40":1,"41":1,"42":2,"45":1,"46":2,"54":3}}],["cancel",{"1":{"0":3,"16":2,"20":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":59,"3":18,"4":19,"5":78,"6":108,"7":12,"8":64,"9":36,"10":55,"11":80,"12":41,"13":24,"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}}],["click",{"1":{"49":1}}],["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}}],["clicking",{"1":{"15":1,"22":1,"30":1,"32":1}}],["clock",{"1":{"9":2}}],["closed",{"1":{"8":3}}],["close",{"1":{"1":15,"11":6,"16":2}}],["clear",{"1":{"5":9,"25":9,"42":1}}],["cog",{"1":{"48":1}}],["cognitive",{"1":{"14":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":7,"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}}],["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":{"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}}],["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":3,"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}}],["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/apps/pink/src/components/homepage/TryItOut.svelte b/apps/pink/src/components/homepage/TryItOut.svelte index 1f5820aeca..91f6f390e7 100644 --- a/apps/pink/src/components/homepage/TryItOut.svelte +++ b/apps/pink/src/components/homepage/TryItOut.svelte @@ -31,7 +31,7 @@ const codes: Record> = { - card: `
Kristin Watson

Kristin Watson

kristin.watson@appwrite.io

`, + card: `
Kristin Watson

Kristin Watson

kristin.watson@appwrite.io

`, form: `
Edit Profile
diff --git a/apps/pink/src/components/layout/Cover.astro b/apps/pink/src/components/layout/Cover.astro index daeb259f31..5dfa18e65d 100644 --- a/apps/pink/src/components/layout/Cover.astro +++ b/apps/pink/src/components/layout/Cover.astro @@ -17,7 +17,7 @@ const showBreadcrumb = {frontmatter?.class}
{frontmatter?.description && -

+

{frontmatter.description}

} diff --git a/apps/pink/src/layouts/Layout.astro b/apps/pink/src/layouts/Layout.astro index 73da828e8f..098a8d42bd 100644 --- a/apps/pink/src/layouts/Layout.astro +++ b/apps/pink/src/layouts/Layout.astro @@ -153,31 +153,31 @@ const titleFallback = "Pink Design - Appwrite's Design System"; ) } +
+
+ +
+
+
    +
  • + ⓒ 2023 Appwrite. All rights reserved. +
    • +
+
+
-
-
- -
-
-
    -
  • - ⓒ 2023 Appwrite. All rights reserved. -
    • -
-
-