### Installing Pink Design CSS Library via NPM Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/getting-started.mdx This command installs the Pink Design CSS library as an NPM package, making it available in the project's node_modules directory. This is the standard method for integrating Pink Design into JavaScript-based projects. ```bash npm install "@appwrite.io/pink" ``` -------------------------------- ### Importing Pink Design CSS Library in JavaScript Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/getting-started.mdx After installing Pink Design via NPM, this JavaScript snippet shows how to import the CSS library and its optional icons into your project's JavaScript files. This ensures the styles are applied when the application runs. ```javascript import "@appwrite.io/pink"; // optionally, add icons import "@appwrite.io/pink-icons"; ``` -------------------------------- ### Common Astro Project Commands Source: https://github.com/appwrite/pink/blob/main/apps/pink/README.md This section lists essential `npm` commands for managing an Astro project. These commands cover installing dependencies, starting a local development server, building the production site, previewing the build, and general usage of the Astro command-line interface. ```Shell npm install npm run dev npm run build npm run preview npm run astro ... npm run astro --help ``` -------------------------------- ### Including Pink Design CSS Library via CDN in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/getting-started.mdx This snippet demonstrates how to include the Pink Design CSS library and optionally its icons into an HTML project by adding tags within the section of the HTML file. This method is suitable for quick integration without a build step. ```html ``` -------------------------------- ### Installing Pink Design via NPM Source: https://github.com/appwrite/pink/blob/main/README.md This command installs the Pink Design CSS library using npm, making it available for use in your project. It's the recommended method for projects using a package manager. ```bash npm install "@appwrite.io/pink" ``` -------------------------------- ### Installing Pink Design via NPM Source: https://github.com/appwrite/pink/blob/main/packages/ui/README.md This command installs the Pink Design CSS library as a package using npm. It's the first step to integrate Pink Design into a JavaScript project, making the library available for import and use. ```bash npm install "@appwrite.io/pink" ``` -------------------------------- ### SCSS Partial Example with Responsive Padding Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/foundations/responsive.mdx This snippet provides an example of an SCSS partial, demonstrating how to apply responsive padding to an element. It sets a default padding for all screen sizes and then overrides it for medium and larger screens using the $break2open variable, showcasing a practical application of responsive design. ```html ``` -------------------------------- ### Setting Up Pink Design Development Environment Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This shell script provides the necessary commands to set up the Pink Design development environment. It clones the repository, navigates into the project directory, and installs all required Node.js dependencies using npm. ```Shell git clone https://github.com/appwrite/pink.git cd pink npm install ``` -------------------------------- ### Example Branch Naming Convention Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This snippet provides an example of the recommended branch naming convention for contributions to Pink Design. It follows the format `TYPE-ISSUE_ID-DESCRIPTION`, illustrating how to combine the change type, issue number, and a brief description. ```Shell doc-548-submit-a-pull-request-section-to-contribution-guide ``` -------------------------------- ### Installing Pink Design Icons (NPM, Bash) Source: https://github.com/appwrite/pink/blob/main/packages/icons/README.md This `npm install` command adds the `@appwrite.io/pink-icons` package to your project's dependencies. It's the recommended method for integrating the icon library into JavaScript-based applications, making the icons available for import and use. ```bash npm install "@appwrite.io/pink-icons" ``` -------------------------------- ### Markdown Example for Comparison Directive Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This Markdown snippet demonstrates the usage of custom directives like `COMPARISON`, `IMG`, `DO`, and `DONT` within Pink Design documentation. These directives are used to display best practices, showing both correct ('DO') and incorrect ('DONT') examples with associated images and descriptions. ```Markdown ::::COMPARISON ::IMG[/images/button-do-1.png, description] :::DO Increase recognition by using icons with universal meaning. Increase readability by keeping text short and using uppercase letter only for the first word. ::: ::IMG[/images/button-dont-1.png, description] :::DONT Avoid using specific icons, uppercase in every word and long sentences. ::: :::: ``` -------------------------------- ### Creating a Basic Drop List (Default Alignment) - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/drop-list.mdx This HTML snippet demonstrates a basic drop list with default alignment (block start + inline start). It includes a button to trigger the drop list and a section containing two list items, each with a button. ```HTML
``` -------------------------------- ### Aligning Text to Start with u-text-start SCSS Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/text.mdx This utility class aligns text to the start of its container (left for LTR languages). The SCSS definition directly translates to the CSS output. ```SCSS text-align: start!important; ``` -------------------------------- ### Starting Pink Design Development Server Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This command initiates the development server for Pink Design components, providing an auto-reloading preview. It's crucial to run `npm run build` on `ui` and `icons` packages first to ensure styles and icons are up-to-date, as the development server uses the `dist/` folder. ```Shell npm run dev ``` -------------------------------- ### Compiled CSS Output for Responsive Styles Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/foundations/responsive.mdx This snippet shows the compiled CSS output corresponding to the SCSS partial example. It illustrates how SCSS variables and media queries are translated into standard CSS, demonstrating the final, browser-interpretable code for applying responsive padding based on screen width. ```html ``` -------------------------------- ### Creating a New Git Branch Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This Git command creates and switches to a new branch from the current default branch. The example shows how to name the branch according to the project's convention. ```Shell $ git checkout -b [name_of_your_new_branch] ``` -------------------------------- ### Creating a Drop List with Default Arrow Placement - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/drop-list.mdx This HTML snippet demonstrates a drop list with the default arrow placement (start). It shows the basic structure of a drop list with a button and two selectable items. ```HTML
``` -------------------------------- ### Implementing Responsive Styles with CSS Media Queries Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/foundations/responsive.mdx This snippet demonstrates how to apply responsive styles using standard CSS media queries. It shows examples for targeting all screens, small screens, small and medium screens, medium and larger screens, and a combination of small and large screens, adjusting padding based on screen size. ```html ``` -------------------------------- ### Creating Informative Tags in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/tag.mdx This snippet demonstrates how to create various informative tags using different Appwrite system colors and icons. Each tag type (default, info, success, warning, danger) is styled to convey specific information or status to the user. It also shows a 'Beta' tag example. ```HTML
default
info
success
warning
error
Beta
``` -------------------------------- ### Applying Inline Start Padding with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies logical inline start padding to an element. The `$s` variable represents a spacing token value in pixels, converted to REM units by `pxToRem` for consistent leading horizontal spacing. ```SCSS padding-inline-start: pxToRem($s) !important; ``` ```CSS padding-inline-start: #{pxToRem($s)}rem !important; ``` -------------------------------- ### Applying Block Start Padding with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies logical block start padding to an element. The `$s` variable represents a spacing token value in pixels, converted to REM units by `pxToRem` for consistent leading vertical spacing. ```SCSS padding-block-start: pxToRem($s) !important; ``` ```CSS padding-block-start: #{pxToRem($s)}rem !important; ``` -------------------------------- ### Applying Inline Start Margin with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies logical inline start margin to an element. The `$s` variable represents a spacing token value in pixels, converted to REM units by `pxToRem` for consistent leading horizontal spacing. ```SCSS margin-inline-start: pxToRem($s) !important; ``` ```CSS margin-inline-start: #{pxToRem($s)}rem !important; ``` -------------------------------- ### Implementing Basic and Aligned Tooltips with HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/tooltip.mdx This snippet demonstrates how to create tooltips using HTML and specific CSS classes. It includes examples of a standard tooltip, a tooltip integrated with a tag component, and a tooltip positioned at the bottom using the `is-bottom` modifier class. The `tooltip` class defines the interactive element, while `tooltip-popup` contains the tooltip's content. ```HTML ``` -------------------------------- ### Implementing Basic Secondary Tabs (HTML) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/secondary-tabs.mdx This snippet demonstrates the basic structure of secondary tabs using `secondary-tabs`, `secondary-tabs-item`, and `secondary-tabs-button` classes. It includes an example of a disabled tab button to show different states. This structure allows users to navigate between content sections. ```HTML ``` -------------------------------- ### Including Pink Design Icons (CDN, HTML) Source: https://github.com/appwrite/pink/blob/main/packages/icons/README.md This HTML `` tag integrates the Pink Design icon library directly from a Content Delivery Network (CDN). Placing this in the `` section of your HTML file provides immediate access to the icon styles without local installation. ```html ``` -------------------------------- ### Empty State Card Best Practice - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/card.mdx Provides a comprehensive example of a card designed for an empty state, incorporating an image, heading, descriptive text, and action buttons. It demonstrates the effective use of various utility classes for layout, alignment, and responsiveness within a card component. ```HTML

