|
|
|
@ -0,0 +1,508 @@
|
|
|
|
|
|
|
|
# Gemini CLI Configuration for Project Components
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
This document provides context and instructions for the Gemini CLI when working with this project.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Project Context
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
This project utilizes a `components/` directory at its root, which contains a collection of Tailwind CSS-based HTML partials. These components are organized hierarchically by their intended purpose (e.g., `application_ui`, `marketing`).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**The files within the `components/` directory are intended as a library of examples and building blocks.** They should **never be directly modified or edited** by the Gemini CLI.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Development Sandbox
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- **All file modifications must be confined to the `./playground/src/` directory**. This is the designated area for all development and coding work. The Gemini CLI must not, under any circumstances, attempt to create, modify, or delete files outside of the `./playground/src/`.
|
|
|
|
|
|
|
|
- Gemini does not need to setup the `./playground` directory structure. The user will have done that before running Gemini.
|
|
|
|
|
|
|
|
- Only modifiy the `./playground/src/css/input.css` and `./playground/src/index.html`. All other files will be created and maintained by the user.
|
|
|
|
|
|
|
|
- The `./playground/src/index.html` has a valid structure for the project layout. When the user asks Gemini to make changes to it, Gemini should consider the prompt to be made in the context of changing the index.html body unless explicitly called out in the user's input prompt.
|
|
|
|
|
|
|
|
- The `./playground/src/main.css` will be generated by the user before viewing the changes made by the agent. No tailwindcss cli command needs to be run by Gemini.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Reference file structure for a new ./playground project.
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
./playground/
|
|
|
|
|
|
|
|
├── README.md
|
|
|
|
|
|
|
|
└── src
|
|
|
|
|
|
|
|
├── css
|
|
|
|
|
|
|
|
│ └── input.css
|
|
|
|
|
|
|
|
├── index.html
|
|
|
|
|
|
|
|
└── vendor
|
|
|
|
|
|
|
|
└── js
|
|
|
|
|
|
|
|
└── tailwindcss-elements.1.0.0.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
5 directories, 4 files
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Component Utilization Strategy
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
When generating or modifying HTML, the Gemini CLI should refer to the examples provided in the `components/` directory to understand patterns, styles, and structures for various UI elements.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**For any request involving a UI element that closely resembles a component in `components/`, the CLI should:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. **Identify relevant component(s):** Search the `components/` directory for the most appropriate and similar HTML partials.
|
|
|
|
|
|
|
|
2. **Adapt and integrate:** Extract the necessary HTML and Tailwind classes from the identified component(s) and adapt them to fit the specific requirements of the user's request. This involves:
|
|
|
|
|
|
|
|
* Copying and pasting relevant HTML structures.
|
|
|
|
|
|
|
|
* Applying or adjusting Tailwind classes as needed.
|
|
|
|
|
|
|
|
* Modifying content (text, images, links) to match the request.
|
|
|
|
|
|
|
|
* Combining elements from multiple components if necessary to fulfill a complex request.
|
|
|
|
|
|
|
|
3. **Generate new code:** The adapted code should be generated in the target file specified by the user's request, *not* within the `components/` directory.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Component Directory Structure
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The following is an overview of the `components/` directory structure for reference:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
components/
|
|
|
|
|
|
|
|
├── application_ui
|
|
|
|
|
|
|
|
│ ├── application_shells
|
|
|
|
|
|
|
|
│ │ ├── multi_column_layouts
|
|
|
|
|
|
|
|
│ │ │ ├── constrained_three_column.html
|
|
|
|
|
|
|
|
│ │ │ ├── constrained_with_sticky_columns.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_secondary_column_on_right.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_three_column.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_with_narrow_sidebar_and_header.html
|
|
|
|
|
|
|
|
│ │ │ └── full_width_with_narrow_sidebar.html
|
|
|
|
|
|
|
|
│ │ ├── sidebar_layouts
|
|
|
|
|
|
|
|
│ │ │ ├── brand_sidebar.html
|
|
|
|
|
|
|
|
│ │ │ ├── brand_sidebar_with_headers.html
|
|
|
|
|
|
|
|
│ │ │ ├── dark_sidebar.html
|
|
|
|
|
|
|
|
│ │ │ ├── dark_sidebar_with_header.html
|
|
|
|
|
|
|
|
│ │ │ ├── light_sidebar.html
|
|
|
|
|
|
|
|
│ │ │ ├── light_sidebar_with_constrained_content_area.html
|
|
|
|
|
|
|
|
│ │ │ ├── light_sidebar_with_header.html
|
|
|
|
|
|
|
|
│ │ │ └── light_sidebar_with_off_white_background.html
|
|
|
|
|
|
|
|
│ │ └── stacked_layouts
|
|
|
|
|
|
|
|
│ │ ├── branded_nav_with_compact_page_header.html
|
|
|
|
|
|
|
|
│ │ ├── branded_nav_with_white_page_header.html
|
|
|
|
|
|
|
|
│ │ ├── brand_nav_with_overlap.html
|
|
|
|
|
|
|
|
│ │ ├── dark_nav_with_compact_white_page_header.html
|
|
|
|
|
|
|
|
│ │ ├── dark_nav_with_overlap.html
|
|
|
|
|
|
|
|
│ │ ├── dark_nav_with_white_page_header.html
|
|
|
|
|
|
|
|
│ │ ├── light_nav_on_gray_background.html
|
|
|
|
|
|
|
|
│ │ ├── light_nav_with_bottom_border.html
|
|
|
|
|
|
|
|
│ │ └── two_row_navigation_with_overlap.html
|
|
|
|
|
|
|
|
│ ├── data_display
|
|
|
|
|
|
|
|
│ │ ├── calendars
|
|
|
|
|
|
|
|
│ │ │ ├── borderless_side_by_side.html
|
|
|
|
|
|
|
|
│ │ │ ├── bordlerless_stacked.html
|
|
|
|
|
|
|
|
│ │ │ ├── day_view.html
|
|
|
|
|
|
|
|
│ │ │ ├── double.html
|
|
|
|
|
|
|
|
│ │ │ ├── month_view.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_with_meetings.html
|
|
|
|
|
|
|
|
│ │ │ ├── week_view.html
|
|
|
|
|
|
|
|
│ │ │ └── year_view.html
|
|
|
|
|
|
|
|
│ │ ├── description_lists
|
|
|
|
|
|
|
|
│ │ │ ├── left_aligned.html
|
|
|
|
|
|
|
|
│ │ │ ├── left_aligned_in_card.html
|
|
|
|
|
|
|
|
│ │ │ ├── left_aligned_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── left_aligned_striped.html
|
|
|
|
|
|
|
|
│ │ │ ├── left_aligned_with_inline_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_hidden_labels.html
|
|
|
|
|
|
|
|
│ │ │ └── two_column.html
|
|
|
|
|
|
|
|
│ │ └── stats
|
|
|
|
|
|
|
|
│ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ ├── simple_in_cards.html
|
|
|
|
|
|
|
|
│ │ ├── with_brand_icon.html
|
|
|
|
|
|
|
|
│ │ ├── with_shared_borders.html
|
|
|
|
|
|
|
|
│ │ └── with_trending.html
|
|
|
|
|
|
|
|
│ ├── elements
|
|
|
|
|
|
|
|
│ │ ├── avatars
|
|
|
|
|
|
|
|
│ │ │ ├── avatar_group_stacked_botton_to_top.html
|
|
|
|
|
|
|
|
│ │ │ ├── avatar_group_stacked_top_to_bottom.html
|
|
|
|
|
|
|
|
│ │ │ ├── circular_avatars.html
|
|
|
|
|
|
|
|
│ │ │ ├── circular_avatars_with_bottom_notification.html
|
|
|
|
|
|
|
|
│ │ │ ├── circular_avatars_with_placeholder_icon.html
|
|
|
|
|
|
|
|
│ │ │ ├── circular_avatars_with_placeholder_initials.html
|
|
|
|
|
|
|
|
│ │ │ ├── circular_avatars_with_top_notification.html
|
|
|
|
|
|
|
|
│ │ │ ├── rounded_avatars.html
|
|
|
|
|
|
|
|
│ │ │ ├── rounded_avatars_with_bottom_notification.html
|
|
|
|
|
|
|
|
│ │ │ ├── rounded_avatars_with_top_notification.html
|
|
|
|
|
|
|
|
│ │ │ └── with_text.html
|
|
|
|
|
|
|
|
│ │ ├── badges
|
|
|
|
|
|
|
|
│ │ │ ├── flat.html
|
|
|
|
|
|
|
|
│ │ │ ├── flat_pill.html
|
|
|
|
|
|
|
|
│ │ │ ├── flat_pill_with_dot.html
|
|
|
|
|
|
|
|
│ │ │ ├── flat_with_dot.html
|
|
|
|
|
|
|
|
│ │ │ ├── flat_with_remove_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── pill_with_border_and_dot.html
|
|
|
|
|
|
|
|
│ │ │ ├── pill_with_border.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_flat.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_flat_pill.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_flat_pill_with_dot.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_flat_with_dot.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_pill_with_border.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_with_border.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_border_and_dot.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_border_and_dot_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_border_and_remove_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_border.html
|
|
|
|
|
|
|
|
│ │ │ └── with_border_on_dark.html
|
|
|
|
|
|
|
|
│ │ ├── button_groups
|
|
|
|
|
|
|
|
│ │ │ ├── basic.html
|
|
|
|
|
|
|
|
│ │ │ ├── icon_only.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_checkbox_and_dropdown.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_dropdown.html
|
|
|
|
|
|
|
|
│ │ │ └── with_stat.html
|
|
|
|
|
|
|
|
│ │ ├── buttons
|
|
|
|
|
|
|
|
│ │ │ ├── buttons_with_leading_icon.html
|
|
|
|
|
|
|
|
│ │ │ ├── buttons_with_trailing_icon.html
|
|
|
|
|
|
|
|
│ │ │ ├── circular_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── primary_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── primary_buttons_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── rounded_primary_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── rounded_secondary_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── secondary_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── secondary_buttons_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ └── soft_buttons.html
|
|
|
|
|
|
|
|
│ │ └── dropdowns
|
|
|
|
|
|
|
|
│ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ ├── with_dividers.html
|
|
|
|
|
|
|
|
│ │ ├── with_icons.html
|
|
|
|
|
|
|
|
│ │ ├── with_minimal_menu_icon.html
|
|
|
|
|
|
|
|
│ │ └── with_simple_header.html
|
|
|
|
|
|
|
|
│ ├── feedback
|
|
|
|
|
|
|
|
│ │ ├── alerts
|
|
|
|
|
|
|
|
│ │ │ ├── with_accent_border.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_description.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_dismiss_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_link_on_right.html
|
|
|
|
|
|
|
|
│ │ │ └── with_list.html
|
|
|
|
|
|
|
|
│ │ └── empty_states
|
|
|
|
|
|
|
|
│ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ ├── with_dashed_border.html
|
|
|
|
|
|
|
|
│ │ ├── with_recommendation_grids.html
|
|
|
|
|
|
|
|
│ │ ├── with_recommendations.html
|
|
|
|
|
|
|
|
│ │ ├── with_starting_points.html
|
|
|
|
|
|
|
|
│ │ └── with_templates.html
|
|
|
|
|
|
|
|
│ ├── forms
|
|
|
|
|
|
|
|
│ │ ├── action_panels
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_well.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_button_at_top_right.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_button_on_right.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_input.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_link.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_toggle.html
|
|
|
|
|
|
|
|
│ │ │ └── with_well.html
|
|
|
|
|
|
|
|
│ │ ├── checkboxes
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_checkbox_on_right.html
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_description.html
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_inline_description.html
|
|
|
|
|
|
|
|
│ │ │ └── simple_list_with_heading.html
|
|
|
|
|
|
|
|
│ │ ├── comboboxes
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_image.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_secondary_text.html
|
|
|
|
|
|
|
|
│ │ │ └── with_status_indicator.html
|
|
|
|
|
|
|
|
│ │ ├── form_layouts
|
|
|
|
|
|
|
|
│ │ │ ├── labels_on_left.html
|
|
|
|
|
|
|
|
│ │ │ ├── stacked.html
|
|
|
|
|
|
|
|
│ │ │ ├── stacked_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── two_column.html
|
|
|
|
|
|
|
|
│ │ │ └── two_column_with_cards.html
|
|
|
|
|
|
|
|
│ │ ├── input_groups
|
|
|
|
|
|
|
|
│ │ │ ├── inpout_with_disabled_state.html
|
|
|
|
|
|
|
|
│ │ │ ├── inputs_with_inset_labels_and_shared_borders.html
|
|
|
|
|
|
|
|
│ │ │ ├── inputs_with_shared_borders.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_addon.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_corner_hint.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_gray_background_and_bottom_border.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_hidden_label.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_inline_addon.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_inline_leading_addon_and_trailing_dropdown.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_inline_leading_and_trailing_addons.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_inline_leading_dropdown.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_inset_label.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_keyboard_shortcut.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_label_and_help_text.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_label.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_leading_icon_and_trailing_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_leading_icon.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_overlapping_label.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_pill_shape.html
|
|
|
|
|
|
|
|
│ │ │ ├── input_with_trailing_icon.html
|
|
|
|
|
|
|
|
│ │ │ └── input_with_validation_error.html
|
|
|
|
|
|
|
|
│ │ ├── radio_groups
|
|
|
|
|
|
|
|
│ │ │ ├── cards.html
|
|
|
|
|
|
|
|
│ │ │ ├── color_picker.html
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_description.html
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_descriptions_in_panel.html
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_inline_description.html
|
|
|
|
|
|
|
|
│ │ │ ├── list_with_radio_on_right.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_inline_list.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_list.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_list_with_radio_on_right.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_table.html
|
|
|
|
|
|
|
|
│ │ │ ├── small_cards.html
|
|
|
|
|
|
|
|
│ │ │ └── stacked_cards.html
|
|
|
|
|
|
|
|
│ │ ├── select_menus
|
|
|
|
|
|
|
|
│ │ │ ├── branded_with_supported_text.html
|
|
|
|
|
|
|
|
│ │ │ ├── custom_with_avatar.html
|
|
|
|
|
|
|
|
│ │ │ ├── custom_with_check_on_left.html
|
|
|
|
|
|
|
|
│ │ │ ├── custom_with_status_indicator.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_custom.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_native.html
|
|
|
|
|
|
|
|
│ │ │ └── with_secondary_text.html
|
|
|
|
|
|
|
|
│ │ ├── signin_and_registration
|
|
|
|
|
|
|
|
│ │ │ ├── simple_card.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_no_labels.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ └── split_screen.html
|
|
|
|
|
|
|
|
│ │ ├── textareas
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_avatar_and_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_preview_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_title_and_pill_actions.html
|
|
|
|
|
|
|
|
│ │ │ └── with_underline_and_actions.html
|
|
|
|
|
|
|
|
│ │ └── toggles
|
|
|
|
|
|
|
|
│ │ ├── short_toggle.html
|
|
|
|
|
|
|
|
│ │ ├── simple_toggle.html
|
|
|
|
|
|
|
|
│ │ ├── toggle_with_icon.html
|
|
|
|
|
|
|
|
│ │ ├── with_left_label_and_description.html
|
|
|
|
|
|
|
|
│ │ └── with_right_label.html
|
|
|
|
|
|
|
|
│ ├── headings
|
|
|
|
|
|
|
|
│ │ ├── card_headings
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_action.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_avatar_and_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_avatar_meta_and_dropdown.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_description_and_action.html
|
|
|
|
|
|
|
|
│ │ │ └── with_description.html
|
|
|
|
|
|
|
|
│ │ ├── page_headings
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_avatar_and_stats.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_actions_and_breadcrumbs.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_actions_and_breadcrumbs_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_actions_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_avatar_and_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_banner_image.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_filters_and_action.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_logo_meta_and_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_meta_actions_and_breadcrumbs.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_meta_actions_and_breadcrumbs_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_meta_and_actions.html
|
|
|
|
|
|
|
|
│ │ │ └── with_meta_and_actions_on_dark.html
|
|
|
|
|
|
|
|
│ │ └── section_headings
|
|
|
|
|
|
|
|
│ ├── layout
|
|
|
|
|
|
|
|
│ │ ├── cards
|
|
|
|
|
|
|
|
│ │ │ ├── basic_card.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_edge_to_edge_on_mobile.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_footer.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_gray_body.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_gray_footer.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_header.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_heeader_and_footer.html
|
|
|
|
|
|
|
|
│ │ │ ├── well_edge_to_edge_on_mobile.html
|
|
|
|
|
|
|
|
│ │ │ ├── well.html
|
|
|
|
|
|
|
|
│ │ │ └── well_on_gray.html
|
|
|
|
|
|
|
|
│ │ ├── containers
|
|
|
|
|
|
|
|
│ │ │ ├── constrained_to_br_with_padded_content.html
|
|
|
|
|
|
|
|
│ │ │ ├── constrained_with_padded_content.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_mobil_constrained_to_br_with_padded_content.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_mobile_constrained_with_padded_content_above.html
|
|
|
|
|
|
|
|
│ │ │ └── narrow_constrained_with_padded_content.html
|
|
|
|
|
|
|
|
│ │ ├── dividers
|
|
|
|
|
|
|
|
│ │ │ ├── with_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_icon.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_label.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_label_on_left.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_title_and_button.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_title.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_title_on_left.html
|
|
|
|
|
|
|
|
│ │ │ └── with_toolbar.html
|
|
|
|
|
|
|
|
│ │ ├── list_containers
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_dividers_full_width_on_mobile.html
|
|
|
|
|
|
|
|
│ │ │ ├── card_with_dividers.html
|
|
|
|
|
|
|
|
│ │ │ ├── flat_card_with_dividers.html
|
|
|
|
|
|
|
|
│ │ │ ├── separate_cards_full_width_on_mobile.html
|
|
|
|
|
|
|
|
│ │ │ ├── separate_cards.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_with_dividers_full_width_on_mobile.html
|
|
|
|
|
|
|
|
│ │ │ └── simple_with_dividers.html
|
|
|
|
|
|
|
|
│ │ └── media_objects
|
|
|
|
|
|
|
|
│ │ ├── aligned_to_bottom.html
|
|
|
|
|
|
|
|
│ │ ├── aligned_to_center.html
|
|
|
|
|
|
|
|
│ │ ├── basic.html
|
|
|
|
|
|
|
|
│ │ ├── basic_responsive.html
|
|
|
|
|
|
|
|
│ │ ├── media_on_right.html
|
|
|
|
|
|
|
|
│ │ ├── nested.html
|
|
|
|
|
|
|
|
│ │ ├── stretched_to_fit.html
|
|
|
|
|
|
|
|
│ │ └── wide_responsive.html
|
|
|
|
|
|
|
|
│ ├── lists
|
|
|
|
|
|
|
|
│ │ ├── feeds
|
|
|
|
|
|
|
|
│ │ │ ├── simple_with_icons.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_comments.html
|
|
|
|
|
|
|
|
│ │ │ └── with_multiple_items_types.html
|
|
|
|
|
|
|
|
│ │ ├── grid_lists
|
|
|
|
|
|
|
|
│ │ │ ├── actions_with_shared_borders.html
|
|
|
|
|
|
|
|
│ │ │ ├── contact_cards.html
|
|
|
|
|
|
|
|
│ │ │ ├── contact_cards_with_small_portraits.html
|
|
|
|
|
|
|
|
│ │ │ ├── horizontal_link_cards.html
|
|
|
|
|
|
|
|
│ │ │ ├── images_with_details.html
|
|
|
|
|
|
|
|
│ │ │ ├── logo_cards_with_description_list.html
|
|
|
|
|
|
|
|
│ │ │ └── simple_cards.html
|
|
|
|
|
|
|
|
│ │ ├── stacked_lists
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_with_constrained_content.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_with_links.html
|
|
|
|
|
|
|
|
│ │ │ ├── in_card_with_links.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_actions.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_badges_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_small_avatars.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_small_avatars_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_sticky_headings.html
|
|
|
|
|
|
|
|
│ │ │ ├── narrow_with_truncated_content.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── two_columns_with_links.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_badges_buttons_and_action_menu.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_inline_links_and_actions_menu.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_inline_links_and_avatar_group.html
|
|
|
|
|
|
|
|
│ │ │ └── with_links.html
|
|
|
|
|
|
|
|
│ │ └── tables
|
|
|
|
|
|
|
|
│ │ ├── full_width.html
|
|
|
|
|
|
|
|
│ │ ├── full_width_with_avatars_on_dark.html
|
|
|
|
|
|
|
|
│ │ ├── full_width_with_constrained_content.html
|
|
|
|
|
|
|
|
│ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ ├── simple_in_card.html
|
|
|
|
|
|
|
|
│ │ ├── simple_on_dark.html
|
|
|
|
|
|
|
|
│ │ ├── with_avatars_and_multi_line_content.html
|
|
|
|
|
|
|
|
│ │ ├── with_border.html
|
|
|
|
|
|
|
|
│ │ ├── with_checkboxes.html
|
|
|
|
|
|
|
|
│ │ ├── with_condensed_content.html
|
|
|
|
|
|
|
|
│ │ ├── with_grouped_rows.html
|
|
|
|
|
|
|
|
│ │ ├── with_hidden_columns_on_mobile.html
|
|
|
|
|
|
|
|
│ │ ├── with_hidden_headings.html
|
|
|
|
|
|
|
|
│ │ ├── with_sortable_headings.html
|
|
|
|
|
|
|
|
│ │ ├── with_stacked_columns_on_mobile.html
|
|
|
|
|
|
|
|
│ │ ├── with_sticky_header.html
|
|
|
|
|
|
|
|
│ │ ├── with_striped_rows.html
|
|
|
|
|
|
|
|
│ │ ├── with_summary_rows.html
|
|
|
|
|
|
|
|
│ │ ├── with_uppercase_headings.html
|
|
|
|
|
|
|
|
│ │ └── with_veritcal_lines.html
|
|
|
|
|
|
|
|
│ ├── navigation
|
|
|
|
|
|
|
|
│ │ ├── breadcrumbs
|
|
|
|
|
|
|
|
│ │ │ ├── contained.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_bar.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_with_chevrons.html
|
|
|
|
|
|
|
|
│ │ │ └── simple_with_slashes.html
|
|
|
|
|
|
|
|
│ │ ├── command_palettes
|
|
|
|
|
|
|
|
│ │ │ ├── dark_with_icons.html
|
|
|
|
|
|
|
|
│ │ │ ├── semi_transparent_with_icons.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_with_padding.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_footer.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_groups.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_icons.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_images_and_descriptions.html
|
|
|
|
|
|
|
|
│ │ │ └── with_preview.html
|
|
|
|
|
|
|
|
│ │ ├── navbars
|
|
|
|
|
|
|
|
│ │ │ ├── dark_with_quick_action.html
|
|
|
|
|
|
|
|
│ │ │ ├── dark_with_search.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_dark_with_menu_button_on_left.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_with_menu_button_on_left.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_centered_search_and_secondary_links_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_centered_search_and_secondary_links.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_quick_action.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_search.html
|
|
|
|
|
|
|
|
│ │ │ └── with_search_in_column_layout.html
|
|
|
|
|
|
|
|
│ │ ├── pagination
|
|
|
|
|
|
|
|
│ │ │ ├── card_footer_with_page_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── centered_page_numbers.html
|
|
|
|
|
|
|
|
│ │ │ └── simple_card_footer.html
|
|
|
|
|
|
|
|
│ │ ├── progress_bars
|
|
|
|
|
|
|
|
│ │ │ ├── bullets_and_text.html
|
|
|
|
|
|
|
|
│ │ │ ├── bullets.html
|
|
|
|
|
|
|
|
│ │ │ ├── circles.html
|
|
|
|
|
|
|
|
│ │ │ ├── circles_with_text.html
|
|
|
|
|
|
|
|
│ │ │ ├── panels.html
|
|
|
|
|
|
|
|
│ │ │ ├── panels_with_border.html
|
|
|
|
|
|
|
|
│ │ │ ├── progress_bar.html
|
|
|
|
|
|
|
|
│ │ │ └── simple.html
|
|
|
|
|
|
|
|
│ │ ├── sidebar_navigation
|
|
|
|
|
|
|
|
│ │ │ ├── brand.html
|
|
|
|
|
|
|
|
│ │ │ ├── dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── light.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_expandable_sections.html
|
|
|
|
|
|
|
|
│ │ │ └── with_secondary_navigation.html
|
|
|
|
|
|
|
|
│ │ ├── tabs
|
|
|
|
|
|
|
|
│ │ │ ├── bar_with_underline.html
|
|
|
|
|
|
|
|
│ │ │ ├── full_width_tabs_with_underline.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_on_dark.html
|
|
|
|
|
|
|
|
│ │ │ ├── tabs_in_pills.html
|
|
|
|
|
|
|
|
│ │ │ ├── tabs_in_pills_on_gray.html
|
|
|
|
|
|
|
|
│ │ │ ├── tabs_in_pills_with_brand_color.html
|
|
|
|
|
|
|
|
│ │ │ ├── tabs_with_underline_and_badges.html
|
|
|
|
|
|
|
|
│ │ │ ├── tabs_with_underline_and_icons.html
|
|
|
|
|
|
|
|
│ │ │ └── tabs_with_underline.html
|
|
|
|
|
|
|
|
│ │ └── vertical_navigation
|
|
|
|
|
|
|
|
│ │ ├── on_gray.html
|
|
|
|
|
|
|
|
│ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ ├── with_badges.html
|
|
|
|
|
|
|
|
│ │ ├── with_icons_and_badges.html
|
|
|
|
|
|
|
|
│ │ ├── with_icons.html
|
|
|
|
|
|
|
|
│ │ └── with_secondary_navigation.html
|
|
|
|
|
|
|
|
│ ├── overlays
|
|
|
|
|
|
|
|
│ │ ├── drawers
|
|
|
|
|
|
|
|
│ │ │ ├── contact_list_example.html
|
|
|
|
|
|
|
|
│ │ │ ├── create_project_form_example.html
|
|
|
|
|
|
|
|
│ │ │ ├── empty.html
|
|
|
|
|
|
|
|
│ │ │ ├── file_details_example.html
|
|
|
|
|
|
|
|
│ │ │ ├── user_profile_example.html
|
|
|
|
|
|
|
|
│ │ │ ├── wide_create_project_from_example.html
|
|
|
|
|
|
|
|
│ │ │ ├── wide_empty.html
|
|
|
|
|
|
|
|
│ │ │ ├── wide_horizontal_user_profile_example.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_background_overly.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_branded_header.html
|
|
|
|
|
|
|
|
│ │ │ ├── with_clone_button_on_outside.html
|
|
|
|
|
|
|
|
│ │ │ └── with_sticky_footer.html
|
|
|
|
|
|
|
|
│ │ ├── modal_dialogs
|
|
|
|
|
|
|
|
│ │ │ ├── centered_with_sinlge_action.html
|
|
|
|
|
|
|
|
│ │ │ ├── centered_with_wide_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_alert.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_alerts_with_left_aligned_buttons.html
|
|
|
|
|
|
|
|
│ │ │ ├── simple_with_dismiss_button.html
|
|
|
|
|
|
|
|
│ │ │ └── simple_with_gray_footer.html
|
|
|
|
|
|
|
|
│ │ └── notifications
|
|
|
|
|
|
|
|
│ │ ├── condensed.html
|
|
|
|
|
|
|
|
│ │ ├── simple.html
|
|
|
|
|
|
|
|
│ │ ├── with_actions_below.html
|
|
|
|
|
|
|
|
│ │ ├── with_avatar.html
|
|
|
|
|
|
|
|
│ │ ├── with_buttons_below.html
|
|
|
|
|
|
|
|
│ │ └── with_split_buttons.html
|
|
|
|
|
|
|
|
│ └── page_examples
|
|
|
|
|
|
|
|
│ ├── detail_screens
|
|
|
|
|
|
|
|
│ │ ├── index.html
|
|
|
|
|
|
|
|
│ │ ├── sidebar_on_dark.html
|
|
|
|
|
|
|
|
│ │ └── stacked.html
|
|
|
|
|
|
|
|
│ ├── home_screens
|
|
|
|
|
|
|
|
│ │ ├── sidebar_on_dark.html
|
|
|
|
|
|
|
|
│ │ └── stacked.html
|
|
|
|
|
|
|
|
│ └── settings_screens
|
|
|
|
|
|
|
|
│ ├── sidebar_on_dark.html
|
|
|
|
|
|
|
|
│ └── stacked.html
|
|
|
|
|
|
|
|
└── marketing
|
|
|
|
|
|
|
|
└── page_sections
|
|
|
|
|
|
|
|
└── hero_sections
|
|
|
|
|
|
|
|
├── simple_centered.html
|
|
|
|
|
|
|
|
├── simple_centered_with_background_image.html
|
|
|
|
|
|
|
|
├── split_with_bordered_screenshot.html
|
|
|
|
|
|
|
|
├── split_with_code_example.html
|
|
|
|
|
|
|
|
├── split_with_image.html
|
|
|
|
|
|
|
|
├── split_with_screenshot.html
|
|
|
|
|
|
|
|
├── with_angled_image_on_right.html
|
|
|
|
|
|
|
|
├── with_app_screen_shot.html
|
|
|
|
|
|
|
|
├── with_bordered_app_screenshot.html
|
|
|
|
|
|
|
|
├── with_image_tiles.html
|
|
|
|
|
|
|
|
├── with_offset_image.html
|
|
|
|
|
|
|
|
└── with_phone_mockup.html
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
65 directories, 382 files
|
|
|
|
|
|
|
|
```
|
Drew Bednar