Create your first file to get started.

Need a hand? Check out our documentation.

Documentation
``` -------------------------------- ### Implementing Collapsible Info Items in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/collapsible.mdx This HTML snippet demonstrates the structure for a list of collapsible items. Each item uses a 'details' tag for expand/collapse functionality, with a 'summary' for the visible header and a 'div' for the hidden content. It includes 'is-info' for informational styling and an example of a 'is-disabled' state. ```HTML
``` -------------------------------- ### Stacking Multiple Boxes - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/box.mdx Illustrates how to stack multiple box elements using the `boxes-wrapper` class. This setup ensures that middle boxes in the stack appear without a border radius, creating a visually continuous stack. ```html
Top Box
Middle Box
Middle Box
Bottom Box
``` -------------------------------- ### Basic Interactive Text Output with Copy and Show Buttons (HTML) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/output.mdx This snippet demonstrates the fundamental structure for an interactive text output element. It includes examples for displaying visible text with a hidden copy button and for displaying masked text with visible show and copy buttons, illustrating common interactive states. ```HTML
visible text
••••••
``` -------------------------------- ### Implementing Interactive Tags in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/tag.mdx This snippet illustrates the creation of interactive tags using HTML buttons and anchor tags. It includes examples of a standard interactive tag, a selected interactive tag, and a disabled interactive tag, typically used for actions like copying or editing IDs. ```HTML Interactive ``` -------------------------------- ### Applying SCSS Breakpoints for Specific Screen Combinations Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/foundations/responsive.mdx This snippet demonstrates how to target specific combinations of screen sizes using SCSS breakpoint variables. It shows examples for applying styles only to small screens, small and medium screens, only medium screens, or a combination of small and large screens, by comma-separating the breakpoint variables within a media query. ```html ``` -------------------------------- ### Configuring Element Position and Inset Properties (CSS/SCSS) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/position.mdx Details utility classes for controlling an element's `position` (relative, absolute, fixed, static) and its `inset` properties (top, bottom, left, right, inline, block). Includes examples of `pxToRem` conversions for precise spacing. ```SCSS position: relative!important; position: absolute!important; position: fixed!important; position: static!important; inset: 0!important; inset-inline: 0!important; inset-inline-start: pxToRem(1)!important; inset-inline-end: pxToRem(1)!important; inset-block-start: pxToRem(1)!important; inset-block-end: pxToRem(1)!important; ``` ```CSS position: relative!important; position: absolute!important; position: fixed!important; position: static!important; inset: 0!important; inset-inline: 0!important; inset-inline-start: 0.0625rem!important; inset-inline-end: 0.0625rem!important; inset-block-start: 0.0625rem!important; inset-block-end: 0.0625rem!important; ``` -------------------------------- ### Interactive Text Output with Buttons on Top (HTML) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/output.mdx This example showcases how to modify the layout of the interactive text output to position the action buttons at the top of the element. It uses the `is-buttons-on-top` class for styling and `u-trim-start` for text truncation, suitable for compact displays. ```HTML
This is the visible text which is very long
``` -------------------------------- ### Initializing JavaScript Object for Function Source: https://github.com/appwrite/pink/blob/main/apps/kitchensink/cover-frame-2.html This snippet illustrates the initialization of a JavaScript object, `blahFunction`, typically representing a data structure or configuration at the start of a process. It assigns a simple object literal with a `firstName` property, indicating an initial state or default value. ```JavaScript blahFunction = { firstName: "hello" } ``` -------------------------------- ### Importing Pink Design in JavaScript Source: https://github.com/appwrite/pink/blob/main/packages/ui/README.md After installing Pink Design via npm, this JavaScript code imports the main CSS library and optionally the Pink Icons library into your project. This makes the Pink Design styles and icons available for use in your web application's build process. ```javascript import "@appwrite.io/pink"; // optionally, add icons import "@appwrite.io/pink-icons"; ``` -------------------------------- ### Implementing Success Alert (Standard) HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/alert.mdx This HTML snippet displays a standard success alert component, indicated by the `is-success` class. It includes a close button, an info icon (though typically a success icon would be used, this example uses info), a title, a message, and two action buttons, confirming successful task completion. ```HTML
This is a default alert

Some description about the alert sent to the user.

``` -------------------------------- ### Implementing a Tabbed Text Editor UI in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/tabs-text-editor.mdx This HTML snippet defines the structure for a tabbed text editor component. It includes navigation tabs, a main content area with a textarea for text input, and action buttons for downloading and copying the content. The textarea is pre-filled with an example value, demonstrating its initial state. ```HTML
``` -------------------------------- ### Trimming Text from Start with u-trim-start SCSS/CSS Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/text.mdx This utility class trims text from the start (right-to-left) with an ellipsis, useful for languages or specific UI needs. It combines trimming with RTL direction and right alignment. ```SCSS @include trim; direction:rtl; text-align:right; ``` ```CSS text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; direction: rtl; text-align: right; ``` -------------------------------- ### Building Pink Design Project Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This command builds the entire Pink Design project, including all dependencies located in the `packages/` directory. It compiles and prepares the project for deployment or distribution. ```Shell npm run build ``` -------------------------------- ### Applying Block Start Margin with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies logical block start margin to an element. The `$s` variable represents a spacing token value in pixels, converted to REM units by `pxToRem` for consistent leading vertical spacing. ```SCSS margin-block-start: pxToRem($s) !important; ``` ```CSS margin-block-start: #{pxToRem($s)}rem !important; ``` -------------------------------- ### Creating Numeric Lists (HTML) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/list.mdx This snippet demonstrates how to create an ordered list with a numeric prefix for each item using the `numeric-list` and `numeric-list-item` classes. This is ideal for displaying step-by-step instructions or ranked content. ```html
  1. Numeric List Item
  2. Numeric List Item
  3. Numeric List Item
``` -------------------------------- ### Creating List Items with Icons and Interactive Elements (HTML) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/list.mdx This snippet demonstrates how to create a standard list using the `list` and `list-item` classes. Each list item includes an icon and can contain plain text, a link, or a button, showcasing interactive list elements within the Appwrite console styling. ```html ``` -------------------------------- ### Astro Project Directory Structure Source: https://github.com/appwrite/pink/blob/main/apps/pink/README.md This snippet illustrates the standard directory structure of an Astro project, showing the typical locations for public assets, source files, and the main `package.json` configuration file. Astro looks for page files in `src/pages/` and components are often placed in `src/components/`. ```Filesystem / ├── public/ ├── src/ │ └── pages/ │ └── index.astro └── package.json ``` -------------------------------- ### Implementing Grid Header with HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/layout/grid-header.mdx This HTML snippet demonstrates the usage of `grid-header` and related column classes to create a responsive header. It shows how elements are structured within the header, including a title, column selection, view toggles, and a create button, adapting layout based on screen size through implied CSS styling. ```HTML

Databases

``` -------------------------------- ### Auto Block Start Margin with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies `margin-block-start: auto` to an element, used for pushing an element to the bottom of its block direction within a flex or grid container. ```SCSS margin-block-start: auto !important; ``` ```CSS margin-block-start: auto !important; ``` -------------------------------- ### Auto Inline End Margin with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies `margin-inline-end: auto` to an element, used for pushing an element to the start of its inline direction within a flex or grid container. ```SCSS margin-inline-end: auto !important; ``` ```CSS margin-inline-end: auto !important; ``` -------------------------------- ### Demonstrating Responsive HTML Classes Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/responsive.mdx This HTML snippet demonstrates the usage of various responsive utility classes (.is-only-mobile, .is-only-tablet, .is-only-desktop, .is-not-mobile, .is-not-desktop) to control element visibility across different screen sizes. It illustrates how elements can be conditionally displayed or hidden based on the viewport dimensions. ```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

``` -------------------------------- ### Auto Inline Start Margin with SCSS Utility Class Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/utilities/box-model.mdx This SCSS utility class applies `margin-inline-start: auto` to an element, used for pushing an element to the end of its inline direction within a flex or grid container. ```SCSS margin-inline-start: auto !important; ``` ```CSS margin-inline-start: auto !important; ``` -------------------------------- ### Implementing a Selectable Free Plan Card in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/label-card.mdx This HTML snippet demonstrates a selectable 'Free plan' card, similar to the Pro plan, but highlighting its 'Totally free' nature. It uses a label, radio input, and utility classes for layout and styling, providing a clear visual representation of a free tier option. ```HTML ``` -------------------------------- ### Applying Info State to Inline Tag - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/inline-tag.mdx This example shows how to apply the `is-info` class to an inline tag, which typically renders it with a blue color, indicating an informational state. This is useful for highlighting specific counts or labels. ```html 2 ``` -------------------------------- ### Basic HTML Switch Implementation Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/switch.mdx This snippet demonstrates the basic implementation of HTML switches using checkbox inputs with the 'switch' class. It shows both an unchecked and a checked switch, illustrating the default appearance and functionality. ```HTML ``` -------------------------------- ### Basic Collapsible List HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/collapsible.mdx This HTML snippet demonstrates a basic implementation of a collapsible list using `ul`, `li`, `details`, `summary`, and `div` elements. Each `collapsible-item` contains a `collapsible-wrapper` with a `collapsible-button` (summary) and `collapsible-content`. ```HTML ``` -------------------------------- ### Importing Pink Design Icons (JavaScript) Source: https://github.com/appwrite/pink/blob/main/packages/icons/README.md This JavaScript import statement includes the Pink Design icon library into your application's bundle. After installation, this line ensures that the icon styles and fonts are loaded and accessible throughout your project. ```js import "@appwrite.io/pink-icons"; ``` -------------------------------- ### Integrating Inline Tag with Buttons - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/inline-tag.mdx This section provides examples of incorporating inline tags within secondary and text buttons. It demonstrates how to nest the inline tag within the button's structure, showing both enabled and disabled states for each button type. ```html ``` -------------------------------- ### Implementing List Items with Check Icons (HTML) Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/list.mdx This HTML snippet illustrates the use of the `list` and `list-item` classes to create a list where each item is prefixed with a checkmark icon. It's suitable for displaying a series of completed or verified items. ```html ``` -------------------------------- ### Including Pink Design via CDN in HTML Source: https://github.com/appwrite/pink/blob/main/README.md This HTML snippet adds the Pink Design CSS library and optionally its icons to your web page directly from a CDN. This method is suitable for quick integration or projects without a build step, by placing the links in the section. ```html ``` -------------------------------- ### Small Loader - HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/elements/loader.mdx Illustrates how to render a smaller version of the loader by applying the 'is-small' class. This is useful for contexts where a less prominent or space-constrained indicator is needed. ```HTML
``` -------------------------------- ### Pink Design Repository Structure Source: https://github.com/appwrite/pink/blob/main/CONTRIBUTING.md This snippet illustrates the directory structure of the Pink Design repository, highlighting key folders for applications (apps/pink) and packages (packages/icons, packages/ui). It provides an overview of where different types of files (components, helpers, pages, SVGs, SCSS) are located within the project. ```Text ├── apps │ └── pink //Pink Design repo │ ├── public │ │ ├── comparison //Images used in comparison separated in dark and light │ │ │ ├── dark │ │ │ └── light │ │ └── images //Image in use in the pages │ └── src │ ├── components //General components folder │ │ ├── defaults //Components used to overwrite markdown defaults │ │ ├── homepage //Components used in the homepage │ │ └── layout //Components used in the layout │ ├── helpers //Helpers functions │ ├── layout //Layout folder │ └── pages //Pages separated by category │ ├── components │ ├── elements │ ├── foundations │ ├── layout │ ├── utilities │ ├── _autoimports.ts //List of components autoimported in all the pages │ ├── _components.ts //Components used to overwrite markdown defaults │ ├── _directives.ts //List of custom components available in mdx │ ├── _frontmatter.yaml //Default import in the frontmatter for all the pages │ ├── getting-started.mdx //MDX file │ └── index.astro //Astro page └── packages ├── icons │ └── svg //Folder containing all the SVGs └── ui └── src //Scss separated by folder ├── 1-css-variables ├── 2-resets ├── 5-animations ├── 6-elements ├── 7-components ├── 8-grids ├── 10-themes └── abstract ``` -------------------------------- ### Displaying File Previews in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/file-preview.mdx This HTML snippet demonstrates how to render two types of file previews: one for an image file and another for a non-image file where a preview is unavailable. It utilizes specific CSS classes like 'file-preview', 'is-with-image', and 'is-no-file' to apply appropriate styling and content based on the file type. ```HTML

Preview not available

 ``` -------------------------------- ### Applying Different Sizes to Appwrite Avatars in HTML Source: https://github.com/appwrite/pink/blob/main/apps/pink/src/pages/components/avatar.mdx This HTML example illustrates how to apply various predefined sizes to Appwrite avatars using specific CSS classes like `is-size-x-small`, `is-size-small`, `is-size-medium`, `is-size-large`, and `is-size-x-large`. Each `div` element represents a text avatar with a distinct size. ```HTML
aa
aa
aa
aa
aa
```