From e56aaba1036d7b3d8e85185d0aab2fb7df14251f Mon Sep 17 00:00:00 2001 From: "tembo[bot]" <208362400+tembo[bot]@users.noreply.github.com> Date: Thu, 26 Feb 2026 23:17:09 +0000 Subject: [PATCH] chore(docs): standardize and expand block documentation formatting and content Co-authored-by: Thomas --- slab/blocks/_avatar-image.md | 42 ++++++--- slab/blocks/_g__cart-progress-tier.md | 26 ++++++ slab/blocks/_g__flex-item.md | 74 +++++++++++----- slab/blocks/_g__grid-item.md | 63 ++++++++++---- slab/blocks/_g__grid-paginateitem.md | 72 ++++++++++----- slab/blocks/_g__hotspot-spot.md | 60 +++++++++---- slab/blocks/_g__map-item.md | 59 +++++++++++++ slab/blocks/_g__menu-item.md | 61 +++++++++---- slab/blocks/_g__slider-item.md | 64 ++++++++++---- slab/blocks/_g__tab-item.md | 49 ++++++++--- slab/blocks/_g__table-cell.md | 22 ++--- slab/blocks/_g__table-row.md | 21 ++--- slab/blocks/_grid-articles.md | 16 +--- slab/blocks/_grid-collections.md | 17 +--- slab/blocks/_grid-gallery.md | 40 ++++----- slab/blocks/_grid-products.md | 19 +--- slab/blocks/_grid-recent.md | 17 +--- slab/blocks/_grid-recommendations.md | 29 ++----- slab/blocks/_layout__blog.md | 63 +++++++------- slab/blocks/_layout__collection.md | 63 +++++++------- slab/blocks/_layout__list-collections.md | 63 +++++++------- slab/blocks/_layout__search.md | 64 +++++++------- slab/blocks/_pagination.md | 78 ++++++++++++----- slab/blocks/_slider-articles.md | 37 ++++---- slab/blocks/_slider-collections.md | 34 ++++---- slab/blocks/_slider-gallery.md | 67 +++++++------- slab/blocks/_slider-products.md | 39 ++++----- slab/blocks/_slider-recent.md | 36 ++++---- slab/blocks/_slider-recommendations.md | 51 +++++------ slab/blocks/_tags.md | 70 ++++++++++----- slab/blocks/accordion.md | 47 +++++----- slab/blocks/age-verification-form.md | 47 +++++----- slab/blocks/article-card.md | 61 +++++++------ slab/blocks/avatars.md | 27 +++--- slab/blocks/button.md | 74 ++++++++-------- slab/blocks/cart-count.md | 55 ++++++++++++ slab/blocks/cart-discount.md | 38 ++++++++ slab/blocks/cart-fulltotals.md | 53 ++++++++++++ slab/blocks/cart-notes.md | 38 ++++++++ slab/blocks/cart-price.md | 61 +++++++++++++ slab/blocks/cart-results.md | 31 +++++++ slab/blocks/cart-share.md | 38 ++++++++ slab/blocks/cart-summary.md | 54 ++++++++++++ slab/blocks/checkbox-upsell.md | 39 +++++++++ slab/blocks/checkout-approval.md | 39 +++++++++ slab/blocks/checkout.md | 36 ++++++++ slab/blocks/collection-card.md | 58 +++++++------ slab/blocks/contact-form.md | 32 +++---- slab/blocks/container.md | 89 +++++++++++++++++++ slab/blocks/dropdown.md | 47 +++++----- slab/blocks/error.md | 42 ++++----- slab/blocks/filter-tags.md | 50 +++++------ slab/blocks/filter.md | 72 ++++++++------- slab/blocks/form-response.md | 42 ++++----- slab/blocks/hotspot.md | 34 ++++---- slab/blocks/icon.md | 52 +++++------ slab/blocks/image-comparison.md | 51 +++++------ slab/blocks/image.md | 54 ++++++------ slab/blocks/input-field.md | 27 +++--- slab/blocks/layout__flex.md | 61 ++++++------- slab/blocks/layout__float.md | 58 ++++++------- slab/blocks/layout__grid.md | 55 +++++------- slab/blocks/layout__inline.md | 36 +++----- slab/blocks/layout__marquee.md | 74 ++++++++-------- slab/blocks/layout__overlay.md | 45 +++++----- slab/blocks/layout__slider.md | 96 +++++++++----------- slab/blocks/layout__tab.md | 56 +++++------- slab/blocks/layout__table.md | 64 ++++++-------- slab/blocks/liquid.md | 21 ++--- slab/blocks/localization-label.md | 19 ++-- slab/blocks/logo.md | 35 +++----- slab/blocks/map.md | 52 +++++++++++ slab/blocks/menu-dropdown.md | 106 ++++++++++++----------- slab/blocks/menu-page.md | 74 ++++++++-------- slab/blocks/menu.md | 58 ++++++------- slab/blocks/newsletter-form.md | 38 ++++---- slab/blocks/overlay__alert.md | 59 ++++++------- slab/blocks/overlay__drawer.md | 52 +++++------ slab/blocks/overlay__popup.md | 44 +++++----- slab/blocks/overlay__sidebar.md | 48 +++++----- slab/blocks/password-form.md | 36 ++++---- slab/blocks/payment-icons.md | 20 ++--- slab/blocks/picker-audio.md | 25 +++--- slab/blocks/picker-country.md | 10 +-- slab/blocks/picker-language.md | 10 +-- slab/blocks/product-badges.md | 46 ++++------ slab/blocks/product-bundles.md | 26 +++--- slab/blocks/product-buy.md | 40 ++++----- slab/blocks/product-card.md | 63 ++++++++------ slab/blocks/product-inventory.md | 28 +++--- slab/blocks/product-media.md | 32 +++---- slab/blocks/product-options.md | 65 +++++++------- slab/blocks/product-pickup.md | 32 ++++--- slab/blocks/product-price.md | 41 ++++----- slab/blocks/product-quick-buy.md | 39 ++++----- slab/blocks/product-rating.md | 42 +++++---- slab/blocks/product-sibling-options.md | 71 +++++++-------- slab/blocks/product-subscription.md | 31 +++---- slab/blocks/product-swatches.md | 34 ++++---- slab/blocks/progress-bar.md | 72 +++++++++++++++ slab/blocks/render-quick-buy.md | 6 +- slab/blocks/render-quick-edit.md | 6 +- slab/blocks/richtext.md | 45 +++++----- slab/blocks/search-input.md | 37 ++++---- slab/blocks/search-results.md | 34 ++++---- slab/blocks/search-summary.md | 34 ++++---- slab/blocks/share.md | 55 ++++++------ slab/blocks/shared-discount.md | 32 ++++--- slab/blocks/shop-login.md | 26 +++--- slab/blocks/shop-pay-installments.md | 42 +++++++++ slab/blocks/social-icons.md | 25 +++--- slab/blocks/video.md | 70 ++++++++------- slab/blocks/visibility.md | 26 +++--- 113 files changed, 2934 insertions(+), 2222 deletions(-) create mode 100644 slab/blocks/_g__cart-progress-tier.md create mode 100644 slab/blocks/_g__map-item.md create mode 100644 slab/blocks/cart-count.md create mode 100644 slab/blocks/cart-discount.md create mode 100644 slab/blocks/cart-fulltotals.md create mode 100644 slab/blocks/cart-notes.md create mode 100644 slab/blocks/cart-price.md create mode 100644 slab/blocks/cart-results.md create mode 100644 slab/blocks/cart-share.md create mode 100644 slab/blocks/cart-summary.md create mode 100644 slab/blocks/checkbox-upsell.md create mode 100644 slab/blocks/checkout-approval.md create mode 100644 slab/blocks/checkout.md create mode 100644 slab/blocks/container.md create mode 100644 slab/blocks/map.md create mode 100644 slab/blocks/progress-bar.md create mode 100644 slab/blocks/shop-pay-installments.md diff --git a/slab/blocks/_avatar-image.md b/slab/blocks/_avatar-image.md index 9b91cc9..c45fb87 100644 --- a/slab/blocks/_avatar-image.md +++ b/slab/blocks/_avatar-image.md @@ -1,30 +1,48 @@ # Avatar image -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Avatars](avatars.md) block. ## Overview -A styled avatar component that creates a circular container for content blocks, primarily designed for displaying profile images or avatars. The component features a circular border and supports responsive visibility options. +A styled avatar component that creates a circular container for displaying profile images or avatars. The component features customizable sizing, color scheme support, and responsive visibility options. + + +## Block limitations + +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Best used for profile pictures, user avatars, or circular image elements -- Consider the context where avatars will be displayed when selecting size -- Use the visibility options to create different avatar arrangements on mobile vs desktop +- Best used for displaying profile pictures, user avatars, or circular image elements within an avatars layout. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks + +The following blocks can be nested within this block: - Image block + ## Block settings +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Size | Size of the avatar | • Small (default)
• Medium
• Large | + +### Color + | Setting | Description | Options | |---------|-------------|---------| -| Size | Size of the avatar | Small (default), Medium, Large | -| Border color | Controls the border color | Body, Subtle, Strong, Primary, Secondary, Tertiary, None. Default: Body | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Border color for the block | • Body foreground (default)
• Subtle
• Strong
• None | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Display +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__cart-progress-tier.md b/slab/blocks/_g__cart-progress-tier.md new file mode 100644 index 0000000..3798395 --- /dev/null +++ b/slab/blocks/_g__cart-progress-tier.md @@ -0,0 +1,26 @@ +# Progress tier + + +## Overview + +A cart progress tier block that defines a threshold and label for cart progress indicators. Each tier represents a spending milestone that customers can work toward in the cart. + + +## Block limitations + +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + + +## Common use cases + +- Use to define spending thresholds for free shipping, gift tiers, or other cart-based promotions. + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Label | Text label displayed for this progress tier | Text input | +| Minimum amount | The spending threshold for this tier in cents without currency formatting | Number input (default: 100) | diff --git a/slab/blocks/_g__flex-item.md b/slab/blocks/_g__flex-item.md index 89bfa04..4d10b2f 100644 --- a/slab/blocks/_g__flex-item.md +++ b/slab/blocks/_g__flex-item.md @@ -1,44 +1,70 @@ # Flex item + ## Overview -A flexible container item designed to be used within layout__flex.liquid for creating customizable layouts. Supports responsive width adjustments, alignment controls, and spacing options. +A flexible container block that displays its content within a flex layout. It supports customizable width, spacing, sticky positioning, color schemes, scroll animations, and responsive visibility options. + ## Block limitations This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Use with layout__flex.liquid to create flexible grid-like layouts -- Configure visibility settings for responsive designs that differ between mobile and desktop -- Adjust gap size to maintain consistent spacing between nested elements -- Set custom widths for mobile and desktop views -- Use sticky positioning for elements that should remain visible while scrolling +- Use as a child of a flex layout to create responsive multi-column arrangements with independently sized and styled content areas. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks + +The following blocks can be nested within this block: + +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings +### Spacing + | Setting | Description | Options | |---------|-------------|---------| -| Enable padding | Adds padding around the flex item content | Checkbox (default: false) | -| Enable vertical spacing | Adds vertical padding (top and bottom) | Checkbox (default: true) | -| Gap size | Controls spacing between child blocks | None, Default (default), XS, SM, MD, LG, XL | -| Color scheme | Controls the background and text colors | Body, Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent (default) | -| Color border | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when border position is not blank | -| Border position | Controls where borders appear | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All | -| Width mobile | Width of the flex item on mobile devices | 5 - 100 % (default: 80). Visible when enable width fill and enable default width are false | -| Width desktop | Width of the flex item on desktop devices | 5 - 100 % (default: 40). Visible when enable width fill and enable default width are false | -| Enable width fill | Makes the flex item grow to fill available space | Checkbox (default: false) | -| Enable default width | Uses automatic width sizing | Checkbox (default: false) | -| Enable sticky layout | Enables sticky positioning | Checkbox (default: false) | -| Sticky position | Position for sticky element | None, Top, Bottom. Visible when enable sticky layout is true | -| Vertical alignment | Controls vertical alignment of content | Top, Middle, Bottom (default) | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Enable padding | Adds internal padding to the block | Checkbox (default: false) | +| Enable vertical spacing | Adds vertical spacing around the block | Checkbox (default: true) | +| Gap size | Spacing between child elements | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Border color for the block | • Body foreground
• Subtle (default)
• Strong
• None | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style +| Setting | Description | Options | +|---------|-------------|---------| +| Border position | Position of the border on the block | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Mobile width | Width of the block on mobile devices | 5 – 100% (default: 80) | +| Desktop width | Width of the block on desktop devices | 5 – 100% (default: 40) | +| Enable width fill | Allows the block to fill available space in the flex container | Checkbox (default: false) | +| Enable default width | Uses the parent container's default width setting | Checkbox (default: false) | +| Enable sticky layout | Makes the block sticky when scrolling | Checkbox (default: false) | +| Sticky position | Position where the block sticks when scrolling | • None (default)
• Top
• Bottom | +| Vertical alignment | Vertical alignment of child content | • Top
• Middle
• Bottom (default) | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Scroll animation | Animation applied to the block on scroll | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/_g__grid-item.md b/slab/blocks/_g__grid-item.md index f21a932..9f35cd3 100644 --- a/slab/blocks/_g__grid-item.md +++ b/slab/blocks/_g__grid-item.md @@ -1,39 +1,64 @@ # Grid item + ## Overview -A block that conditionally displays its content based on a pagination index. Works with grid components to show content for specific pagination states. +A grid container block that displays its content within a CSS grid layout. It supports configurable row and column spans, padding, color schemes, border options, and responsive visibility settings. + ## Block limitations This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Set unique index values for each paginate content block -- Use with blocks/grid__content for fully functional pagination -- Ensure gap sizes match between pagination components for visual consistency -- Configure column and row spans to create complex grid layouts -- Use color schemes and borders to visually distinguish grid items +- Use as a child of a grid layout to create multi-column and multi-row content arrangements with independently styled grid cells. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks + +The following blocks can be nested within this block: + +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings +### Spacing + | Setting | Description | Options | |---------|-------------|---------| -| Enable padding | Adds padding around the grid item content | Checkbox (default: true) | -| Gap size | Controls spacing between child blocks | None, Default (default), XS, SM, MD, LG, XL | -| Color scheme | Controls the background and text colors | Body, Neutral, Accent 1 (default), Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent | -| Color border | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when border position is not blank | -| Border position | Controls where borders appear | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All | -| Vertical alignment | Controls vertical alignment of content | Top (default), Middle, Bottom | -| Row span | Number of rows the grid item spans | 1 (default), 2, 3, 4, 5, 6 | -| Column span | Number of columns the grid item spans on desktop | 1, 2 (default), 3, 4, 5, 6 | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Enable padding | Adds internal padding to the block | Checkbox (default: true) | +| Gap size | Spacing between child elements | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Border color for the block | • Body foreground
• Subtle (default)
• Strong
• None | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style +| Setting | Description | Options | +|---------|-------------|---------| +| Border position | Position of the border on the block | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Vertical alignment | Vertical alignment of child content | • Top (default)
• Middle
• Bottom | +| Row span | Number of grid rows this block spans | • 1 (default)
• 2
• 3
• 4
• 5
• 6 | +| Column span | Number of grid columns this block spans | • 1
• 2 (default)
• 3
• 4
• 5
• 6 | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__grid-paginateitem.md b/slab/blocks/_g__grid-paginateitem.md index 2b1788c..270ad17 100644 --- a/slab/blocks/_g__grid-paginateitem.md +++ b/slab/blocks/_g__grid-paginateitem.md @@ -1,38 +1,68 @@ # Grid paginate item -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within grid layout blocks that support pagination. ## Overview -A block that conditionally displays its content based on a pagination index. Works with grid components to show content for specific pagination states. +A grid container block that conditionally displays its content based on a pagination index. It works with grid components to show content for specific pagination states, supporting row and column spans, color schemes, and responsive visibility. + + +## Block limitations + +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Set unique index values for each paginate content block -- Use with blocks/grid__content for fully functional pagination -- Ensure gap sizes match between pagination components for visual consistency +- Use within a paginated grid layout to display content that appears only at a specific pagination index. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks + +The following blocks can be nested within this block: + +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings | Setting | Description | Options | |---------|-------------|---------| -| Index | Pagination index this block corresponds to | Number (default: 6) | -| Enable padding | Adds padding around the content | Checkbox (default: true) | -| Gap size | Spacing between child blocks | None, Default (default), Xs, Sm, Md, Lg, Xl | -| Color scheme | Controls the background color scheme | Body (default), Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent | -| Border color | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None | -| Border position | Controls which sides have borders | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All | -| Vertical alignment | Controls vertical alignment of content | Top, Middle, Bottom (default) | -| Row span | Number of rows this item spans | 1 (default), 2, 3, 4, 5, 6 | -| Column span | Number of columns this item spans | 1 (default), 2, 3, 4, 5, 6 | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Index | The pagination index at which this block becomes visible | Number input (default: 6) | + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable padding | Adds internal padding to the block | Checkbox (default: true) | +| Gap size | Spacing between child elements | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Border color for the block | • Body foreground
• Subtle (default)
• Strong
• None | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Border position | Position of the border on the block | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Vertical alignment | Vertical alignment of child content | • Top
• Middle
• Bottom (default) | +| Row span | Number of grid rows this block spans | • 1 (default)
• 2
• 3
• 4
• 5
• 6 | +| Column span | Number of grid columns this block spans | • 1 (default)
• 2
• 3
• 4
• 5
• 6 | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__hotspot-spot.md b/slab/blocks/_g__hotspot-spot.md index 5b158c3..02c3033 100644 --- a/slab/blocks/_g__hotspot-spot.md +++ b/slab/blocks/_g__hotspot-spot.md @@ -1,36 +1,58 @@ # Spot -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Hotspot](hotspot.md) block. ## Overview -A hotspot spot block that can be used to display interactive spots on images or other elements. The block supports animations, color schemes, and responsive positioning. It allows for nested blocks to be displayed when the spot is interacted with. +A hotspot spot block that positions nested content at configurable coordinates on a hotspot image. It supports independent positioning and sizing for mobile and desktop viewports along with optional entrance animations. + + +## Block limitations + +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Use this block to highlight specific areas on images or other elements, providing additional information or interactivity -- Customize the color scheme and animations to match the overall theme design -- Ensure that the nested blocks provide meaningful content that enhances the user experience +- Use to create interactive hotspot markers on images that reveal product details, descriptions, or other content at precise positions. + + +## Compatible blocks -## Child blocks +The following blocks can be nested within this block: -This block includes the following nested blocks: +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings +### Color + | Setting | Description | Options | |---------|-------------|---------| -| Color scheme | Controls the background color scheme | Body (default), Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent | -| Enable animations | Enables animations for the hotspot spot | Checkbox (default: false) | -| Y alignment | Vertical position of the spot | 0 - 100 % (default: 20) | -| X alignment | Horizontal position of the spot | 0 - 100 % (default: 20) | -| Width | Width of the content area | 20 - 800 px (default: 300) | -| Y alignment mobile | Vertical position of the spot on mobile | 0 - 100 % (default: 20) | -| X alignment mobile | Horizontal position of the spot on mobile | 0 - 100 % (default: 20) | -| Width mobile | Width of the content area on mobile | 5 - 400 px (default: 250) | +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style +| Setting | Description | Options | +|---------|-------------|---------| +| Enable animations | Enables entrance animations for the hotspot | Checkbox (default: false) | + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Vertical alignment | Vertical position of the hotspot on desktop | 0 – 100% (default: 20) | +| Horizontal alignment | Horizontal position of the hotspot on desktop | 0 – 100% (default: 20) | +| Width | Width of the hotspot content area on desktop | 20 – 800px (default: 300) | + +### Layout mobile + +| Setting | Description | Options | +|---------|-------------|---------| +| Vertical alignment | Vertical position of the hotspot on mobile | 0 – 100% (default: 20) | +| Horizontal alignment | Horizontal position of the hotspot on mobile | 0 – 100% (default: 20) | +| Width | Width of the hotspot content area on mobile | 5 – 400px (default: 250) | diff --git a/slab/blocks/_g__map-item.md b/slab/blocks/_g__map-item.md new file mode 100644 index 0000000..1860603 --- /dev/null +++ b/slab/blocks/_g__map-item.md @@ -0,0 +1,59 @@ +# Location + + +## Overview + +A map location block that defines a geographic point with latitude and longitude coordinates. It supports customizable spacing, color schemes, border options, and controls for pre-opened and single-open behavior. + + +## Block limitations + +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + + +## Common use cases + +- Use to define individual store locations or points of interest on an interactive map component. + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Latitude | Latitude coordinate for the location | Text input | +| Longitude | Longitude coordinate for the location | Text input | + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable internal padding | Adds internal padding to the block | Checkbox (default: true) | +| Enable horizontal padding | Adds horizontal padding to the block | Checkbox (default: false) | +| Enable top padding | Adds top padding to the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding to the block | Checkbox (default: false) | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Border color for the block | • Body foreground
• Subtle (default)
• Strong
• None | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Border position | Position of the border on the block | • None
• Top
• Bottom (default)
• Left
• Right
• Top & bottom
• Left & right
• All | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable pre-opened | Opens this location by default when the map loads | Checkbox (default: false) | +| Enable single open | Only allows one location to be open at a time | Checkbox (default: false) | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__menu-item.md b/slab/blocks/_g__menu-item.md index 15b2977..b924b06 100644 --- a/slab/blocks/_g__menu-item.md +++ b/slab/blocks/_g__menu-item.md @@ -1,36 +1,63 @@ # Menu item -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Menu dropdown](menu-dropdown.md) or [Menu page](menu-page.md) blocks. ## Overview -A menu item block component that renders content within a menu dropdown. Provides a container for theme and app blocks to be displayed when a menu item is selected. +A menu item block that renders content within a navigation menu dropdown. It provides a container for nested theme and app blocks that display when the corresponding menu item is selected. + + +## Block limitations + +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Use this block to add custom content like featured products, images or promotions to menu dropdowns -- Configure gap size and padding based on content type and design needs -- Ensure menu_key matches the parent menu item title for proper functionality +- Use to add custom content such as featured products, images, or promotions to navigation menu dropdowns. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks + +The following blocks can be nested within this block: + +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Menu | Key that matches the parent menu item handle | Text input | + +### Spacing + | Setting | Description | Options | |---------|-------------|---------| -| Menu key | Key that matches the parent menu item (handlized) | Text input | | Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | | Enable vertical padding | Adds vertical padding inside the container | Checkbox (default: false) | -| Gap size | Spacing between child blocks | None, Default (default), Xs, Sm, Md, Lg, Xl | -| Color scheme | Controls the background color scheme | Body (default), Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent | -| Border color | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when border position is not empty | -| Border position | Controls which sides have borders | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Gap size | Spacing between child elements | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Border color for the block | • Body foreground
• Subtle (default)
• Strong
• None | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style +| Setting | Description | Options | +|---------|-------------|---------| +| Border position | Position of the border on the block | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__slider-item.md b/slab/blocks/_g__slider-item.md index c9d1458..32f815d 100644 --- a/slab/blocks/_g__slider-item.md +++ b/slab/blocks/_g__slider-item.md @@ -1,39 +1,65 @@ # Slider item + ## Overview -A configurable slider item component designed to be used within the [Slider](layout__slider.md) block. Provides customizable width settings for both mobile and desktop displays, with optional gap sizing between child elements. +A slider item block that displays its content as an individual slide within a slider layout. It supports customizable width for mobile and desktop, spacing, color schemes, and responsive visibility options. + ## Block limitations This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Adjust width percentages based on desired number of visible items -- For equal width items across all slides, enable the default width setting -- Use the visibility options to create different experiences on mobile vs desktop -- Configure color schemes and borders to match your theme design +- Use as a child of a slider layout to create individual slides with independently sized and styled content. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks + +The following blocks can be nested within this block: + +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings +### Spacing + | Setting | Description | Options | |---------|-------------|---------| -| Enable padding | Adds padding around the slider item content | Checkbox (default: false) | -| Gap size | Controls spacing between child blocks | None, Default (default), XS, SM, MD, LG, XL | -| Color scheme | Controls the background and text colors | Body, Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent (default) | -| Color border | Controls the border color | Body, Subtle, Strong, Primary, Secondary, Tertiary, None (default). Visible when border position is not blank | -| Border position | Controls where borders appear | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All | -| Width mobile | Width of the slider item on mobile devices | 5 - 100 % (default: 80). Visible when enable default width is false | -| Width desktop | Width of the slider item on desktop devices | 5 - 100 % (default: 40). Visible when enable default width is false | -| Enable default width | Uses automatic width sizing for equal-width items | Checkbox (default: false) | -| Vertical alignment | Controls vertical alignment of content | Top, Middle, Bottom (default) | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Enable padding | Adds internal padding to the block | Checkbox (default: false) | +| Gap size | Spacing between child elements | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Border color for the block | • Body foreground
• Subtle
• Strong
• None (default) | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style +| Setting | Description | Options | +|---------|-------------|---------| +| Border position | Position of the border on the block | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Mobile width | Width of the slide on mobile devices | 5 – 100% (default: 80) | +| Desktop width | Width of the slide on desktop devices | 5 – 100% (default: 40) | +| Enable default width | Uses the parent container's default width setting for equal-width slides | Checkbox (default: false) | +| Vertical alignment | Vertical alignment of child content | • Top
• Middle
• Bottom (default) | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__tab-item.md b/slab/blocks/_g__tab-item.md index b2c2094..ec4fd8c 100644 --- a/slab/blocks/_g__tab-item.md +++ b/slab/blocks/_g__tab-item.md @@ -1,36 +1,57 @@ # Tab item + ## Overview -A configurable tab item block for creating tabbed content sections in Shopify themes. This block is designed to work with tab navigation systems and displays content only when its corresponding tab is selected. +A tab item block that displays its content when its corresponding tab is selected. It works with tab navigation systems and supports customizable spacing, color schemes, and responsive visibility options. + ## Block limitations This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Use consistent tab names across related tab items -- Consider responsive visibility settings for different content on mobile/desktop -- Adjust spacing and gap size to maintain visual consistency with your theme -- Configure color schemes to match your theme design +- Use as a child of a tab layout to create tabbed content sections where each tab reveals different nested content. + + +## Compatible blocks -## Child blocks +The following blocks can be nested within this block: -This block includes the following nested blocks: +- Any theme block +- Any app block -- All theme blocks -- App blocks ## Block settings +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Tab | Unique identifier for this tab that must match the tab name in the parent tabs block | Text input | +| Show as default tab | Displays this tab's content by default when the page loads | Checkbox (default: false) | + +### Spacing + | Setting | Description | Options | |---------|-------------|---------| -| Tab key | Unique identifier for this tab item (must match tab name in parent tabs block) | Text input | | Enable horizontal padding | Adds horizontal padding to the tab content | Checkbox (default: false) | | Enable vertical padding | Adds vertical padding to the tab content | Checkbox (default: true) | -| Gap size | Controls spacing between child blocks | None, Default (default), XS, SM, MD, LG, XL | -| Color scheme | Controls the background and text colors | Body (default), Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent | -| Vertical alignment | Controls vertical alignment of content | Top, Middle, Bottom | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Gap size | Spacing between child elements | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Display +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_g__table-cell.md b/slab/blocks/_g__table-cell.md index c999432..9b903dc 100644 --- a/slab/blocks/_g__table-cell.md +++ b/slab/blocks/_g__table-cell.md @@ -1,27 +1,29 @@ # Table cell + ## Overview -A table cell component that creates an individual cell within a layout__table block, providing a container for merchants to add custom content to table structures. +A table cell block that creates an individual cell within a table row. It provides a container for nested theme and app blocks to display custom content within table structures. + ## Block limitations This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. + ## Common use cases -- Add blocks inside the cell to create rich content -- When highlighting columns is needed, ensure the table component has proper Alpine.js initialization -- Must be used within a _table-row component +- Use within a table row to create rich content cells in structured table layouts. -## Child blocks -This block includes the following nested blocks: +## Compatible blocks -- All theme blocks -- App blocks +The following blocks can be nested within this block: + +- Any theme block +- Any app block -## Block settings -This block has no configurable settings. All styling and behavior is inherited from the parent table component. +## Block settings +This block has no configurable settings. diff --git a/slab/blocks/_g__table-row.md b/slab/blocks/_g__table-row.md index 954175d..9d22a9f 100644 --- a/slab/blocks/_g__table-row.md +++ b/slab/blocks/_g__table-row.md @@ -3,29 +3,26 @@ ## Overview -A table row component that can be added to the layout__table block. Allows merchants to add content to each cell in the row. +A table row block that creates a horizontal row within a table layout. It provides the row structure and accepts table cell blocks as children for individual cell content. -## Common use cases +## Block limitations -- Add multiple _table-cell blocks to create a complete row -- For best appearance, ensure all rows have the same number of cells -- Create structured table layouts with consistent cell arrangements +This is a private block. It is intended for use only within specific parent blocks and should not be added directly to sections. -## Block limitations +## Common use cases -This is a private block that can only be used within the layout__table block. It provides the table row structure and supports _g__table-cell blocks for individual cells. It is not available in the general block picker. +- Use within a table layout to create structured rows that contain table cell blocks. -## Child blocks +## Compatible blocks -This block includes the following nested blocks: +The following blocks can be nested within this block: -- Table cell +- [Table cell](_g__table-cell.md) ## Block settings -This block has no settings. - +This block has no configurable settings. diff --git a/slab/blocks/_grid-articles.md b/slab/blocks/_grid-articles.md index f7f65de..8f39f90 100644 --- a/slab/blocks/_grid-articles.md +++ b/slab/blocks/_grid-articles.md @@ -3,7 +3,7 @@ ## Overview -A blog article grid block that displays articles from a selected blog. Supports filtering by tag and customizable display settings including item count and device visibility. +A blog article grid block that displays articles from a selected blog in a grid layout. It supports filtering by tag, configurable item count, and responsive device visibility. ## Block limitations @@ -13,16 +13,7 @@ This is a private block. It is intended for use only within specific parent bloc ## Common use cases -- Use this block when you want to display a specific blog's articles in a grid layout -- Set an appropriate item_count to control the number of articles shown -- Use the tag filter to display a subset of articles that match a specific tag - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Article card](article-card.md) +- Use to display a selection of blog articles in a grid, optionally filtered by tag. ## Block settings @@ -35,9 +26,8 @@ The following blocks can be nested within this block: | Item count | Maximum number of articles to display | Number input (default: 8) | | Filter by tag | Filter articles by a specific tag | Text input | - ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_grid-collections.md b/slab/blocks/_grid-collections.md index b88ee77..ff4d3bd 100644 --- a/slab/blocks/_grid-collections.md +++ b/slab/blocks/_grid-collections.md @@ -3,7 +3,7 @@ ## Overview -A collection grid block that displays collections from a selected collection list. Supports customizable display settings including device visibility. +A collection grid block that displays collections from a selected collection list in a grid layout. It supports responsive device visibility settings. ## Block limitations @@ -13,15 +13,7 @@ This is a private block. It is intended for use only within specific parent bloc ## Common use cases -- Use this block when you want to display multiple collections in a grid layout -- Configure visibility settings to control display on different devices - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Collection card](collection-card.md) +- Use to display multiple collections in a grid layout for collection discovery pages or homepage sections. ## Block settings @@ -30,11 +22,10 @@ The following blocks can be nested within this block: | Setting | Description | Options | |---------|-------------|---------| -| Collection list | Select the collection list to display collections from | Collection list picker | - +| Collection list | Select the collections to display | Collection list picker | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_grid-gallery.md b/slab/blocks/_grid-gallery.md index 04f2894..bd6f8a9 100644 --- a/slab/blocks/_grid-gallery.md +++ b/slab/blocks/_grid-gallery.md @@ -3,7 +3,7 @@ ## Overview -A grid gallery block that displays media from a selected product. It iterates through the selected product's media to display images, videos, external videos, and 3D models. The block is highly customizable, supporting various styling options including color schemes, border configurations, and responsive visibility settings. +A product gallery block that displays media from a selected product in a grid layout. It supports images, videos, external videos, and 3D models with configurable aspect ratios, color schemes, and responsive device visibility settings. ## Block limitations @@ -13,51 +13,43 @@ This is a private block. It is intended for use only within specific parent bloc ## Common use cases -- Always select a product in the theme editor to populate the gallery with media -- Adjust item_count to control the number of media items displayed in the gallery -- Utilize enable_aspect_ratio and aspect_ratio settings to maintain consistent media proportions across different devices -- Experiment with color_scheme, color_border, and border_position for visual customization to match the theme's aesthetic -- Use visibility options to create responsive layouts, showing different gallery configurations on mobile and desktop -- Enable variant images to show different images based on selected product variants +- Use to display product media in a grid, with optional variant-based image filtering and customizable aspect ratios. ## Block settings +| Setting | Description | Options | +|---------|-------------|---------| +| Show selected variant images only | Displays only images associated with the selected variant | Checkbox (default: false) | + ### Content | Setting | Description | Options | |---------|-------------|---------| -| Enable variant images | Shows different images based on selected product variants | Checkbox (default: false) | | Product | Select the product to display media from | Product picker | -| Item count | Number of media items to display (0 = all media) | Number input (default: 7) | - +| Item count | Maximum number of media items to display | Number input (default: 7) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | - +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Scheme | Color scheme picker for custom mode | Color scheme picker | +| Scheme | Color scheme for the block | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Border color for the block | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - - -### Layout - -| Setting | Description | Options | -|---------|-------------|---------| +| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | | Enable aspect ratio | Maintains consistent aspect ratio for all media items | Checkbox (default: false) | -| Show entire image | Displays entire image without cropping | Checkbox (default: true)

Visible when enable aspect ratio is true | -| Aspect ratio | Aspect ratio for media items | • Square
• Landscape
• Portrait
• None

Visible when enable aspect ratio is true | - +| Show entire image | Displays the entire image without cropping | Checkbox (default: true) | +| Aspect ratio | Aspect ratio for media items | • Square
• Landscape
• Portrait
• None (default) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_grid-products.md b/slab/blocks/_grid-products.md index 0cc48ae..0003c08 100644 --- a/slab/blocks/_grid-products.md +++ b/slab/blocks/_grid-products.md @@ -3,7 +3,7 @@ ## Overview -A product grid block that displays products from a selected collection. Supports filtering by tag and customizable display settings including item count and device visibility. +A product grid block that displays products from a selected collection in a grid layout. It supports filtering by tag, configurable item count, and responsive device visibility. ## Block limitations @@ -13,17 +13,7 @@ This is a private block. It is intended for use only within specific parent bloc ## Common use cases -- Use this block when you want to display a specific collection's products in a grid layout -- Set an appropriate item_count to control the number of products shown -- Use the tag filter to display a subset of products that match a specific tag -- Optionally hide products that are already in the customer's cart - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Product card](product-card.md) +- Use to display a collection's products in a grid, optionally filtered by tag. ## Block settings @@ -35,11 +25,10 @@ The following blocks can be nested within this block: | Collection | Select the collection to display products from | Collection picker | | Item count | Maximum number of products to display | Number input (default: 7) | | Filter by tag | Filter products by a specific tag | Text input | -| Show products in cart | Shows products even if they're already in the cart | Checkbox (default: true) | - +| Show products in cart | Shows products even if they are already in the cart | Checkbox (default: true) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_grid-recent.md b/slab/blocks/_grid-recent.md index 83e25c4..3128663 100644 --- a/slab/blocks/_grid-recent.md +++ b/slab/blocks/_grid-recent.md @@ -3,7 +3,7 @@ ## Overview -A grid block that displays the recently viewed products in a grid layout. Uses Alpine.js to display products from the recently viewed products store. +A recently viewed products block that displays products the customer has previously viewed in a grid layout. It supports configurable item count and responsive device visibility. ## Block limitations @@ -13,17 +13,7 @@ This is a private block. It is intended for use only within specific parent bloc ## Common use cases -- Display recently viewed products to encourage customers to return to products they've seen -- Adjust item count based on available space in your layout -- Use responsive visibility to show different counts on mobile vs desktop -- Product cards are dynamically loaded to prevent layout shifts - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Product card](product-card.md) (dynamically loaded) +- Use to display recently viewed products in a grid to encourage customers to revisit products they have browsed. ## Block settings @@ -34,9 +24,8 @@ The following blocks can be nested within this block: |---------|-------------|---------| | Item count | Maximum number of recently viewed products to display | Number input (default: 5) | - ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_grid-recommendations.md b/slab/blocks/_grid-recommendations.md index 3688093..bc728fb 100644 --- a/slab/blocks/_grid-recommendations.md +++ b/slab/blocks/_grid-recommendations.md @@ -3,7 +3,7 @@ ## Overview -A dynamic product recommendations block that displays recommended products in a grid layout. This block uses Alpine.js to asynchronously load product recommendations from Shopify's recommendation engine based on a source product. +A product recommendations block that displays recommended products from Shopify's recommendation engine in a grid layout. It supports related and complementary intents, tag filtering, configurable item count, and responsive device visibility. ## Block limitations @@ -13,37 +13,26 @@ This is a private block. It is intended for use only within specific parent bloc ## Common use cases -- Set a source product in block settings before adding to ensure relevant recommendations -- Adjust item count (default: 5) based on your grid layout and available space -- Use tag filtering when you want to show only products from specific collections or categories -- Enable "show products in cart" for cross-sell scenarios, disable for upsell to avoid redundancy -- Configure the nested product card blocks to match your theme's design system -- Consider using responsive visibility options to show different recommendation counts on mobile vs desktop -- The block works best when placed on product pages, cart pages, or thank you pages - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Product card](product-card.md) +- Use to display product recommendations in a grid, with support for related or complementary product suggestions. ## Block settings +| Setting | Description | Options | +|---------|-------------|---------| +| Intent | Type of product recommendations to display | • Related (default)
• Complementary | + ### Content | Setting | Description | Options | |---------|-------------|---------| -| Intent | Type of product recommendations | • Related (default)
• Complementary | -| Product | Source product for generating recommendations | Product picker | +| Product | Select the source product for generating recommendations | Product picker | | Item count | Maximum number of recommendations to display | Number input (default: 5) | | Filter by tag | Filter recommendations by a specific tag | Text input | -| Show products in cart | Shows recommended products even if they're already in the cart | Checkbox (default: true) | - +| Show products in cart | Shows recommended products even if they are already in the cart | Checkbox (default: true) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/_layout__blog.md b/slab/blocks/_layout__blog.md index 2be6eff..4f7e692 100644 --- a/slab/blocks/_layout__blog.md +++ b/slab/blocks/_layout__blog.md @@ -1,29 +1,28 @@ # Blog grid - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within blog templates. +A paginated grid layout for displaying blog articles with configurable columns, spacing, and styling options. Designed for use within blog templates. ## Overview -A block for displaying paginated blog articles in a customizable grid layout with configurable columns, spacing, and styling. This block supports blog templates and contains provisions for sidebar and top bar filters. +Renders blog articles in a responsive grid with pagination support. Includes provisions for sidebar filters and top/bottom bar containers. ## Common use cases -- Adjust items_per_page based on your store's needs -- Set appropriate row_desktop and row_mobile values for responsive design +Use this block to display paginated blog articles in a customizable grid layout on blog pages. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within blog templates. It requires a blog context to paginate articles and must be placed inside a section that provides blog data. It is private because it depends on the blog template context and is not designed for standalone use. ## Compatible blocks -The following blocks can be nested within this block: +This block accepts the following nested block types: -- Grid paginate item blocks -- [Container](layout/container.md) blocks (for top bar, sidebars, bottom bar) -- [Pagination](_pagination.md) +- `_g__grid-paginateitem` ## Block settings @@ -31,45 +30,43 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Items per page | Number of articles per page | 1 - 32 (default: 10) | - +| --- | --- | --- | +| Items per page | Number of items displayed per page | 1 – 32 (default: 10) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Spacing above the grid | 0 - 300 px (default: 0) | -| Bottom spacing | Spacing below the grid | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the grid | Checkbox (default: false) | -| Gap size | Spacing between grid items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| --- | --- | --- | +| Top spacing | Padding space above the block content | 0 – 300 px (default: 0) | +| Bottom spacing | Padding space below the block content | 0 – 300 px (default: 0) | +| Enable horizontal padding | Adds horizontal padding to the block | Checkbox (default: false) | +| Gap size | Controls the space between grid items | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Border color | Controls the border color | • Subtle (default)
• Strong | - +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme | Color scheme picker | +| Border | Sets the border color style | • Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls which sides have borders | • None (default)
• Top
• Bottom
• Top and bottom | - +| --- | --- | --- | +| Border position | Sets the position of the border | • None (default)
• Top
• Bottom
• Top & bottom | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Row desktop | Number of columns on desktop | 1 - 8 (default: 5) | -| Row mobile | Number of columns on mobile | 1 - 3 (default: 2) | -| Enable margin | Adds margin around the grid | Checkbox (default: false) | - +| --- | --- | --- | +| Desktop row size | Number of columns displayed on desktop | 1 – 8 (default: 5) | +| Mobile row size | Number of columns displayed on mobile | 1 – 3 (default: 2) | +| Enable margin | Adds outer margin to the block | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_layout__collection.md b/slab/blocks/_layout__collection.md index 44c4ab9..5c63e7a 100644 --- a/slab/blocks/_layout__collection.md +++ b/slab/blocks/_layout__collection.md @@ -1,29 +1,28 @@ # Collection grid - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within collection templates. +A paginated grid layout for displaying collection products with configurable columns, spacing, and styling options. Designed for use within collection templates. ## Overview -A block for displaying paginated collection products in a customizable grid layout with configurable columns, spacing, and styling. This block supports collection templates and contains provisions for sidebar and top bar filters. +Renders collection products in a responsive grid with pagination support. Includes provisions for sidebar filters and top/bottom bar containers. ## Common use cases -- Adjust items_per_page based on your store's needs -- Set appropriate row_desktop and row_mobile values for responsive design +Use this block to display paginated products in a customizable grid layout on collection pages. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within collection templates. It requires a collection context to paginate products and must be placed inside a section that provides collection data. It is private because it depends on the collection template context and is not designed for standalone use. ## Compatible blocks -The following blocks can be nested within this block: +This block accepts the following nested block types: -- Grid paginate item blocks -- [Container](layout/container.md) blocks (for top bar, sidebars, bottom bar) -- [Pagination](_pagination.md) +- `_g__grid-paginateitem` ## Block settings @@ -31,45 +30,43 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Items per page | Number of products per page | 1 - 32 (default: 10) | - +| --- | --- | --- | +| Items per page | Number of items displayed per page | 1 – 32 (default: 10) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Spacing above the grid | 0 - 300 px (default: 0) | -| Bottom spacing | Spacing below the grid | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the grid | Checkbox (default: false) | -| Gap size | Spacing between grid items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| --- | --- | --- | +| Top spacing | Padding space above the block content | 0 – 300 px (default: 0) | +| Bottom spacing | Padding space below the block content | 0 – 300 px (default: 0) | +| Enable horizontal padding | Adds horizontal padding to the block | Checkbox (default: false) | +| Gap size | Controls the space between grid items | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Border color | Controls the border color | • Subtle (default)
• Strong | - +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme | Color scheme picker | +| Border | Sets the border color style | • Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls which sides have borders | • None (default)
• Top
• Bottom
• Top and bottom | - +| --- | --- | --- | +| Border position | Sets the position of the border | • None (default)
• Top
• Bottom
• Top & bottom | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Row desktop | Number of columns on desktop | 1 - 8 (default: 5) | -| Row mobile | Number of columns on mobile | 1 - 3 (default: 2) | -| Enable margin | Adds margin around the grid | Checkbox (default: false) | - +| --- | --- | --- | +| Desktop row size | Number of columns displayed on desktop | 1 – 8 (default: 5) | +| Mobile row size | Number of columns displayed on mobile | 1 – 3 (default: 2) | +| Enable margin | Adds outer margin to the block | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_layout__list-collections.md b/slab/blocks/_layout__list-collections.md index 0dbc889..61a5c99 100644 --- a/slab/blocks/_layout__list-collections.md +++ b/slab/blocks/_layout__list-collections.md @@ -1,29 +1,28 @@ # Collections grid - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within collection list templates. +A paginated grid layout for displaying collections with configurable columns, spacing, and styling options. Designed for use within collection list templates. ## Overview -A block for displaying paginated collections in a customizable grid layout with configurable columns, spacing, and styling. This block supports collection list templates. +Renders collections in a responsive grid with pagination support. Includes provisions for sidebar filters and top/bottom bar containers. ## Common use cases -- Adjust items_per_page based on your store's needs -- Set appropriate row_desktop and row_mobile values for responsive design +Use this block to display paginated collections in a customizable grid layout on the collection list page. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within collection list templates. It requires access to all collections to paginate and must be placed inside a section that provides collection list data. It is private because it depends on the collection list template context and is not designed for standalone use. ## Compatible blocks -The following blocks can be nested within this block: +This block accepts the following nested block types: -- Grid paginate item blocks -- [Container](layout/container.md) blocks (for top bar, sidebars, bottom bar) -- [Pagination](_pagination.md) +- `_g__grid-paginateitem` ## Block settings @@ -31,45 +30,43 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Items per page | Number of collections per page | 1 - 32 (default: 10) | - +| --- | --- | --- | +| Items per page | Number of items displayed per page | 1 – 32 (default: 10) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Spacing above the grid | 0 - 300 px (default: 0) | -| Bottom spacing | Spacing below the grid | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the grid | Checkbox (default: false) | -| Gap size | Spacing between grid items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| --- | --- | --- | +| Top spacing | Padding space above the block content | 0 – 300 px (default: 0) | +| Bottom spacing | Padding space below the block content | 0 – 300 px (default: 0) | +| Enable horizontal padding | Adds horizontal padding to the block | Checkbox (default: false) | +| Gap size | Controls the space between grid items | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Border color | Controls the border color | • Subtle (default)
• Strong | - +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme | Color scheme picker | +| Border | Sets the border color style | • Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls which sides have borders | • None (default)
• Top
• Bottom
• Top and bottom | - +| --- | --- | --- | +| Border position | Sets the position of the border | • None (default)
• Top
• Bottom
• Top & bottom | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Row desktop | Number of columns on desktop | 1 - 8 (default: 5) | -| Row mobile | Number of columns on mobile | 1 - 3 (default: 2) | -| Enable margin | Adds margin around the grid | Checkbox (default: false) | - +| --- | --- | --- | +| Desktop row size | Number of columns displayed on desktop | 1 – 8 (default: 5) | +| Mobile row size | Number of columns displayed on mobile | 1 – 3 (default: 2) | +| Enable margin | Adds outer margin to the block | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_layout__search.md b/slab/blocks/_layout__search.md index 7efc974..8cd6106 100644 --- a/slab/blocks/_layout__search.md +++ b/slab/blocks/_layout__search.md @@ -1,30 +1,28 @@ # Search grid - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within search templates. +A paginated grid layout for displaying search results with configurable columns, spacing, and styling options. Designed for use within search templates. ## Overview -A block for displaying paginated search results in a customizable grid layout with configurable columns, spacing, and styling. This block supports search result templates with mixed content types (products, articles, pages) and contains provisions for sidebar and top bar filters. +Renders search results in a responsive grid with pagination support. Includes provisions for sidebar filters and top/bottom bar containers. ## Common use cases -- Adjust items_per_page based on your store's needs -- Set appropriate row_desktop and row_mobile values for responsive design +Use this block to display paginated search results in a customizable grid layout on the search results page. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within search templates. It requires a search context to paginate results and must be placed inside a section that provides search data. It is private because it depends on the search template context and is not designed for standalone use. ## Compatible blocks -The following blocks can be nested within this block: +This block accepts the following nested block types: -- Grid paginate item blocks -- [Container](layout/container.md) blocks (for top bar, sidebars, bottom bar) -- [Pagination](_pagination.md) -- [Filter](filter.md) blocks +- `_g__grid-paginateitem` ## Block settings @@ -32,45 +30,43 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Items per page | Number of results per page | 1 - 32 (default: 10) | - +| --- | --- | --- | +| Items per page | Number of items displayed per page | 1 – 32 (default: 10) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Spacing above the grid | 0 - 300 px (default: 0) | -| Bottom spacing | Spacing below the grid | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the grid | Checkbox (default: false) | -| Gap size | Spacing between grid items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| --- | --- | --- | +| Top spacing | Padding space above the block content | 0 – 300 px (default: 0) | +| Bottom spacing | Padding space below the block content | 0 – 300 px (default: 0) | +| Enable horizontal padding | Adds horizontal padding to the block | Checkbox (default: false) | +| Gap size | Controls the space between grid items | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Border color | Controls the border color | • Subtle (default)
• Strong | - +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme | Color scheme picker | +| Border | Sets the border color style | • Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls which sides have borders | • None (default)
• Top
• Bottom
• Top and bottom | - +| --- | --- | --- | +| Border position | Sets the position of the border | • None (default)
• Top
• Bottom
• Top & bottom | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Row desktop | Number of columns on desktop | 1 - 8 (default: 5) | -| Row mobile | Number of columns on mobile | 1 - 3 (default: 2) | -| Enable margin | Adds margin around the grid | Checkbox (default: false) | - +| --- | --- | --- | +| Desktop row size | Number of columns displayed on desktop | 1 – 8 (default: 5) | +| Mobile row size | Number of columns displayed on mobile | 1 – 3 (default: 2) | +| Enable margin | Adds outer margin to the block | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_pagination.md b/slab/blocks/_pagination.md index 2fa7b50..8de32a2 100644 --- a/slab/blocks/_pagination.md +++ b/slab/blocks/_pagination.md @@ -1,38 +1,74 @@ # Pagination -## Block limitations +A pagination component that provides infinite scroll, load more button, and numbered page navigation options. Designed for use within paginated layout blocks. -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within paginated layout blocks. ## Overview -A pagination component that provides options for infinite scroll, load more button, and numbered page navigation within paginated content. +Renders pagination controls for paginated content with three display modes: infinite scroll, load more on click, and next/back buttons. Supports sticky positioning, customizable button styles, and responsive visibility. + ## Common use cases -- Use within paginated collections or search results -- Choose pagination type based on user experience needs +Use this block to add pagination controls within paginated layout blocks such as collection grids, blog grids, or search grids. + -## Child blocks +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within paginated layout blocks such as collection grid, blog grid, search grid, and collections grid. It requires a paginate object from a parent layout block and is not designed for standalone use. It is private because it depends on pagination context provided by its parent. -This block does not support child blocks. ## Block settings +### Pagination type + +| Setting | Description | Options | +| --- | --- | --- | +| Pagination type | Controls how additional pages are loaded | • Load more on scroll (default)
• Load more on click
• Next/back buttons | + +### Content + +| Setting | Description | Options | +| --- | --- | --- | +| Label | Custom label text for the load more button | Text input | +| Show page count | Displays the current page and total page count | Checkbox (default: true) | + +### Spacing + | Setting | Description | Options | -|---------|-------------|---------| -| Pagination type | Type of pagination to display | Scroll (default), Load, Pages | -| Label | Custom label for load more button | Text input | -| Show page count | Displays current page and total pages | Checkbox (default: true) | -| Top spacing | Spacing above the pagination | 0 - 300 px (default: 0) | -| Bottom spacing | Spacing below the pagination | 0 - 300 px (default: 0) | +| --- | --- | --- | +| Top spacing | Padding space above the pagination | 0 – 300 px (default: 0) | +| Bottom spacing | Padding space below the pagination | 0 – 300 px (default: 0) | | Enable padding | Adds padding around the pagination | Checkbox (default: true) | -| Color scheme | Controls the background color scheme | Body, Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent (default) | -| Border color | Controls the border color | Body, Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when border position is not empty | -| Button color | Color style for pagination buttons | Primary, Secondary (default), Tertiary, Neutral, Plain, Outline, Inverted outline, Blur, Link, Inverted link | -| Border position | Controls which sides have borders | None (default), Top, Bottom, Left, Right, Top and bottom, Left and right, All | -| Button size | Size of pagination buttons | Extra small, Small (default), Standard, Large | -| Horizontal alignment | Controls horizontal alignment | Left, Center (default), Right | -| Sticky position | Makes the pagination stick to viewport | None (default), Top, Bottom | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +### Color + +| Setting | Description | Options | +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme for the background | Color scheme picker | +| Scheme | Sets the background color scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Sets the border color style | • Body
• Subtle (default)
• Strong
• None | +| Button | Selects a custom color scheme for the button | Color scheme picker | +| Button | Sets the button color style | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +| --- | --- | --- | +| Border position | Sets the position of the border | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | +| Button size | Controls the size of pagination buttons | • Extra small
• Small (default)
• Standard
• Large | + +### Layout + +| Setting | Description | Options | +| --- | --- | --- | +| Horizontal alignment | Controls horizontal alignment of the pagination | • Left
• Center (default)
• Right | +| Sticky position | Makes the pagination stick to the viewport edge | • None (default)
• Top
• Bottom | + +### Display + +| Setting | Description | Options | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_slider-articles.md b/slab/blocks/_slider-articles.md index 9098411..c2d1ce8 100644 --- a/slab/blocks/_slider-articles.md +++ b/slab/blocks/_slider-articles.md @@ -1,22 +1,21 @@ # Slider articles - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Slider](layout__slider.md) block. +A slider component for displaying blog articles in a horizontally scrollable layout. Designed for use within the slider layout block. ## Overview -A customizable slider component for displaying blog articles in a horizontal scrollable layout. This block iterates through articles from a selected blog and renders them as slider items with configurable layout options. +Renders articles from a selected blog as horizontally scrollable slider items with responsive width controls. Supports filtering articles by tag. ## Common use cases -- Use this block when you want to showcase blog content in a scrollable slider format -- Configure the widths carefully to ensure proper display on different devices -- When using tag filtering, ensure articles have appropriate tags assigned -- For best results, use with blog content that has consistent image dimensions +Use this block to showcase blog content in a horizontal slider format within the slider layout block. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within the slider layout block. It requires a blog context to iterate articles and must be nested inside a slider container. It is private because it depends on the slider layout for its scrollable behavior and is not designed for standalone use. ## Block settings @@ -24,22 +23,20 @@ A customizable slider component for displaying blog articles in a horizontal scr ### Content | Setting | Description | Options | -|---------|-------------|---------| +| --- | --- | --- | | Blog | Blog to display articles from | Blog picker | -| Item count | Number of articles to display | Number (default: 7) | -| Filter by tag | Filter articles by a specific tag | Text input | +| Item count | Number of articles to display | Number input (default: 7) | +| Filter by tag | Filters articles to only show those with this tag | Text input | - -### Spacing +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width mobile | Width of each slider item on mobile | 5 - 100 % (default: 80) | -| Width desktop | Width of each slider item on desktop | 5 - 100 % (default: 20) | - +| --- | --- | --- | +| Mobile width | Width of each slider item on mobile | 5 – 100 % (default: 80) | +| Desktop width | Width of each slider item on desktop | 5 – 100 % (default: 20) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_slider-collections.md b/slab/blocks/_slider-collections.md index 71873ab..e21e581 100644 --- a/slab/blocks/_slider-collections.md +++ b/slab/blocks/_slider-collections.md @@ -1,21 +1,21 @@ # Slider collections - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Slider](layout__slider.md) block. +A slider component for displaying collections in a horizontally scrollable layout. Designed for use within the slider layout block. ## Overview -A customizable slider component for displaying collections in a horizontal scrollable layout. This block iterates through collections selected by the merchant and renders them as slider items with configurable layout options. +Renders collections from a merchant-selected collection list as horizontally scrollable slider items with responsive width controls. Falls back to all collections in the theme editor when no collection list is selected. ## Common use cases -- Use this block when you want to showcase collections in a scrollable slider format -- Configure the widths carefully to ensure proper display on different devices -- For best results, use with collections that have consistent image dimensions +Use this block to showcase collections in a horizontal slider format within the slider layout block. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within the slider layout block. It requires a collection list selection and must be nested inside a slider container. It is private because it depends on the slider layout for its scrollable behavior and is not designed for standalone use. ## Block settings @@ -23,20 +23,18 @@ A customizable slider component for displaying collections in a horizontal scrol ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Collection list | Collections to display | Collection list picker | +| --- | --- | --- | +| Collection list | Collections to display in the slider | Collection list picker | - -### Spacing +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width mobile | Width of each slider item on mobile | 5 - 100 % (default: 80) | -| Width desktop | Width of each slider item on desktop | 5 - 100 % (default: 20) | - +| --- | --- | --- | +| Mobile width | Width of each slider item on mobile | 5 – 100 % (default: 80) | +| Desktop width | Width of each slider item on desktop | 5 – 100 % (default: 20) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_slider-gallery.md b/slab/blocks/_slider-gallery.md index 15eb9d7..764bb17 100644 --- a/slab/blocks/_slider-gallery.md +++ b/slab/blocks/_slider-gallery.md @@ -1,69 +1,64 @@ # Slider gallery - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Slider](layout__slider.md) block. +A product media gallery component that displays images, videos, and 3D models in a slider format. Designed for use within the slider layout block. ## Overview -A product media gallery component that displays a collection of media items (images, videos, 3D models) in a slider format. This block is designed to work within a slider section, supporting responsive layouts and various media types from a product. +Renders product media items as horizontally scrollable slider items with responsive width controls. Supports variant image filtering, aspect ratio settings, and customizable color and border styling. ## Common use cases -- Best used within a slider section for product galleries -- Configure appropriate widths based on your layout needs -- Consider enabling zoom functionality for product images when detail viewing is important -- Use in conjunction with navigation controls for better user experience +Use this block to display a product's media gallery in a horizontal slider format within the slider layout block. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within the slider layout block. It requires a product context to access media items and must be nested inside a slider container. It is private because it depends on the slider layout for its scrollable behavior and is not designed for standalone use. ## Block settings +| Setting | Description | Options | +| --- | --- | --- | +| Show selected variant images only | Filters gallery to show only images associated with the selected variant | Checkbox (default: false) | + ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Show variant images | Shows variant-specific images in the gallery | Checkbox (default: false) | +| --- | --- | --- | | Product | Product to display media from | Product picker | -| Item count | Number of media items to display | Number (default: 7) | - +| Item count | Number of media items to display | Number input (default: 7) | -### Spacing +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width mobile | Width of each slider item on mobile | 5 - 100 % (default: 80) | -| Width desktop | Width of each slider item on desktop | 5 - 100 % (default: 40) | - +| --- | --- | --- | +| Mobile width | Width of each slider item on mobile | 5 – 100 % (default: 80) | +| Desktop width | Width of each slider item on desktop | 5 – 100 % (default: 40) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background color scheme | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not empty | - +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme | Color scheme picker | +| Background | Sets the background color | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Sets the border color style | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls which sides have borders | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - - -### Layout - -| Setting | Description | Options | -|---------|-------------|---------| -| Enable aspect ratio | Maintains a consistent aspect ratio for media | Checkbox (default: false) | -| Show entire image | Shows the full image without cropping | Checkbox (default: true)

Visible when enable aspect ratio is true | -| Aspect ratio | Aspect ratio for the media container | • Square
• Landscape
• Portrait
• None

Visible when enable aspect ratio is true | - +| --- | --- | --- | +| Border position | Sets the position of the border | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | +| Enable aspect ratio | Maintains a consistent aspect ratio for media items | Checkbox (default: false) | +| Show entire image | Shows the full image without cropping | Checkbox (default: true) | +| Aspect ratio | Sets the aspect ratio for the media container | • Square
• Landscape
• Portrait
• None (default) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_slider-products.md b/slab/blocks/_slider-products.md index 56c4ff8..8553e82 100644 --- a/slab/blocks/_slider-products.md +++ b/slab/blocks/_slider-products.md @@ -1,22 +1,21 @@ # Slider products - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Slider](layout__slider.md) block. +A product slider component for displaying collection products in a horizontally scrollable layout. Designed for use within the slider layout block. ## Overview -A product slider component designed to display a collection of products within the [Slider](layout__slider.md) block. This block renders individual product items in a horizontally scrollable slider format with responsive sizing and customizable gap spacing. +Renders products from a selected collection as horizontally scrollable slider items with responsive width controls. Supports filtering by tag and optionally hiding products already in the cart. ## Common use cases -- Use for featuring product collections in a horizontal slider format -- Adjust width settings based on how many products you want visible at once -- Consider mobile experience when setting width values -- Use tag filtering to create themed or curated product collections +Use this block to feature product collections in a horizontal slider format within the slider layout block. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within the slider layout block. It requires a collection selection and must be nested inside a slider container. It is private because it depends on the slider layout for its scrollable behavior and is not designed for standalone use. ## Block settings @@ -24,23 +23,21 @@ A product slider component designed to display a collection of products within t ### Content | Setting | Description | Options | -|---------|-------------|---------| +| --- | --- | --- | | Collection | Collection to display products from | Collection picker | -| Item count | Number of products to display | Number (default: 7) | -| Filter by tag | Filter products by a specific tag | Text input | -| Show products in cart | Displays products even if they're already in the cart | Checkbox (default: true) | +| Item count | Number of products to display | Number input (default: 7) | +| Filter by tag | Filters products to only show those with this tag | Text input | +| Show products in cart | When disabled, products that are added to the cart will not be shown | Checkbox (default: true) | - -### Spacing +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width mobile | Width of each slider item on mobile | 5 - 100 % (default: 80) | -| Width desktop | Width of each slider item on desktop | 5 - 100 % (default: 20) | - +| --- | --- | --- | +| Mobile width | Width of each slider item on mobile | 5 – 100 % (default: 80) | +| Desktop width | Width of each slider item on desktop | 5 – 100 % (default: 20) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_slider-recent.md b/slab/blocks/_slider-recent.md index b1baece..687e7c1 100644 --- a/slab/blocks/_slider-recent.md +++ b/slab/blocks/_slider-recent.md @@ -1,21 +1,21 @@ -# Slider recent +# Recently viewed - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Slider](layout__slider.md) block. +A slider component that displays recently viewed products in a horizontally scrollable layout. Designed for use within the slider layout block. ## Overview -A slider block that displays the recently viewed products in a slider layout. Uses Alpine.js to display the recently viewed products dynamically. +Renders recently viewed products as horizontally scrollable slider items with responsive width controls. Products are dynamically loaded from the browser using Alpine.js and the Shopify API. ## Common use cases -- Display recently viewed products in a horizontal slider format -- Show personalized product recommendations based on browsing history -- Use on product pages, collection pages, or homepage to encourage repeat engagement +Use this block to display recently viewed products in a horizontal slider format within the slider layout block. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within the slider layout block. It requires browser-side recently viewed product data and must be nested inside a slider container. It is private because it depends on the slider layout for its scrollable behavior and Alpine.js store data for its content. ## Block settings @@ -23,20 +23,18 @@ A slider block that displays the recently viewed products in a slider layout. Us ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Item count | Number of recently viewed products to display | Number (default: 5) | +| --- | --- | --- | +| Item count | Number of recently viewed products to display | Number input (default: 5) | - -### Spacing +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width mobile | Width of each slider item on mobile | 5 - 100 % (default: 80) | -| Width desktop | Width of each slider item on desktop | 5 - 100 % (default: 20) | - +| --- | --- | --- | +| Mobile width | Width of each slider item on mobile | 5 – 100 % (default: 80) | +| Desktop width | Width of each slider item on desktop | 5 – 100 % (default: 20) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_slider-recommendations.md b/slab/blocks/_slider-recommendations.md index 00f56fc..d468ebe 100644 --- a/slab/blocks/_slider-recommendations.md +++ b/slab/blocks/_slider-recommendations.md @@ -1,50 +1,47 @@ -# Slider recommendations +# Product recommendations - -## Block limitations - -This is a private block and can only be used within specific parent blocks. It is designed to work exclusively within the [Slider](layout__slider.md) block. +A dynamic product recommendations slider that displays related or complementary products in a horizontally scrollable layout. Designed for use within the slider layout block. ## Overview -A dynamic product recommendations block that displays recommended products in a horizontal slider layout with scroll snap behavior. This block uses Alpine.js to asynchronously load product recommendations from Shopify's recommendation engine based on a source product. Products are displayed as horizontally scrollable cards with configurable widths and support for filtering by tags, cart status, and responsive visibility options. +Renders product recommendations from the Shopify Product Recommendations API as horizontally scrollable slider items with responsive width controls. Supports related and complementary intent modes, tag filtering, and optionally hiding products already in the cart. ## Common use cases -- Set a source product in block settings before adding to ensure relevant recommendations -- Adjust item count (default: 5) based on your slider layout and desired scroll behavior -- Configure width_mobile (default: 80vw) and width_desktop (default: 40vw) to control how many items are visible at once -- Use tag filtering when you want to show only products from specific collections or categories -- Enable "show products in cart" for cross-sell scenarios, disable for upsell to avoid redundancy -- The block works best when placed on product pages, cart pages, or thank you pages -- Best suited for contexts where horizontal scrolling is preferred over a static grid layout +Use this block to display product recommendations in a horizontal slider format within the slider layout block. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within the slider layout block. It requires a source product for generating recommendations and must be nested inside a slider container. It is private because it depends on the slider layout for its scrollable behavior and uses the Shopify Product Recommendations API loaded via Alpine.js. ## Block settings +| Setting | Description | Options | +| --- | --- | --- | +| Intent | Controls the type of product recommendations returned | • Related (default)
• Complementary | + ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Intent | Recommendation type | • Related (default)
• Complementary | -| Product | Source product for recommendations | Product picker | -| Item count | Number of recommendations to display | Number (default: 5) | -| Filter by tag | Filter recommendations by a specific tag | Text input | -| Show products in cart | Displays products even if they're already in the cart | Checkbox (default: true) | +| --- | --- | --- | +| Product | Source product for generating recommendations | Product picker | +| Item count | Number of recommended products to display | Number input (default: 5) | +| Filter by tag | Filters recommendations to only show those with this tag | Text input | +| Show products in cart | When disabled, products that are added to the cart will not be shown | Checkbox (default: true) | - -### Spacing +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width mobile | Width of each slider item on mobile | 5 - 100 % (default: 80) | -| Width desktop | Width of each slider item on desktop | 5 - 100 % (default: 20) | - +| --- | --- | --- | +| Mobile width | Width of each slider item on mobile | 5 – 100 % (default: 80) | +| Desktop width | Width of each slider item on desktop | 5 – 100 % (default: 20) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/_tags.md b/slab/blocks/_tags.md index 17b115b..5bda8be 100644 --- a/slab/blocks/_tags.md +++ b/slab/blocks/_tags.md @@ -1,36 +1,62 @@ # Tags -## Overview +A block that lists and styles tags from the nearest article, product, or collection context. Supports text and badge display modes. -A block that lists and styles tags for the nearest context (article, product, or collection). It collects tags from closest.article, closest.product, or closest.collection, then renders each as plain text or as a styled badge depending on the display_type setting. -## Block limitations +## Overview + +Renders tags as plain text or styled badges with configurable alignment, typography, color, and overlay positioning. Automatically collects tags from the closest article, product, or collection context. -This is a private block that can only be used within specific sections or parent blocks. It automatically detects tags from the nearest article, product, or collection context and is not intended for standalone use. ## Common use cases -- Place inside article, product, or collection contexts where tags are present -- Prefer badge display type for emphasis; use text for subtle inline labels -- Tune alignment, font family, and font size to match surrounding typography -- Use padding settings sparingly to keep spacing consistent with adjacent blocks -- Enable overlay for absolute positioning when tags should appear over other content +Use this block to display tags inside article, product, or collection contexts where tags are present. + + +## Block limitations + +This is a private block, indicated by the `_` prefix. It is intended for use exclusively within article, product, or collection contexts that provide tags. It requires a closest context object to collect tags from and is not designed for standalone use. It is private because it depends on the closest article, product, or collection to source its content. + ## Block settings +### Spacing + | Setting | Description | Options | -|---------|-------------|---------| +| --- | --- | --- | | Enable horizontal padding | Adds horizontal padding around the tags | Checkbox (default: false) | -| Enable top padding | Adds top padding around the tags | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the tags | Checkbox (default: false) | -| Color scheme | Controls the background and text colors for badges | Body (default), Neutral, Accent 1, Accent 2, Accent 3, Shade 1, Shade 2, Shade 3, Primary, Secondary, Tertiary, Blur, Transparent. Visible when display type is badge | -| Color border | Controls the border color for badges | Body (default), Subtle (default), Strong, Primary, Secondary, Tertiary, None. Visible when display type is badge | -| Enable color difference | Applies mix-blend-difference for better visibility on varying backgrounds | Checkbox (default: false) | -| Display type | Controls how tags are displayed | Text, Badge (default) | -| Font family | Controls the font family | Standard (default), Heading, Subheading, Accent | -| Font size | Controls the font size | Smaller, Small, Default (default), Big, Bigger, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Visible when display type is text | -| Horizontal alignment | Controls horizontal alignment | Left (default), Center, Right | -| Vertical alignment | Controls vertical alignment when overlay is enabled | Top (default), Bottom. Visible when enable overlay is true | -| Enable overlay | Switches to absolute positioning | Checkbox (default: false) | -| Visibility | Controls when the block is visible | All (default), Mobile only, Desktop only | +| Enable top padding | Adds top padding above the tags | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the tags | Checkbox (default: false) | + +### Color +| Setting | Description | Options | +| --- | --- | --- | +| Type | Chooses between custom and base color modes | • Custom
• Base (default) | +| Scheme | Selects a custom color scheme | Color scheme picker | +| Scheme | Sets the background and text color scheme for badges | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Sets the border color style for badges | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme | Checkbox (default: false) | +| Enable color difference | Colors are inverted when this block overlaps any other content | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +| --- | --- | --- | +| Display type | Controls how tags are rendered | • Text
• Badge (default) | +| Font family | Sets the font family for the tags | • Standard (default)
• Heading
• Subheading
• Accent | +| Font size | Sets the font size for the tags | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | + +### Layout + +| Setting | Description | Options | +| --- | --- | --- | +| Horizontal alignment | Controls horizontal alignment of the tags | • Left (default)
• Center
• Right | +| Vertical alignment | Controls vertical position when overlay is enabled | • Top (default)
• Bottom | +| Enable overlay | Switches to absolute positioning over parent content | Checkbox (default: false) | + +### Display + +| Setting | Description | Options | +| --- | --- | --- | +| Visibility | Controls which devices the block appears on | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/accordion.md b/slab/blocks/accordion.md index 347dcc5..8b0fd25 100644 --- a/slab/blocks/accordion.md +++ b/slab/blocks/accordion.md @@ -1,9 +1,11 @@ # Accordion + ## Overview A collapsible accordion container that provides an expandable/collapsible content area with a header button. Uses Alpine.js for toggle functionality and includes smooth animations when enabled. + ## Common use cases * Create FAQ sections with expandable questions and answers @@ -11,41 +13,38 @@ A collapsible accordion container that provides an expandable/collapsible conten * Group related content that can be expanded on demand * Enable pre-opened option to show content by default -## Compatible blocks - -The following blocks can be nested within this block: - -* [Container](layout/container.md) (for accordion label) -* [Container](layout/container.md) (for accordion content) ## Block settings ### Spacing -| Setting | Description | Options | -| ------------------------- | ---------------------------------------------- | ------------------------- | -| Enable internal padding | Adds internal padding to the accordion content | Checkbox (default: true) | -| Enable horizontal padding | Adds horizontal padding around the accordion | Checkbox (default: false) | -| Enable top padding | Adds top padding around the accordion | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the accordion | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Enable internal padding | Adds internal padding to the accordion content | Checkbox (default: true) | +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text colors |

• Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Color border | Controls the border color |

• Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank

| +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• Body
• Subtle (default)
• Strong
• None

Visible when border_position is not and color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Style -| Setting | Description | Options | -| --------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All

| +| Setting | Description | Options | +|---------|-------------|----------| +| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All

| ### Display -| Setting | Description | Options | -| ------------------ | --------------------------------------------------- | --------------------------------------------------------- | -| Enable pre opened | Opens the accordion by default | Checkbox (default: false) | -| Enable single open | Allows only one accordion item to be open at a time | Checkbox (default: false) | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|----------| +| Enable pre-opened | Show the accordion open by default. | Checkbox (default: false) | +| Enable single open | Only one accordion can be open at a time. Note: only accordions with the same settings will be considered. | Checkbox (default: false) | +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/age-verification-form.md b/slab/blocks/age-verification-form.md index cada8d2..ff44abc 100644 --- a/slab/blocks/age-verification-form.md +++ b/slab/blocks/age-verification-form.md @@ -3,54 +3,57 @@ ## Overview -A customizable age verification block that prevents site access until users confirm they meet the minimum required age. Supports both birthdate verification and simple confirmation methods. Uses localStorage to remember verified users between sessions. +A customizable age verification block that prevents site access until users confirm they meet the minimum required age. Supports both birthdate verification and simple confirmation methods. ## Common use cases -- Comply with age restrictions for products like alcohol, tobacco, or adult content -- Set appropriate age requirements based on your products and local regulations -- Use date verification method for stricter compliance needs -- Add custom button styling to match your theme design -- Remember verified users between sessions to improve user experience +* Restrict access to age-sensitive content or products +* Use date-of-birth or simple confirmation verification methods +* Configure minimum age requirements for different regions ## Compatible blocks The following blocks can be nested within this block: -- [Button](button.md) +* [Button](button.md) ## Block settings -### Content +### General | Setting | Description | Options | -|---------|-------------|---------| -| Enable age verification | Enables the age verification form | Checkbox (default: false) | -| Age verification type | Method used to verify age | • Date (default)
• Confirmation | -| Age requirement | Minimum age required to access the site | 1 - 99 (default: 18) | +|---------|-------------|----------| +| Enable verification | Enables the age verification gate | Checkbox (default: false) | + +### Content +| Setting | Description | Options | +|---------|-------------|----------| +| Verification type | Type of age verification method |

• Full date (default)
• Confirmation button

| +| Age requirement | Minimum age required | 1 - 99 (default: 18) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the form | Checkbox (default: false) | -| Enable top padding | Adds top padding around the form | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the form | Checkbox (default: false) | - +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color text | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Text | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/article-card.md b/slab/blocks/article-card.md index 7dd3047..33e1b14 100644 --- a/slab/blocks/article-card.md +++ b/slab/blocks/article-card.md @@ -1,16 +1,18 @@ # Article card + ## Overview -A flexible article card block for displaying a single article and its associated content blocks. This block is designed to be used within grid or slider layouts and supports a wide range of content types, including rich text, images, videos, icons, and article-specific information. The block offers extensive customization options for spacing, color scheme, border style, layout, and responsive visibility, making it suitable for various blog and content display needs. +A flexible collection card block for displaying a single collection and its associated content blocks. This block is designed to be used within grid or slider layouts and supports a wide range of content types, including rich text, images, videos, icons, and collection-specific information. The block offers extensive customization options for spacing, color scheme, border style, layout, and responsive visibility, making it suitable for various merchandising and design needs. + ## Common use cases -* Use within grid or slider sections to create article galleries or featured blog post displays -* Configure the content blocks to highlight key article information, such as title, description, and featured image -* Adjust spacing and color settings to match your theme's design language and improve visual hierarchy -* Use the visibility settings to tailor the article card display for different devices and layouts -* Leverage scroll animations to add engaging motion effects to article cards +* Display a linked article with customizable content blocks inside collection or blog layouts +* Configure the content blocks to highlight key article information +* Adjust spacing and color settings to match your theme design +* Use scroll animations to add engaging motion effects + ## Compatible blocks @@ -27,42 +29,47 @@ The following blocks can be nested within this block: * [Video](video.md) * [Article date](article-date.md) * [Slider](layout__slider.md) -* [Grid](layout__grid.md) -* [Flex](layout__flex.md) +* [Default grid](layout__grid.md) +* [Flex grid](layout__flex.md) + ## Block settings ### Content -| Setting | Description | Options | -| ------- | ----------------------------- | -------------- | +| Setting | Description | Options | +|---------|-------------|----------| | Article | Select the article to display | Article picker | ### Spacing -| Setting | Description | Options | -| ------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------- | -| Enable horizontal padding | Adds horizontal padding around the article card | Checkbox (default: false) | -| Enable vertical padding | Adds vertical padding around the article card | Checkbox (default: false) | -| Gap size | Spacing between content blocks within the card |

• None
• Default (default)
• XS
• SM
• MD
• LG
• XL

| +| Setting | Description | Options | +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable vertical padding | Adds vertical padding | Checkbox (default: false) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| ### Color -| Setting | Description | Options | -| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text colors |

• Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Color border | Controls the border color |

• Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

| +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Style -| Setting | Description | Options | -| ----------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All

| -| Show underline on hover | Displays an underline effect when hovering over the card | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All

| +| Radius | Controls the border radius |

• None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full

| +| Show underline on hover | Displays an underline effect when hovering | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| -| Scroll animation | Animation effect when the card scrolls into view |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| +| Scroll animation | Controls how the block appears when scrolled into view. |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| diff --git a/slab/blocks/avatars.md b/slab/blocks/avatars.md index 77eda84..2e18009 100644 --- a/slab/blocks/avatars.md +++ b/slab/blocks/avatars.md @@ -8,17 +8,16 @@ A flexible container component for displaying avatar images in an overlapping ho ## Common use cases -- Display team members or contributors in a visually appealing overlapping layout -- Show user groups or participant lists with consistent avatar sizes -- Create engaging visual representations of community or team sections -- Use center or right alignment when adding many avatars depending on your design +* Display a group of avatar images such as team members or customer testimonials +* Create trust indicators with customer profile images +* Show contributor or author photos ## Compatible blocks The following blocks can be nested within this block: -- [Avatar image](_avatar-image.md) +* [Avatar image](_avatar-image.md) ## Block settings @@ -26,21 +25,19 @@ The following blocks can be nested within this block: ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the avatars | Checkbox (default: false) | -| Enable top padding | Adds top padding around the avatars | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the avatars | Checkbox (default: false) | - +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment of the avatars | • Left (default)
• Center
• Right | - +|---------|-------------|----------| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Right

| ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/button.md b/slab/blocks/button.md index 7e63c41..de0985f 100644 --- a/slab/blocks/button.md +++ b/slab/blocks/button.md @@ -1,17 +1,18 @@ # Button + ## Overview -A customizable button component that renders a link styled as a button with various appearance and layout options. Supports responsive visibility controls, multiple style variants, and custom actions including overlay triggers, form submissions, and navigation. +A customizable button component that renders a link styled as a button with various appearance and layout options. Supports responsive visibility controls and multiple style variants. + ## Common use cases * Create call-to-action buttons throughout your theme * Use custom actions to trigger overlays, form submissions, or JavaScript functions -* Configure button size and color to match your theme's design system -* Use full-width option for prominent mobile CTAs +* Configure button size and color to match your theme design system * Trigger account, search, menu, or cart overlays with preset actions -* Submit forms or perform logout/login actions with custom button behavior + ## Compatible blocks @@ -21,55 +22,58 @@ The following blocks can be nested within this block: * [Icon](icon.md) * [Image](image.md) * [Localization label](localization-label.md) -* [Cart count](/broken/pages/I1uLikf9S6Wq0KNvGdgN) -* [Cart price](/broken/pages/4VWNibJzvJcDHosz3SNd) +* [Cart count](cart-count.md) +* [Simple subtotal](cart-price.md) + ## Block settings ### Content -| Setting | Description | Options | -| ---------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| URL | Link destination for the button |

URL input (default: /collections/all)

Visible when enable custom action is false

| -| Enable custom action | Enables custom JavaScript actions instead of URL navigation | Checkbox (default: false) | -| Overlay preset | Select a preset overlay action or use custom |

• None (default)
• Account
• Search
• Menu
• Primary cart
• Alternative cart
• Custom

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable logout is false and enable back to top is false

| -| Overlay custom | Custom overlay ID for custom overlay actions |

Text input

Visible when enable custom action is true and overlay preset is custom

| -| Enable close overlays | Closes all open overlays when button is clicked |

Checkbox (default: false)

Visible when enable custom action is true and enable form submission is false and enable logout is false and enable back to top is false and overlay preset is none

| -| Enable form submission | Submits the nearest form when clicked |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable logout is false and enable back to top is false and overlay preset is none

| -| Enable logout | Redirects to account logout URL |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable back to top is false and overlay preset is none

| -| Enable login | Redirects to account login URL |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable back to top is false and overlay preset is none

| -| Enable back to top | Scrolls page to top when clicked |

Checkbox (default: false)

Visible when enable custom action is true and enable close overlays is false and enable form submission is false and enable logout is false and overlay preset is none

| +| Setting | Description | Options | +|---------|-------------|----------| +| URL | Link destination for the button |

URL input (default: /collections/all)

Visible when enable_custom_action is false

| +| Enable custom action | When enabled a button can be used to trigger overlays, form submissions or other actions. | Checkbox (default: false) | +| Overlay | Select a predefined overlay to open when this button is clicked. |

• None (default)
• Account overlay
• Search overlay
• Menu overlay
• Primary cart overlay
• Alternative cart overlay
• Custom

Visible when enable_custom_action is true and enable_close_overlays is false and enable_form_submission is false and enable_logout is false and enable_back_to_top is false

| +| Custom overlay | Enter the ID of the overlay to open when this button is clicked. |

Text input

Visible when enable_custom_action is true and overlay_preset is custom

| +| Enable close | When enabled this button will close all overlays. |

Checkbox (default: false)

Visible when enable_custom_action is true and enable_form_submission is false and enable_logout is false and enable_back_to_top is false and overlay_preset is none

| +| Enable form submission | When enabled any form this button is part of will submit when clicked. |

Checkbox (default: false)

Visible when enable_custom_action is true and enable_close_overlays is false and enable_logout is false and enable_back_to_top is false and overlay_preset is none

| +| Enable logout | When enabled a button can be used to logout the user. |

Checkbox (default: false)

Visible when enable_custom_action is true and enable_close_overlays is false and enable_form_submission is false and enable_back_to_top is false and overlay_preset is none

| +| Enable login | When enabled a button can be used to login the user. |

Checkbox (default: false)

Visible when enable_custom_action is true and enable_close_overlays is false and enable_form_submission is false and enable_back_to_top is false and overlay_preset is none

| +| Enable back to top | Scrolls page to top when clicked |

Checkbox (default: false)

Visible when enable_custom_action is true and enable_close_overlays is false and enable_form_submission is false and enable_logout is false and overlay_preset is none

| ### Spacing -| Setting | Description | Options | -| ------------------------- | ----------------------------------------- | ------------------------- | -| Enable internal padding | Adds internal padding to the button | Checkbox (default: true) | -| Enable horizontal padding | Adds horizontal padding around the button | Checkbox (default: false) | -| Enable top padding | Adds top padding around the button | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the button | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Enable internal padding | Adds internal padding to the button content | Checkbox (default: true) | +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Button color | Controls the button color scheme |

• Primary
• Secondary (default)
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Link
• Inverted link

| +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

| +| Button | Select a custom button color scheme |

Color scheme picker

Visible when color_type is custom

| +| Button | Controls the button color scheme |

• Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

Visible when color_type is base

| ### Style -| Setting | Description | Options | -| ----------- | ------------------------ | ------------------------------------------------------------------ | +| Setting | Description | Options | +|---------|-------------|----------| | Button size | Controls the button size |

• Extra small
• Small
• Standard (default)
• Large

| ### Layout -| Setting | Description | Options | -| -------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------- | -| Horizontal alignment | Controls horizontal alignment of the button |

• Left (default)
• Center
• Right

Visible when enable full width is false

| -| Enable full width | Makes the button span the full width of its container | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Right

| +| Enable full width | Makes the block span the full width of its container | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/cart-count.md b/slab/blocks/cart-count.md new file mode 100644 index 0000000..b447ea5 --- /dev/null +++ b/slab/blocks/cart-count.md @@ -0,0 +1,55 @@ +# Cart count + + +## Overview + +A cart count indicator that displays the current number of items in the cart. Supports inline or floating badge layout with configurable position, and dynamically updates using Alpine.js. + + +## Common use cases + +- Display the number of items in the cart as a badge on or near the cart icon +- Use floating layout to position the count badge precisely over a cart icon +- Configure a digit limit to prevent oversized indicators (e.g., "99+" instead of "100") +- Use inline layout for text-based cart count displays + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Digit limit | Maximum number of digits before truncation | Number input (default: 2) | + + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Button color | Controls the color style of the count badge | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent | + + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Font family | Controls the font family used for the count | • Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | +| Font size | Controls the font size of the count | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | +| Radius | Controls the border radius of the count badge | • None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full | + + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Layout | Controls the positioning layout of the count | • Float
• Inline (default) | +| Horizontal position | Horizontal offset for float layout | 0 - 100 % (default: 55)

Visible when layout is float | +| Vertical position | Vertical offset for float layout | 0 - 100 % (default: 0)

Visible when layout is float | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-discount.md b/slab/blocks/cart-discount.md new file mode 100644 index 0000000..13a9bb8 --- /dev/null +++ b/slab/blocks/cart-discount.md @@ -0,0 +1,38 @@ +# Discount input + + +## Overview + +A discount code input block that allows customers to enter and apply discount codes to their cart. Features a text input with an apply button and uses Alpine.js for reactive cart updates. + + +## Common use cases + +- Add a discount code input to the cart drawer or cart page +- Allow customers to apply promotional codes before checkout +- Combine with other cart blocks for a complete cart interface + + +## Block settings + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Button color | Controls the color style of the apply button | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-fulltotals.md b/slab/blocks/cart-fulltotals.md new file mode 100644 index 0000000..c3420d7 --- /dev/null +++ b/slab/blocks/cart-fulltotals.md @@ -0,0 +1,53 @@ +# Full subtotal + + +## Overview + +A cart totals block that displays subtotal, discounts, and final total pricing with reactive updates using Alpine.js. The discount row is conditionally shown when discounts are applied. + + +## Common use cases + +- Display a detailed cart pricing breakdown including subtotal, discounts, and total +- Use in cart drawers or cart pages where a comprehensive price summary is needed +- Toggle currency symbol visibility based on store requirements + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Show currency symbol | Displays the currency code in prices | Checkbox (default: true) | + + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Text color | Controls the text color | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | + + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Font family | Controls the font family used for the totals | • Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | +| Font size | Controls the font size of the totals | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-notes.md b/slab/blocks/cart-notes.md new file mode 100644 index 0000000..c6410ab --- /dev/null +++ b/slab/blocks/cart-notes.md @@ -0,0 +1,38 @@ +# Order notes + + +## Overview + +A cart block that displays a checkbox to reveal a textarea for adding order notes. Uses Alpine.js to toggle visibility and update the cart note reactively. + + +## Common use cases + +- Allow customers to add special instructions or notes to their order +- Place in cart drawers or cart pages alongside other cart information blocks +- Use the customizable label to prompt customers with relevant note instructions + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Label | Text label for the order notes checkbox | Rich text input | + + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-price.md b/slab/blocks/cart-price.md new file mode 100644 index 0000000..de0409d --- /dev/null +++ b/slab/blocks/cart-price.md @@ -0,0 +1,61 @@ +# Simple subtotal + + +## Overview + +A configurable block that displays the cart total price or original total price with customizable styling options. Supports currency symbol toggle and multiple alignment options. + + +## Common use cases + +- Display a single cart price value in cart drawers or cart pages +- Choose between showing the final price (with discounts) or the original price +- Use alignment and font settings to match the price display to your layout + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Subtotal type | Controls which price value is displayed | • Original price
• Final price (with discounts) (default) | +| Show currency symbol | Displays the currency code in prices | Checkbox (default: true) | + + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Text color | Controls the text color | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | + + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Font family | Controls the font family used for the price | • Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | +| Font size | Controls the font size of the price | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | + + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Horizontal alignment | Controls horizontal alignment of the price | • Left (default)
• Center
• Justify
• Right | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-results.md b/slab/blocks/cart-results.md new file mode 100644 index 0000000..2b63113 --- /dev/null +++ b/slab/blocks/cart-results.md @@ -0,0 +1,31 @@ +# Cart results + + +## Overview + +A cart block that displays cart items in a customizable container with configurable padding. Uses Alpine.js to iterate through grouped cart items and renders each item using the cart item template. + + +## Common use cases + +- Display the list of cart items in a cart drawer or cart page +- Use padding and visibility settings to integrate with other cart blocks in responsive layouts +- Combine with price, discount, and checkout blocks for a complete cart interface + + +## Block settings + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-share.md b/slab/blocks/cart-share.md new file mode 100644 index 0000000..17d7f1f --- /dev/null +++ b/slab/blocks/cart-share.md @@ -0,0 +1,38 @@ +# Share cart + + +## Overview + +A cart sharing block that generates a shareable cart URL and provides a copy-to-clipboard button. Only displays when items are in the cart, using Alpine.js for reactive functionality. + + +## Common use cases + +- Allow customers to share their cart contents with others via a URL +- Add a cart sharing option to cart drawers or cart pages +- Enable collaborative shopping by letting users send their cart to friends or family + + +## Block settings + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Button color | Controls the color style of the copy button | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/cart-summary.md b/slab/blocks/cart-summary.md new file mode 100644 index 0000000..8a2c5ce --- /dev/null +++ b/slab/blocks/cart-summary.md @@ -0,0 +1,54 @@ +# Order summary + + +## Overview + +A customizable cart block that displays the current number of items in the cart and the subtotal price. Uses Alpine.js to dynamically update cart information without page reload. + + +## Common use cases + +- Display a quick cart status summary showing item count and subtotal +- Place in cart drawers, headers, or sticky navigation for at-a-glance cart information +- Use alignment and font settings to match the summary to your layout + + +## Block settings + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Text color | Controls the text color | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | + + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Font family | Controls the font family used for the summary text | • Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | +| Font size | Controls the font size of the summary text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | + + +### Layout + +| Setting | Description | Options | +|---------|-------------|---------| +| Horizontal alignment | Controls horizontal alignment of the summary text | • Left (default)
• Center
• Justify
• Right | +| Enable max width | Limits the content width for readability | Checkbox (default: false) | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/checkbox-upsell.md b/slab/blocks/checkbox-upsell.md new file mode 100644 index 0000000..40f4645 --- /dev/null +++ b/slab/blocks/checkbox-upsell.md @@ -0,0 +1,39 @@ +# Upsell checkbox + + +## Overview + +A configurable checkbox block that enables quick product upselling by adding or removing a selected product to or from the cart when checked or unchecked. Uses Alpine.js for reactive cart management. + + +## Common use cases + +- Offer complementary products like gift wrapping or warranty as a one-click upsell +- Add quick add-on options to cart drawers or cart pages +- Use clear, concise labels to communicate the value of the upsell product + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Product | The upsell product to add when checked | Product picker | +| Label | Text label displayed next to the checkbox | Rich text input | + + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/checkout-approval.md b/slab/blocks/checkout-approval.md new file mode 100644 index 0000000..454132b --- /dev/null +++ b/slab/blocks/checkout-approval.md @@ -0,0 +1,39 @@ +# Checkout agreement + + +## Overview + +A customizable checkout approval checkbox that controls whether checkout is enabled for the customer. When unchecked, it prevents proceeding to checkout using Alpine.js state management. + + +## Common use cases + +- Require customers to agree to terms and conditions before checking out +- Add a consent checkbox for legal or policy compliance in the cart +- Use the preselect option to control whether the checkbox starts checked or unchecked + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Label | Text label displayed next to the checkbox | Rich text input | +| Preselect checkbox | Controls whether the checkbox is checked by default | Checkbox (default: true) | + + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | +| Enable top padding | Adds top padding around the block | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | + + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/checkout.md b/slab/blocks/checkout.md new file mode 100644 index 0000000..eab145e --- /dev/null +++ b/slab/blocks/checkout.md @@ -0,0 +1,36 @@ +# Checkout + + +## Overview + +container__checkout.liquid + + +## Common use cases + +* Add a checkout button that directs customers to the checkout flow +* Place checkout shortcuts in cart drawers or sidebars + + +## Compatible blocks + +The following blocks can be nested within this block: + +* [Button](button.md) + + +## Block settings + +### Spacing + +| Setting | Description | Options | +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | + +### Display + +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/collection-card.md b/slab/blocks/collection-card.md index 89225c8..0faaffd 100644 --- a/slab/blocks/collection-card.md +++ b/slab/blocks/collection-card.md @@ -1,16 +1,17 @@ # Collection card + ## Overview A flexible collection card block for displaying a single collection and its associated content blocks. This block is designed to be used within grid or slider layouts and supports a wide range of content types, including rich text, images, videos, icons, and collection-specific information. The block offers extensive customization options for spacing, color scheme, border style, layout, and responsive visibility, making it suitable for various merchandising and design needs. + ## Common use cases -* Use within grid or slider sections to create collection galleries or featured collection displays -* Configure the content blocks to highlight key collection information, such as title, description, and featured image -* Adjust spacing and color settings to match your theme's design language and improve visual hierarchy -* Use the visibility settings to tailor the collection card display for different devices and layouts -* Leverage scroll animations to add engaging motion effects to collection cards +* Display a linked collection with customizable content blocks inside grid or slider layouts +* Configure the content blocks to highlight key collection information +* Adjust spacing and color settings to match your theme design + ## Compatible blocks @@ -26,42 +27,47 @@ The following blocks can be nested within this block: * [Button](button.md) * [Video](video.md) * [Slider](layout__slider.md) -* [Grid](layout__grid.md) -* [Flex](layout__flex.md) +* [Default grid](layout__grid.md) +* [Flex grid](layout__flex.md) + ## Block settings ### Content -| Setting | Description | Options | -| ---------- | -------------------------------- | ----------------- | +| Setting | Description | Options | +|---------|-------------|----------| | Collection | Select the collection to display | Collection picker | ### Spacing -| Setting | Description | Options | -| ------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------- | -| Enable horizontal padding | Adds horizontal padding around the collection card | Checkbox (default: false) | -| Enable vertical padding | Adds vertical padding around the collection card | Checkbox (default: false) | -| Gap size | Spacing between content blocks within the card |

• None
• Default (default)
• XS
• SM
• MD
• LG
• XL

| +| Setting | Description | Options | +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable vertical padding | Adds vertical padding | Checkbox (default: false) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| ### Color -| Setting | Description | Options | -| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text colors |

• Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Color border | Controls the border color |

• Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

| +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Style -| Setting | Description | Options | -| ----------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All

| -| Show underline on hover | Displays an underline effect when hovering over the card | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All

| +| Radius | Controls the border radius |

• None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full

| +| Show underline on hover | Displays an underline effect when hovering | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| -| Scroll animation | Animation effect when the card scrolls into view |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| +| Scroll animation | Controls how the block appears when scrolled into view. |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| diff --git a/slab/blocks/contact-form.md b/slab/blocks/contact-form.md index 6abecc3..d10b167 100644 --- a/slab/blocks/contact-form.md +++ b/slab/blocks/contact-form.md @@ -3,24 +3,22 @@ ## Overview -A flexible contact form container that serves as a wrapper for form input blocks. Handles form submission, error display, and success messages while providing customizable padding and visibility options. Supports multiple form input types through nested blocks and handles form validation automatically. +A flexible contact form container that serves as a wrapper for form input blocks. Handles form submission, error display, and success messages while providing customizable padding and visibility options. ## Common use cases -- Create contact forms for customer inquiries and support requests -- Add form input blocks in a logical order for user flow -- Configure success message for clear user feedback -- Customize form styling to match your theme design -- Use responsive visibility to show forms on specific devices +* Add a contact form that customers can use to send messages to the store +* Create customer support or inquiry forms +* Customize success messages after form submission ## Compatible blocks The following blocks can be nested within this block: -- [Input field](form-input.md) -- [Button](button.md) +* [Input field](input-field.md) +* [Button](button.md) ## Block settings @@ -28,21 +26,19 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Success message | Custom message shown after successful form submission | Rich text input | - +|---------|-------------|----------| +| Success message | Message shown after successful submission | Rich text input | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the form | Checkbox (default: false) | -| Enable top padding | Adds top padding around the form | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the form | Checkbox (default: false) | - +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/container.md b/slab/blocks/container.md new file mode 100644 index 0000000..6f00779 --- /dev/null +++ b/slab/blocks/container.md @@ -0,0 +1,89 @@ +# Container + + +## Overview + +A flexible container block that holds other theme or app blocks with configurable spacing, gap size, and display visibility options. + + +## Common use cases + +* Group and style nested blocks with backgrounds, spacing, and color schemes +* Create layout sections with background images or videos +* Build card-style containers with borders and rounded corners +* Use as a layout wrapper for complex block arrangements + + +## Compatible blocks + +The following blocks can be nested within this block: + +* All theme blocks +* App blocks + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|----------| +| URL | Set a URL to make the entire section clickable. Using this while adding links within the section may break the layout. | URL input | +| Enable background image or video | Enable background image or video | Checkbox (default: false) | +| Desktop background | 2800 x 1200px recommended. |

Image picker

Visible when enable background image or video

| +| Mobile background | 760 x 1010px recommended. |

Image picker

Visible when enable background image or video

| +| Background video | Background video |

Video picker

Visible when enable background image or video

| +| Show video on mobile | Shows the background video on mobile |

Checkbox (default: true)

Visible when enable background image or video

| +| Show entire image | Shows the entire image within the container |

Checkbox (default: false)

Visible when enable background image or video

| + +### Spacing + +| Setting | Description | Options | +|---------|-------------|----------| +| Top spacing | Top spacing in pixels | 0 - 300 px (default: 0 px) | +| Bottom spacing | Bottom spacing in pixels | 0 - 300 px (default: 0 px) | +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable vertical padding | Adds vertical padding | Checkbox (default: false) | +| Enable margin | Adds margin around the block | Checkbox (default: false) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| + +### Color + +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when border_position is not and color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | +| Enable color difference | Colors are inverted when this block overlaps any other content. | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +|---------|-------------|----------| +| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All

| +| Radius | Controls the border radius |

• None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full

| +| Enable crop | Clips content that extends beyond the container. | Checkbox (default: true) | +| Enable shadow | Adds a shadow effect | Checkbox (default: false) | + +### Layout + +| Setting | Description | Options | +|---------|-------------|----------| +| Width | Controls the width of the block | 5 - 100 % (default: 100 %) | +| Minimum height | Minimum height of the block |

0 - 1200 px (default: 0 px)

Visible when enable_height_fill is false

| +| Enable height fill | Fill the container to the height of the parent container. | Checkbox (default: true) | +| Enable overlay | The container will be displayed on top of the parent block. | Checkbox (default: false) | +| Show on hover | Opens on hover instead of click | Checkbox (default: false) | +| Enable block elevation | Elevates the block above surrounding content | Checkbox (default: false) | +| Enable sticky layout | Makes the block sticky when scrolling | Checkbox (default: false) | +| Sticky position | To use this setting, ensure 'Enable height fill' is disabled. |

• None (default)
• Top
• Bottom

Visible when enable_sticky_layout is true

| +| Vertical alignment | Controls vertical alignment |

• Top (default)
• Middle
• Bottom

| + +### Display + +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| +| Scroll animation | Controls how the block appears when scrolled into view. |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| diff --git a/slab/blocks/dropdown.md b/slab/blocks/dropdown.md index 9421813..172682e 100644 --- a/slab/blocks/dropdown.md +++ b/slab/blocks/dropdown.md @@ -1,46 +1,41 @@ # Dropdown + ## Overview A customizable dropdown overlay component that creates an accessible, animated dropdown menu triggered by a button. Provides flexible positioning, styling, and responsive behavior options. -## Common use cases - -* Create navigation menus with dropdown submenus -* Build interactive forms with dropdown options -* Display additional content on hover or click -* Organize related content in collapsible dropdowns -* Create mobile-friendly navigation patterns -## Compatible blocks +## Common use cases -The following blocks can be nested within this block: +* Create a dropdown menu that reveals nested content on click or hover +* Build secondary navigation or action menus +* Create expandable content sections with configurable positioning -* [Container](layout/container.md) ## Block settings ### Spacing -| Setting | Description | Options | -| ------------------------- | --------------------------------------------- | ------------------------- | -| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | -| Enable top padding | Adds top padding | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | -| Enable internal padding | Adds padding inside the dropdown content area | Checkbox (default: true) | +| Setting | Description | Options | +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | +| Enable internal padding | Adds internal padding to the dropdown content | Checkbox (default: true) | ### Layout -| Setting | Description | Options | -| -------------------- | ----------------------------------------------------------------------- | ---------------------------------------------- | -| Width | Controls the width of the dropdown | 100 - 400 px (default: 130) | -| Vertical direction | Controls whether the dropdown opens up or down |

• Up (default)
• Down

| -| Horizontal position | Controls horizontal positioning of the dropdown relative to the trigger |

• Left (default)
• Center
• Right

| -| Horizontal alignment | Controls horizontal alignment of the dropdown trigger |

• Left (default)
• Center
• Right

| -| Show on hover | Only displays the dropdown on hover | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Width | Controls the width of the block | 100 - 400 px (default: 130 px) | +| Direction | Controls whether the dropdown opens up or down |

• Down
• Up (default)

| +| Horizontal position | Controls horizontal positioning |

• Left (default)
• Center
• Right

| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Right

| +| Show on hover | Opens on hover instead of click | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/error.md b/slab/blocks/error.md index 6e79d37..60ed1f7 100644 --- a/slab/blocks/error.md +++ b/slab/blocks/error.md @@ -1,4 +1,4 @@ -# Error message +# Error ## Overview @@ -8,10 +8,7 @@ A dynamic error message display block that renders error text from an Alpine.js ## Common use cases -- Enable max_width (default: true) for better readability of error messages -- Consider the context where errors will appear when choosing text color and size -- Use appropriate padding settings based on surrounding content -- Display validation and system error messages throughout your theme +Display validation and system error messages throughout your theme with customizable styling. ## Block settings @@ -19,37 +16,36 @@ A dynamic error message display block that renders error text from an Alpine.js ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) | -| Enable top padding | Adds top padding around the content | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) | - +|---------|-------------|--------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade
• Error
• Success | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Text | Controls the text | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Controls the font family used for the text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of the text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|--------| +| Font family | Controls the font family | • Standard (default)
• Heading
• Subheading
• Accent | +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | -| Enable max width | Limits the maximum width of the text content | Checkbox (default: true) | - +|---------|-------------|--------| +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Justify
• Right | +| Enable max width | Controls the enable max width | Checkbox (default: true) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/filter-tags.md b/slab/blocks/filter-tags.md index 2479a67..59e4874 100644 --- a/slab/blocks/filter-tags.md +++ b/slab/blocks/filter-tags.md @@ -3,16 +3,12 @@ ## Overview -Displays a block of filter tags sourced from a collection or blog metafield, allowing buyers to filter collections or blog posts by custom tags. The block supports flexible layout (stacked or inline), alignment, spacing, color, font, and device visibility options. It renders a link to view all items and individual tag links, highlighting the active tag. Tag data is pulled from a metafield defined by the merchant in block settings. +A filter tag navigation block that renders tag-based links for filtering collections or blog posts. Tags are sourced from a merchant-defined metafield and displayed with customizable layout, styling, and color options. ## Common use cases -- Ensure the collection or blog metafield contains a comma-separated list of tags for best results -- Use the block in collection or blog templates to provide buyers with easy tag-based filtering -- Adjust gap size and alignment to match the design context and available space -- Use device visibility settings to tailor the block's presence on mobile or desktop as needed -- Combine with other navigation or filtering blocks for a comprehensive browsing experience +Provide tag-based filtering navigation for collection or blog pages using custom metafield data. ## Block settings @@ -20,45 +16,43 @@ Displays a block of filter tags sourced from a collection or blog metafield, all ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Metafield tags | Metafield reference for tags (namespace.key format) | Text input | - +|---------|-------------|--------| +| Metafield tags | A metafield pointing to a comma seperated list of tags. Example: 'custom.subtags' | Text input | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Spacing above the tags | 0 - 30 px (default: 0) | -| Bottom spacing | Spacing below the tags | 0 - 30 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the tags | Checkbox (default: false) | -| Gap size | Spacing between tags | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 30 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 30 px (default: 0) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Text color | Controls the text color of tags | • Default (default)
• Alternative
• Primary
• Secondary
• Tertiary
• Neutral
• Shade | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Text | Controls the text | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Controls the font family used for tags | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of tags | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|--------| +| Font family | Controls the font family | • Standard (default)
• Heading
• Subheading
• Accent | +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Layout | Controls the tag layout direction | • Stacked
• Inline (default) | -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +|---------|-------------|--------| +| Layout | Controls the layout | • Stacked
• Inline (default) | +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/filter.md b/slab/blocks/filter.md index eb24458..8dd388a 100644 --- a/slab/blocks/filter.md +++ b/slab/blocks/filter.md @@ -3,63 +3,61 @@ ## Overview -A comprehensive filtering system for collection and search pages that provides customers with sorting options and advanced filtering capabilities. The block supports multiple filter types including boolean filters, list filters, and price range sliders with an accordion-style interface for organized presentation. +A comprehensive filtering system for collection and search pages that provides sorting options and advanced filtering capabilities. Supports multiple filter types including boolean filters, list filters, and price range sliders with an accordion-style interface. ## Common use cases -- Ensure JavaScript functions (handleFilterChange, handleFilterDeleteAll, handlePriceFilterChange) are implemented for full functionality -- Configure border styling and internal padding based on your theme's design system -- Use appropriate gap sizes to maintain visual hierarchy between filter groups -- Test price range filters with your currency formatting and decimal handling -- Consider the number of filter options when deciding on swatch vs standard presentation -- Place this block in collection and search templates for optimal filtering experience +Add sorting and filtering controls to collection and search pages for improved product discovery. ## Block settings -### Content +### Colors | Setting | Description | Options | -|---------|-------------|---------| -| Enable filters | Enable or disable the filter functionality | Checkbox (default: true) | -| Enable sorting | Enable or disable sorting options | Checkbox (default: true) | +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Button | Controls the button | Color scheme picker | +| Button | Controls the button | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent | +| Border | Controls the border | Color scheme picker | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +### Style + +| Setting | Description | Options | +|---------|-------------|--------| +| Button size | Controls the button size | • Extra small
• Small (default)
• Standard
• Large | ### Filter container | Setting | Description | Options | -|---------|-------------|---------| -| Layout | Controls the filter container layout | • Stacked (default)
• Inline | -| Top spacing | Spacing above the filter container | 0 - 30 px (default: 0) | -| Bottom spacing | Spacing below the filter container | 0 - 30 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the container | Checkbox (default: false) | -| Enable internal padding | Adds internal padding to filter items | Checkbox (default: false)

Visible when container layout is "stacked" | -| Gap size | Spacing between filter items | • None (default)
• Default
• XS
• SM
• MD
• LG
• XL | -| Button color | Color scheme for filter buttons in inline layout | • Primary
• Secondary
• Tertiary
• Neutral
• Plain (default)
• Outline
• Inverted outline
• Blur
• Link
• Inverted link

Visible when container layout is "inline" | -| Button size | Size of filter buttons in inline layout | • Extra small
• Small (default)
• Standard
• Large

Visible when container layout is "inline" | -| Border color | Color of borders around the filter container | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when container border position is not empty and container layout is "stacked" | -| Border position | Position of borders on the filter container | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All

Visible when container layout is "stacked" | -| Open filters | Comma-separated list of filter labels to open by default | Text input

Visible when container layout is "stacked" | - +|---------|-------------|--------| +| Layout | Controls the layout | • Stacked (default)
• Inline | +| Top spacing | Controls the top spacing | 0 – 30 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 30 px (default: 0) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable internal padding | Controls the enable internal padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None (default)
• Default
• Extra small
• Small
• Medium
• Large
• Extra large | +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | +| Open filters | Add a comma-separated list of filter names to open by default. Example: 'color,size' | Text input | ### Filter items | Setting | Description | Options | -|---------|-------------|---------| -| Filter limit | Maximum number of filter options to display before showing "Show more" | Number input (default: 10) | -| Layout | Controls the layout of filter items | • Stacked (default)
• Grid | -| Desktop rows | Number of columns per row on desktop | 1 - 4 (default: 2)

Visible when items layout is "grid" | -| Mobile rows | Number of columns per row on mobile | 1 - 4 (default: 1)

Visible when items layout is "grid" | -| Show filter count | Display the count of items for each filter option | Checkbox (default: true) | -| Show filter swatches | Display color/image swatches for filter options | Checkbox (default: true) | -| Swatch size | Size of color/image swatches | 8 - 256 px (default: 16)

Visible when show filter swatches is true | -| Swatch radius | Border radius for color/image swatches | • None
• Default
• SM
• MD
• LG
• XL
• 2XL
• Full (default)

Visible when show filter swatches is true | -| Border color | Color of borders around filter items | • Body
• Subtle
• Strong
• Primary
• Secondary
• Tertiary
• None (default)

Visible when container layout is "stacked" | - +|---------|-------------|--------| +| Filter limit | Addtional filters will be hidden until the user clicks the 'Show all' button. | Number input (default: 10) | +| Layout | Controls the layout | • Stacked (default)
• Grid | +| Desktop row size | Controls the desktop row size | 1 – 4 (default: 2) | +| Mobile row size | Controls the mobile row size | 1 – 4 (default: 1) | +| Show filter count | Controls the show filter count | Checkbox (default: true) | +| Show filter swatches | Controls the show filter swatches | Checkbox (default: true) | +| Swatch size | Controls the swatch size | 8 – 256 px (default: 16) | +| Swatch radius | Controls the swatch radius | • None
• Default
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full (default) | +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/form-response.md b/slab/blocks/form-response.md index c719e0c..b8e8e5b 100644 --- a/slab/blocks/form-response.md +++ b/slab/blocks/form-response.md @@ -3,15 +3,12 @@ ## Overview -A dynamic error message display block that renders error text from an Alpine.js store. Provides customizable styling options including text color, font family, size, alignment, and responsive visibility controls. +A dynamic form response block that renders feedback text from an Alpine.js store. Provides customizable styling options including text color, font family, size, alignment, and responsive visibility controls. ## Common use cases -- Enable max_width (default: true) for better readability of error messages -- Consider the context where errors will appear when choosing text color and size -- Use appropriate padding settings based on surrounding content -- Display form submission feedback and validation messages +Display form submission feedback and validation messages with customizable styling. ## Block settings @@ -19,37 +16,36 @@ A dynamic error message display block that renders error text from an Alpine.js ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) | -| Enable top padding | Adds top padding around the content | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) | - +|---------|-------------|--------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade
• Error
• Success | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Text | Controls the text | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Controls the font family used for the text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of the text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|--------| +| Font family | Controls the font family | • Standard (default)
• Heading
• Subheading
• Accent | +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | -| Enable max width | Limits the maximum width of the text content | Checkbox (default: true) | - +|---------|-------------|--------| +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Justify
• Right | +| Enable max width | Controls the enable max width | Checkbox (default: true) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/hotspot.md b/slab/blocks/hotspot.md index 0af92b7..b590a0d 100644 --- a/slab/blocks/hotspot.md +++ b/slab/blocks/hotspot.md @@ -3,23 +3,21 @@ ## Overview -A banner block that can display interactive hotspot links overlaid on an image, allowing users to click on specific areas to access different content or products. +This is a banner section that can display hotspot links overlaid on the image. ## Common use cases -- Create interactive product showcases with clickable hotspots -- Build image maps with informational overlays -- Add clickable zones to hero images -- Create educational or instructional content with interactive elements -- Display product details through image hotspots +* Create an interactive image with clickable hotspot markers +* Build product lookbook images with clickable product spots +* Add interactive location or feature markers to images ## Compatible blocks The following blocks can be nested within this block: -- [Spot](_g__hotspot-spot.md) +* [Spot](_g__hotspot-spot.md) ## Block settings @@ -27,21 +25,25 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Image background desktop | Desktop background image | Image picker | -| Image background mobile | Mobile background image | Image picker | -| Show entire image | Shows the full image without cropping | Checkbox (default: false) | - +|---------|-------------|----------| +| Desktop background | 2800 x 1200px recommended. | Image picker | +| Mobile background | 760 x 1010px recommended. | Image picker | +| Show entire image | Shows the entire image within the container | Checkbox (default: false) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Minimum height | Minimum height of the hotspot container | 0 - 100 % (default: 50) | +|---------|-------------|----------| +| Minimum height | Minimum height of the block | 0 - 100 % (default: 50 %) | + +### Style +| Setting | Description | Options | +|---------|-------------|----------| +| Radius | Controls the border radius |

• None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full

| ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/icon.md b/slab/blocks/icon.md index b0fa109..f63c6db 100644 --- a/slab/blocks/icon.md +++ b/slab/blocks/icon.md @@ -3,15 +3,12 @@ ## Overview -A customizable icon block component that renders a single icon with configurable styling options. Supports various icon choices from a predefined set, with controls for size, color, alignment, and responsive visibility. +A customizable icon block that renders a single icon from a library of over 150 options. Supports configurable size, color, style, alignment, and responsive visibility controls. ## Common use cases -- Display visual icons to enhance content meaning -- Create icon-based navigation or call-to-action elements -- Use icons with color schemes to match your brand -- Add decorative or functional icons throughout your sections +Display decorative or functional icons throughout sections to enhance visual communication. ## Block settings @@ -19,46 +16,45 @@ A customizable icon block component that renders a single icon with configurable ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Icon | Select the icon to display | Icon picker with 60+ options | - +|---------|-------------|--------| +| Icon | Icons use Font Awesome. [Search icons](https://fontawesome.com/search?ip=brands%2Cclassic%2Csharp). | • Alarm clock
• Anchor
• Arrow down
• Arrow left
• Arrow pointer
• Arrow right
• Arrow up
• Arrow up from bracket
• Arrow up right from square
• Arrows rotate
• Arrows rotate reverse
• Atom simple
• Backpack
• Badge check (default)
• Bag shopping
• Bag shopping minus
• Bag shopping plus
• Bags shopping
• Balloons
• Barcode
• Barcode read
• Barcode scan
• Bars
• Basket shopping
• Basket shopping minus
• Basket shopping plus
• Basket shopping simple
• Bed front
• Bell
• Bicycle
• Bolt
• Book
• Bookmark
• Box
• Box archive
• Box check
• Box circle check
• Box dollar
• Box heart
• Box open
• Box open full
• Brackets curly
• Briefcase
• Briefcase blank
• Brush
• Bullseye pointer
• Business time
• Calendar
• Camera
• Car
• Car side
• Caret up
• Cart circle check
• Cart circle plus
• Cart flatbed
• Cart flatbed boxes
• Cart flatbed suitcase
• Cart minus
• Cart plus
• Cart shopping
• Cart shopping fast
• Check
• Chevron down
• Chevron left
• Chevron right
• Chevron up
• Circle chevron down
• Circle chevron left
• Circle chevron right
• Circle chevron up
• Circle
• Circle caret down
• Circle caret left
• Circle caret right
• Circle caret up
• Circle check
• Circle dashed
• Circle down
• Circle exclamation
• Circle half stroke
• Circle heart
• Circle info
• Circle pause
• Circle play
• Circle quarter stroke
• Circle stop
• Circle three quarters stroke
• Circle up
• Circle user
• Circle x mark
• Circles overlap
• Clipboard
• Cloud
• Code
• Comment
• Comments
• Compass
• Cube
• Cubes
• Droplet
• Earth americas
• Envelope
• Eye
• Eye slash
• Face smile
• Feather
• File
• Files
• Film
• Filter
• Fire
• Folder
• Folder open
• Font
• Gauge
• Gear
• Gift
• Globe
• Globe pointer
• Grid 2
• Hand
• Hand holding box
• Hand holding heart
• Handshake
• Hashtag
• Headphones
• Heart
• House
• Image
• Inbox
• Joystick
• Key
• Landmark
• Layer group
• Link
• List
• Location dot
• Lock
• Magnifying glass
• Megaphone
• Minus
• Money bill
• Music
• Paper plane
• Paperclip
• Pen
• Pen to square
• People simple
• Phone
• Plane
• Play pause
• Play
• Pause
• Plus
• Print
• Quote left
• Rotate right
• Share
• Share from square
• Shield halved
• Shirt
• Shop
• Store
• Sliders
• Sparkles
• Spinner
• Spinner scale
• Square
• Square caret down
• Square caret left
• Square caret right
• Square caret up
• Square check
• Square chevron down
• Square chevron left
• Square chevron right
• Square chevron up
• Square dashed
• Square full
• Square half stroke
• Square heart
• Square info
• Square minus
• Square plus
• Square question
• Square x mark
• Star
• Star half stroke
• Stethoscope
• Suitcase
• Sun
• Tag
• Thumbs down
• Thumbs up
• Thumbtack
• Ticket
• Trash
• Tree
• Truck
• Truck fast
• User
• User secret
• Video
• Volume
• Volume off
• Volume slash
• Volume x mark
• Wave pulse
• X mark
• Discord
• Facebook
• Facebook F
• GitHub
• Instagram
• LinkedIn
• LinkedIn In
• Patreon
• Pinterest
• Pinterest P
• Snapchat
• Square Facebook
• Square Instagram
• Square Pinterest
• Square Reddit
• Square Snapchat
• Square Tumblr
• Square Twitter
• Square Vimeo
• Square X / Twitter
• Square YouTube
• Telegram
• TikTok
• Tumblr
• Twitch
• Twitter
• Vimeo
• Vimeo V
• Vine
• VK
• Weibo
• Weixin
• X / Twitter
• YouTube | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the icon | Checkbox (default: false) | -| Enable top padding | Adds top padding around the icon | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the icon | Checkbox (default: false) | -| Enable internal padding | Adds internal padding inside the icon container | Checkbox (default: false) | - +|---------|-------------|--------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | +| Enable internal padding | Controls the enable internal padding | Checkbox (default: false) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background color scheme | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Text color | Controls the icon color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Background | Controls the background | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Text | Controls the text | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3 | +| Enable background color | Controls the enable background color | Checkbox (default: true) | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Icon style | Controls the icon visual style | • Default (default)
• Solid
• Outline | -| Icon size | Controls the size of the icon | 10 - 100 (default: 24) | -| Radius | Controls the border radius | • None
• Default
• Sm
• Md
• Lg
• Xl
• 2xl
• Full | - +|---------|-------------|--------| +| Icon style | Controls the icon style | • Default (default)
• Solid
• Outline | +| Icon size | Controls the icon size | 10 – 100 (default: 24) | +| Radius | Controls the radius | • None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +|---------|-------------|--------| +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/image-comparison.md b/slab/blocks/image-comparison.md index 918b7af..be59555 100644 --- a/slab/blocks/image-comparison.md +++ b/slab/blocks/image-comparison.md @@ -3,15 +3,12 @@ ## Overview -Image comparison section that shows before/after images with an interactive slider. +A before-and-after image comparison block with a draggable slider for comparing two images side by side. Supports customizable labels, color schemes, aspect ratios, and border radius options. ## Common use cases -- Display before and after product transformations -- Show product variations side by side -- Compare different design options -- Create interactive product demonstrations +Showcase before-and-after transformations or product comparisons with an interactive slider. ## Block settings @@ -19,41 +16,41 @@ Image comparison section that shows before/after images with an interactive slid ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Drag label | Text displayed when the slider is at the center position | Text input (default: Drag to explore) | -| Image before | The "before" image to display | Image picker | -| Before label | Label text for the before image | Text input (default: Before) | -| Image after | The "after" image to display | Image picker | -| After label | Label text for the after image | Text input (default: After) | - +|---------|-------------|--------| +| Drag label | Controls the drag label | Text input | +| Image before | Controls the image before | Image picker | +| Before label | Controls the before label | Text input | +| Image after | Controls the image after | Image picker | +| After label | Controls the after label | Text input | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the comparison | Checkbox (default: false) | -| Enable top padding | Adds top padding around the comparison | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the comparison | Checkbox (default: false) | - +|---------|-------------|--------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text color combination | • Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary | -| Border color | Controls the border color | • Body
• Subtle
• Strong
• Primary
• Secondary
• Tertiary
• None | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Controls the border | • Body (default)
• Subtle
• Strong
• None | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Aspect ratio | Controls the aspect ratio of the comparison container | • Square
• Landscape (default)
• Portrait | -| Show entire image | Uses object-contain instead of object-cover to show full image | Checkbox (default: false) | - +|---------|-------------|--------| +| Radius | Controls the radius | • None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full | +| Aspect ratio | Controls the aspect ratio | • Square
• Landscape (default)
• Portrait | +| Show entire image | Controls the show entire image | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/image.md b/slab/blocks/image.md index 97874cd..b7ce4c8 100644 --- a/slab/blocks/image.md +++ b/slab/blocks/image.md @@ -3,14 +3,12 @@ ## Overview -A flexible image block component that renders a single image with customizable styling options. Supports responsive display, color schemes, aspect ratios, and alignment controls. +A versatile image block that renders a single image with optional link, lazy loading, and responsive display options. Supports customizable aspect ratios, border radius, color schemes, and visibility controls. ## Common use cases -- Consider image optimization by setting appropriate max_width -- Choose aspect ratio based on image content and layout needs -- Utilize color schemes to maintain fallback colors or backgrounds when using transparent images +Display images with optional links, responsive sizing, and customizable styling throughout your theme. ## Block settings @@ -18,48 +16,46 @@ A flexible image block component that renders a single image with customizable s ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Image | The image to display | Image picker | - +|---------|-------------|--------| +| Image | Controls the image | Image picker | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) | -| Enable top padding | Adds top padding around the content | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) | - +|---------|-------------|--------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background color scheme | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur | -| Border color | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not empty | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls which sides have borders | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | -| Radius | Controls the border radius | • None (default)
• Default
• Sm
• Md
• Lg
• Xl
• 2xl
• Full | -| Enable aspect ratio | Forces the image to maintain a specific aspect ratio | Checkbox (default: false) | -| Aspect ratio | The aspect ratio to maintain | • Square
• Landscape
• Portrait
• None

Visible when enable aspect ratio is true | - +|---------|-------------|--------| +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | +| Radius | Controls the radius | • None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full | +| Enable aspect ratio | Controls the enable aspect ratio | Checkbox (default: false) | +| Aspect ratio | Controls the aspect ratio | • Square
• Landscape
• Portrait
• None (default) | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Width | Controls the width of the image | 5 - 100 % (default: 100) | -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +|---------|-------------|--------| +| Width | Controls the width | 5 – 100 % (default: 100) | +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-based animations to the block | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/input-field.md b/slab/blocks/input-field.md index 5ab734c..c0fc096 100644 --- a/slab/blocks/input-field.md +++ b/slab/blocks/input-field.md @@ -3,15 +3,12 @@ ## Overview -A configurable form input block that renders different types of form inputs based on the selected input type, supporting text, textarea, email, checkbox, radio, select, date, file, and password input types. +A flexible form input field block that renders various input types including text, email, phone, and textarea fields. Provides customizable label positioning, placeholder text, validation requirements, and styling options. ## Common use cases -- Use appropriate input types for different data collection needs -- Provide clear labels and help text for better accessibility -- Consider required field settings based on form validation needs -- Create comprehensive forms by combining multiple input field blocks +Create customizable form fields for contact forms, newsletter signups, and other data collection needs. ## Block settings @@ -19,19 +16,15 @@ A configurable form input block that renders different types of form inputs base ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Input type | Select the type of form input to display | • Text
• Textarea
• Email
• Checkbox
• Radio
• Select
• Date
• File
• Password | -| Label | Label text for the input field | Text input | -| Placeholder | Placeholder text shown in the input | Text input

Visible when input type is not checkbox and input type is not radio | -| Help text | Additional help text displayed below the input | Rich text input

Visible when input type is not checkbox and input type is not radio | -| Options | Comma-separated list of options for select or radio inputs | Textarea input

Visible when input type is "select" or input type is "radio" | -| Accepted file types | File types accepted for file inputs | Text input (default: .jpg, .jpeg, .png, .pdf, .svg, .gif)

Visible when input type is "file" | -| Enable multiple files | Allows multiple file selection for file inputs | Checkbox (default: false)

Visible when input type is "file" | -| Enable required field | Marks the input as required | Checkbox (default: false) | - +|---------|-------------|--------| +| Label | Controls the label | Text input | +| Placeholder | Controls the placeholder | Text input | +| Help text | Controls the help text | Rich text input | +| Options | Separate each option with a comma | Textarea input | +| Make this field required | Controls the make this field required | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/layout__flex.md b/slab/blocks/layout__flex.md index 417595d..4504466 100644 --- a/slab/blocks/layout__flex.md +++ b/slab/blocks/layout__flex.md @@ -3,23 +3,12 @@ ## Overview -A flexible container component that provides customizable flex layout options for child blocks. Enables responsive alignment, spacing, and visibility controls through the theme editor. Supports both horizontal and vertical flex directions with comprehensive alignment options. +A flexible CSS flex-based grid layout container that arranges child blocks in rows and columns. Supports configurable column counts for desktop and mobile, gap sizing, alignment, and responsive visibility. ## Common use cases -- Create flexible row or column layouts for content organization -- Use horizontal direction for side-by-side content arrangements -- Use vertical direction for stacked content layouts -- Configure gap sizes to control spacing between flex items -- Adjust alignment settings to position content within the flex container - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Flex item](_g__flex-item.md) +Arrange content blocks in a flexible grid layout with configurable columns and responsive behavior. ## Block settings @@ -27,42 +16,42 @@ The following blocks can be nested within this block: ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Padding space at the top of the container | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the container | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the container | Checkbox (default: false) | -| Gap size | Controls spacing between flex items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Controls the enable inheritance | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - +|---------|-------------|--------| +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Direction | Controls the flex direction | • Horizontal (default)
• Vertical | -| Horizontal alignment (row) | Controls horizontal alignment when direction is horizontal | • Left (default)
• Center
• Right
• Between

Visible when direction is horizontal | -| Vertical alignment (row) | Controls vertical alignment when direction is horizontal | • Start (default)
• Middle
• End
• Between
• Stretch

Visible when direction is horizontal | -| Vertical alignment (column) | Controls vertical alignment when direction is vertical | • Start (default)
• Middle
• End
• Between

Visible when direction is vertical | -| Horizontal alignment (column) | Controls horizontal alignment when direction is vertical | • Left
• Center
• Right
• Between
• Stretch (default)

Visible when direction is vertical | - +|---------|-------------|--------| +| Direction | Controls the direction | • Horizontal (default)
• Vertical | +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right
• Between | +| Vertical alignment | Controls the vertical alignment | • Start (default)
• Middle
• End
• Between | +| Horizontal alignment | Controls the horizontal alignment | • Left
• Center
• Right
• Between
• Stretch (default) | +| Vertical alignment | Controls the vertical alignment | • Start
• Middle
• End
• Between
• Stretch (default) | +| Enable block wrap | Controls the enable block wrap | Checkbox (default: true) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__float.md b/slab/blocks/layout__float.md index 3268490..6a24507 100644 --- a/slab/blocks/layout__float.md +++ b/slab/blocks/layout__float.md @@ -3,21 +3,16 @@ ## Overview -A float block that wraps other theme or app blocks and positions them absolutely according to x and y coordinate settings. Supports responsive positioning for different desktop and mobile layouts with rotation effects for dynamic floating content. +A floating overlay container that positions its child blocks at a fixed location on the page. Supports configurable positioning, sizing, rotation, color schemes, and separate desktop and mobile layout controls. ## Common use cases -- Position blocks at specific coordinates on the page for floating elements like tooltips, badges, or overlays -- Ensure the parent container has position: relative for proper positioning -- Use responsive positioning for different desktop and mobile layouts -- Apply rotation effects for dynamic floating content +Position content as a floating overlay at specific locations on the page with separate mobile and desktop controls. ## Compatible blocks -The following blocks can be nested within this block: - - All theme blocks - App blocks @@ -27,42 +22,41 @@ The following blocks can be nested within this block: ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | -| Enable color difference | Applies mix-blend-difference for visual contrast | Checkbox (default: false) | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Controls the enable inheritance | Checkbox (default: false) | +| Enable color difference | Colors are inverted when this block overlaps any other content. | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - +|---------|-------------|--------| +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | -### Layout (desktop) +### Layout desktop | Setting | Description | Options | -|---------|-------------|---------| -| Vertical alignment | Vertical position percentage on desktop | 0 - 100 % (default: 50) | -| Horizontal alignment | Horizontal position percentage on desktop | 0 - 100 % (default: 50) | -| Width | Width of the floating block as viewport percentage | 5 - 100 % (default: 30) | -| Rotation | Rotation angle in degrees | 0 - 360 deg (default: 15) | +|---------|-------------|--------| +| Vertical alignment | Controls the vertical alignment | 0 – 100 % (default: 50) | +| Horizontal alignment | Controls the horizontal alignment | 0 – 100 % (default: 50) | +| Width | Controls the width | 5 – 100 % (default: 30) | +| Rotation | Controls the rotation | 0 – 360 deg (default: 15) | - -### Layout (mobile) +### Layout mobile | Setting | Description | Options | -|---------|-------------|---------| -| Vertical alignment | Vertical position percentage on mobile | 0 - 100 % (default: 50) | -| Horizontal alignment | Horizontal position percentage on mobile | 0 - 100 % (default: 50) | -| Width | Width of the floating block as viewport percentage | 5 - 100 % (default: 70) | -| Rotation | Rotation angle in degrees | 0 - 360 deg (default: 15) | - +|---------|-------------|--------| +| Vertical alignment | Controls the vertical alignment | 0 – 100 % (default: 50) | +| Horizontal alignment | Controls the horizontal alignment | 0 – 100 % (default: 50) | +| Width | Controls the width | 5 – 100 % (default: 70) | +| Rotation | Controls the rotation | 0 – 360 deg (default: 15) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__grid.md b/slab/blocks/layout__grid.md index 891e231..302e70b 100644 --- a/slab/blocks/layout__grid.md +++ b/slab/blocks/layout__grid.md @@ -3,28 +3,16 @@ ## Overview -A flexible grid container component that allows for dynamic layout configuration of child blocks. Supports both app and theme blocks in a responsive grid layout with customizable columns for desktop and mobile views. Ideal for product grids, image galleries, or any content that benefits from a grid structure. +A CSS grid layout container that arranges child blocks in a structured grid with configurable columns. Supports custom column counts for desktop and mobile, gap sizing, color schemes, and responsive visibility. ## Common use cases -- Display multiple blocks in a grid layout for product grids, image galleries, or any content that benefits from a grid structure -- Configure desktop and mobile columns based on content size and screen real estate -- Use gap settings to control spacing between grid items -- Enable scroll animations for dynamic content reveals +Organize content blocks in a structured grid with precise column control for desktop and mobile. ## Compatible blocks -The following blocks can be nested within this block: - -- [Grid products](_grid-products.md) -- [Grid articles](_grid-articles.md) -- [Grid collections](_grid-collections.md) -- [Grid gallery](_grid-gallery.md) -- [Grid recommendations](_grid-recommendations.md) -- [Grid recent](_grid-recent.md) -- [Grid item](_g__grid-item.md) - All theme blocks - App blocks @@ -34,39 +22,38 @@ The following blocks can be nested within this block: ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Padding space at the top of the container | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the container | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the container | Checkbox (default: false) | -| Gap size | Controls spacing between grid items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Controls the enable inheritance | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - +|---------|-------------|--------| +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Row desktop | Number of columns in grid on desktop | 1 - 8 (default: 5) | -| Row mobile | Number of columns in grid on mobile | 1 - 3 (default: 2) | - +|---------|-------------|--------| +| Desktop row size | Controls the desktop row size | 1 – 8 (default: 5) | +| Mobile row size | Controls the mobile row size | 1 – 3 (default: 2) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__inline.md b/slab/blocks/layout__inline.md index 30f9ab9..213e100 100644 --- a/slab/blocks/layout__inline.md +++ b/slab/blocks/layout__inline.md @@ -3,26 +3,20 @@ ## Overview -A flexible inline container component that allows for horizontal display of child blocks. Supports both app and theme blocks flowing inline with customizable spacing and alignment. Content wraps naturally when it reaches the container width. Ideal for text with icons, inline images, or any content that should flow together. +A flexible inline container that displays child blocks horizontally in a flowing layout. Content wraps naturally when it reaches the container width. ## Common use cases -- Display text with inline icons or images -- Create inline content that flows horizontally -- Combine text and visual elements in a single line -- Use for inline badges, labels, or decorative elements -- Display inline links or buttons within text content +Display multiple blocks inline horizontally, ideal for text with icons or other content that should flow together. ## Compatible blocks -The following blocks can be nested within this block: - -- [Rich text](richtext.md) -- [Image](image.md) -- [Icon](icon.md) -- [Video](video.md) +- Rich text +- Image +- Icon +- Video ## Block settings @@ -30,21 +24,19 @@ The following blocks can be nested within this block: ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Padding space at the top of the container | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the container | 0 - 300 px (default: 0) | - +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Block max height | Maximum height for inline blocks (images, videos, icons) | 0 - 300 px (default: 30) | - +|---------|-------------|--------| +| Block max height | Controls the block max height | 0 – 300 px (default: 30) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__marquee.md b/slab/blocks/layout__marquee.md index 18780cb..16cd023 100644 --- a/slab/blocks/layout__marquee.md +++ b/slab/blocks/layout__marquee.md @@ -1,67 +1,61 @@ -# Layout marquee +# Marquee + ## Overview -A marquee layout block that creates a scrolling effect for its child blocks. It supports various customization options such as animation duration, pause on hover, reverse animation, and alignment settings. This block is ideal for showcasing featured content in a dynamic and engaging manner. +A marquee layout block that creates a continuous horizontal scrolling effect for its child blocks. Supports configurable animation duration, pause on hover, reverse direction, and color scheme options. + ## Common use cases -* Highlight important announcements or featured products with a scrolling marquee -* Adjust animation settings to create a smooth and visually appealing effect -* Consider the content length when setting the animation duration to avoid abrupt loops -* Use pause on hover for better user interaction +Create scrolling announcement bars, featured content showcases, or repeating promotional content. + ## Compatible blocks -The following blocks can be nested within this block: +- Rich text +- Image +- Icon +- Button +- Container -* [Rich text](richtext.md) -* [Image](image.md) -* [Icon](icon.md) -* [Button](button.md) -* [Container](layout/container.md) ## Block settings -### Content - -| Setting | Description | Options | -| ------------------------ | ----------------------------------------------- | ------------------------- | -| Animation duration | Duration of the marquee animation in seconds | 1 - 90 s (default: 60) | -| Enable pause on hover | Pauses animation when hovering over the marquee | Checkbox (default: false) | -| Enable reverse animation | Reverses the scroll direction | Checkbox (default: false) | - ### Spacing -| Setting | Description | Options | -| ------------------------- | ------------------------------------------ | ------------------------- | -| Top spacing | Padding space at the top of the marquee | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the marquee | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the marquee | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text colors |

• Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default)

| -| Color border | Controls the border color |

• Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank

| +| Setting | Description | Options | +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Controls the enable inheritance | Checkbox (default: false) | ### Style -| Setting | Description | Options | -| ---------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| Block max height | Maximum height for block elements | 0 - 500 px (default: 100) | -| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All

| +| Setting | Description | Options | +|---------|-------------|--------| +| Block max height | Controls the block max height | 0 – 500 px (default: 100) | +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | ### Layout -| Setting | Description | Options | -| ------------------ | -------------------------------------- | ---------------------------------------------- | -| Vertical alignment | Controls vertical alignment of content |

• Top
• Middle (default)
• Bottom

| +| Setting | Description | Options | +|---------|-------------|--------| +| Vertical alignment | Controls the vertical alignment | • Top
• Middle (default)
• Bottom | ### Display -| Setting | Description | Options | -| ---------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| -| Scroll animation | Adds scroll-triggered animations |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| +| Setting | Description | Options | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__overlay.md b/slab/blocks/layout__overlay.md index fe90622..bc1fa55 100644 --- a/slab/blocks/layout__overlay.md +++ b/slab/blocks/layout__overlay.md @@ -3,20 +3,16 @@ ## Overview -A flexible overlay container component that allows positioning child blocks in fixed positions on the screen corners. Supports both app and theme blocks with customizable corner positioning and z-index control. Ideal for chat widgets, promotional banners, or notification elements. +A fixed-position overlay container that stays in place while the page scrolls. Supports configurable positioning, sizing, color schemes, and responsive visibility controls. ## Common use cases -- Use for floating/fixed position blocks on the screen like chat widgets, promotional banners, or notification elements -- Configure position and spacing using the block settings -- Control visibility for different device sizes +Display fixed-position content such as alerts, promotional banners, or persistent navigation elements. ## Compatible blocks -The following blocks can be nested within this block: - - All theme blocks - App blocks @@ -26,38 +22,37 @@ The following blocks can be nested within this block: ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable padding | Adds padding around the overlay content | Checkbox (default: true) | -| Gap size | Controls spacing between child blocks | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|--------| +| Enable padding | Controls the enable padding | Checkbox (default: true) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Controls the enable inheritance | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - +|---------|-------------|--------| +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Rotation | Rotates the overlay content | • None (default)
• Right 90°
• Left 90° | -| Horizontal position | Controls horizontal positioning of the overlay | • Left (default)
• Center
• Right | -| Vertical position | Controls vertical position as percentage from top | 0 - 100 % (default: 100) | -| Enable margin | Applies margin based on theme settings | Checkbox (default: false) | - +|---------|-------------|--------| +| Rotation | Controls the rotation | • No rotation (default)
• Rotate 90° right
• Rotate 90° left | +| Horizontal position | Controls the horizontal position | • Left (default)
• Center
• Right | +| Vertical position | Controls the vertical position | 0 – 100 % (default: 100) | +| Enable margin | Controls the enable margin | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/layout__slider.md b/slab/blocks/layout__slider.md index beab355..45ccfeb 100644 --- a/slab/blocks/layout__slider.md +++ b/slab/blocks/layout__slider.md @@ -3,30 +3,12 @@ ## Overview -A flexible slider/carousel container component that provides smooth scrolling functionality for child content blocks. Features auto-scroll capabilities, navigation arrows, progress indicators, and responsive behavior. All JavaScript functionality is contained within Alpine.js x-data attributes for efficient performance. +A slider layout container that displays child blocks in a horizontal scrollable carousel. Supports configurable slide width, autoplay, navigation controls, progress indicators, and responsive visibility. ## Common use cases -- Create image carousels or product sliders -- Display featured content in a scrollable horizontal layout -- Use auto-scroll for automatic content rotation -- Add navigation controls for user interaction -- Show progress indicators to display slide position -- Enable scroll animations for engaging content reveals - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Slider item](_g__slider-item.md) -- [Slider products](_slider-products.md) -- [Slider articles](_slider-articles.md) -- [Slider collections](_slider-collections.md) -- [Slider gallery](_slider-gallery.md) -- [Slider recommendations](_slider-recommendations.md) -- [Slider recent](_slider-recent.md) +Present content in a horizontal carousel with navigation controls and autoplay functionality. ## Block settings @@ -34,59 +16,61 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Show arrows | Displays navigation arrows for the slider | Checkbox (default: true) | -| Show indicators | Displays progress indicators (dots or numbers) | Checkbox (default: true) | -| Show controls on hover | Shows controls only when hovering over the slider | Checkbox (default: false)

Visible when show arrows or show indicators is true | -| Show scrollbar | Displays a scrollbar for the slider | Checkbox (default: false) | -| Show progress bar | Displays a progress bar at the top of the slider | Checkbox (default: false)

Visible when enable auto scroll is true | -| Enable instant transition | Removes smooth scrolling for instant slide changes | Checkbox (default: false) | -| Enable auto scroll | Automatically scrolls through slides | Checkbox (default: false) | -| Auto scroll delay | Time delay between auto-scroll transitions | 0 - 20 s (default: 0)

Visible when enable auto scroll is true | - +|---------|-------------|--------| +| Show arrows | Controls the show arrows | Checkbox (default: true) | +| Show indicators | Controls the show indicators | Checkbox (default: true) | +| Show controls on hover | Controls the show controls on hover | Checkbox (default: false) | +| Show scrollbar | Controls the show scrollbar | Checkbox (default: false) | +| Show progress bar | Controls the show progress bar | Checkbox (default: false) | +| Enable instant transition | When enabled the slider will instantly move to the next slide instead of smoothly scrolling. | Checkbox (default: false) | +| Enable auto scroll | When enabled the slider will automatically scroll to the next slide after a delay. | Checkbox (default: false) | +| Auto scroll delay | Controls the auto scroll delay | 0 – 20 s (default: 10) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Padding space at the top of the slider | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the slider | 0 - 300 px (default: 0) | -| Enable horizontal padding | Adds horizontal padding around the slider | Checkbox (default: false) | -| Gap size | Controls spacing between slider items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable internal padding | Controls the enable internal padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | -| Color arrow | Controls the color of navigation arrows | • Primary
• Secondary
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Link
• Inverted link

Visible when show arrows is true | -| Color indicator | Controls the color of progress indicators | • Primary
• Secondary
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Transparent

Visible when show indicators is true | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Controls the border | • None
• Subtle (default)
• Strong
• Body foreground | +| Arrow | Controls the arrow | Color scheme picker | +| Arrow | Controls the arrow | • Plain
• Main
• Blur (default)
• Outline
• Inverted outline
• Transparent
• Inverted transparent | +| Indicator | Controls the indicator | Color scheme picker | +| Indicator | Controls the indicator | • Plain
• Main
• Blur (default)
• Outline
• Inverted outline
• Transparent
• Inverted transparent | +| Enable inheritance | Controls the enable inheritance | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Button size | Controls the size of navigation arrow buttons | • Extra small
• Small (default)
• Standard
• Large

Visible when show arrows is true | -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | -| Indicator radius | Controls the border radius of progress indicators | • None
• Default (default)
• Sm
• Md
• Lg
• Xl
• 2xl
• Full | - +|---------|-------------|--------| +| Button size | Controls the button size | • Extra small
• Small (default)
• Standard
• Large | +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | +| Radius | Controls the radius | • None (default)
• Default
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full | +| Indicator radius | Controls the indicator radius | • None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Vertical alignment | Controls vertical alignment of slider items | • Top (default)
• Middle
• Bottom | -| Control alignment | Controls horizontal alignment of navigation controls | • Left
• Center
• Right (default)

Visible when show arrows or show indicators is true | -| Control placement | Controls vertical placement of navigation controls | • Top (default)
• Middle
• Bottom
• Under

Visible when show arrows or show indicators is true | -| Enable scroll margin | Applies margin based on theme settings for scroll padding | Checkbox (default: false) | - +|---------|-------------|--------| +| Vertical alignment | Controls the vertical alignment | • Top (default)
• Middle
• Bottom | +| Control alignment | Controls the control alignment | • Left
• Center
• Right (default) | +| Control placement | Controls the control placement | • Top (default)
• Middle
• Bottom
• Under | +| Enable scroll margin | Controls the enable scroll margin | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__tab.md b/slab/blocks/layout__tab.md index 743dc39..2950af9 100644 --- a/slab/blocks/layout__tab.md +++ b/slab/blocks/layout__tab.md @@ -3,23 +3,12 @@ ## Overview -A flexible container component that provides customizable tab layout options for child blocks. Ability to show multiple containers that can be toggled with tabs. Uses Alpine.js for tab switching functionality with smooth transitions between tab content. +A tabbed layout container that organizes child blocks into switchable tab panels. Supports configurable tab styling, color schemes, alignment, and responsive visibility controls. ## Common use cases -- Organize content into multiple tabbed sections -- Create product detail tabs (description, specifications, reviews) -- Display different content views that can be toggled -- Group related information into separate tab panels -- Use for FAQ sections or multi-step content organization - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Tab item](_g__tab-item.md) +Organize related content into switchable tabs for compact, organized presentation. ## Block settings @@ -27,40 +16,39 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Tabs | Comma-separated list of tab names (e.g., "Tab 1, Tab 2, Tab 3") | Text input | - +|---------|-------------|--------| +| Tabs | A comma-separated list of tab titles | Text input | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Padding space at the top of the container | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the container | 0 - 300 px (default: 0) | -| Enable internal padding | Adds horizontal padding inside the tab header | Checkbox (default: false) | -| Gap size | Controls spacing between tab buttons | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|--------| +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | +| Enable internal padding | Controls the enable internal padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors for the tab header | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Color border | Controls the border color | • Subtle (default)
• Strong

Visible when border position is not blank | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Border | Controls the border | • Subtle (default)
• Strong
• Body foreground | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for tab button text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains type-- | -| Font size | Font size for tab button text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | - +|---------|-------------|--------| +| Font family | Controls the font family | • Standard (default)
• Heading
• Subheading
• Accent | +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | +| Border position | Controls the border position | • None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/layout__table.md b/slab/blocks/layout__table.md index 6892b87..18a65a7 100644 --- a/slab/blocks/layout__table.md +++ b/slab/blocks/layout__table.md @@ -3,24 +3,12 @@ ## Overview -A flexible container component that provides customizable table layout options for child blocks. Allows merchants to add multiple table items with customizable columns. Supports responsive display with mobile-friendly layout and column highlighting features. +A table layout container that arranges child blocks in a structured table format with configurable columns. Supports sticky headers, customizable header text, color schemes, and responsive visibility. ## Common use cases -- Create comparison tables for products or features -- Display specification tables with multiple columns -- Show pricing comparison tables -- Organize data in a structured tabular format -- Highlight specific columns for emphasis -- Use for product feature comparisons or specification sheets - - -## Compatible blocks - -The following blocks can be nested within this block: - -- [Table row](_g__table-row.md) +Display structured data in a table format with configurable columns and optional sticky headers. ## Block settings @@ -28,48 +16,46 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Column headings | Comma-separated list of column headings (e.g., "Feature, Our Brand, Competitor") | Text input | - +|---------|-------------|--------| +| Column headings | Enter a comma-separated list of column headings. E.g. Heading 1, Heading 2, Heading 3 | Text input | ### Color | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent (default) | -| Enable column highlight | Highlights a specific column with a different color scheme | Checkbox (default: false) | -| Color column scheme | Color scheme for the highlighted column | • Body
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary (default)
• Blur
• Transparent

Visible when enable column highlight is true | -| Highlighted column | Column number to highlight (1-based index) | 0 - 10 (default: 2)

Visible when enable column highlight is true | - +|---------|-------------|--------| +| Type | Controls the type | • Custom
• Base (default) | +| Scheme | Controls the scheme | Color scheme picker | +| Scheme | Controls the scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent (default) | +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | +| Enable column highlight | Controls the enable column highlight | Checkbox (default: false) | +| Column scheme | Controls the column scheme | • Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1 (default)
• Shade 2
• Shade 3
• Blur
• Transparent | +| Highlighted column | Select the column to highlight. This column will have a different background color. | 0 – 10 (default: 2) | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the table | Checkbox (default: false) | -| Top spacing | Padding space at the top of the table | 0 - 300 px (default: 0) | -| Bottom spacing | Padding space at the bottom of the table | 0 - 300 px (default: 0) | - +|---------|-------------|--------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Top spacing | Controls the top spacing | 0 – 300 px (default: 0) | +| Bottom spacing | Controls the bottom spacing | 0 – 300 px (default: 0) | ### Style | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for table header text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains type-- | -| Font size | Font size for table header text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|--------| +| Font family | Controls the font family | • Standard (default)
• Heading
• Subheading
• Accent | +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Table layout | Controls how table columns are sized | • Auto
• Fixed (default)
• Custom | -| Column widths | Comma-separated list of column widths (e.g., "30%, 40%, 30%") | Text input

Visible when table layout is custom | - +|---------|-------------|--------| +| Table layout | Controls the table layout | • Auto
• Fixed (default)
• Custom | +| Column widths | Enter a comma-separated list of column widths. E.g. 20%, 40%, 40% | Text input | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-triggered animations | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|--------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls how the block appears when scrolled into view. | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/liquid.md b/slab/blocks/liquid.md index 92babab..2fc43d9 100644 --- a/slab/blocks/liquid.md +++ b/slab/blocks/liquid.md @@ -3,16 +3,12 @@ ## Overview -A flexible custom liquid code block that allows merchants to add custom liquid code to their theme with customizable styling and responsive visibility options. +A flexible custom Liquid code block that allows merchants to add custom Liquid code to their theme. Supports customizable padding, text alignment, and responsive visibility options. ## Common use cases -- Use for custom liquid code snippets, variables, or logic -- Consider text color contrast when using force light/dark options -- Use visibility options to create different content for mobile/desktop -- Test liquid code thoroughly before using in production -- Be cautious with liquid code that could break the theme +- Add custom Liquid code snippets and logic to any section of your online store. ## Block settings @@ -21,27 +17,24 @@ A flexible custom liquid code block that allows merchants to add custom liquid c | Setting | Description | Options | |---------|-------------|---------| -| Liquid | Custom liquid code to execute | Liquid input (default: {{ shop.name }}) | - +| Liquid | Custom Liquid code to execute | Liquid input (default: {{ shop.name }}) | ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) | -| Enable top padding | Adds top padding around the content | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) | - +| Enable top padding | Adds top padding above the content | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the content | Checkbox (default: false) | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | - +| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/localization-label.md b/slab/blocks/localization-label.md index 686a982..6f13476 100644 --- a/slab/blocks/localization-label.md +++ b/slab/blocks/localization-label.md @@ -3,37 +3,30 @@ ## Overview -A block component that displays the current localization information including country flag, currency, and language. +A block component that displays the current localization information including country flag, currency, and language. Renders different formats depending on the selected display style. ## Common use cases -- Use in header or footer areas where localization information needs to be displayed -- Consider the space available when enabling padding options -- Ensure proper translation strings are set up in the theme's locale files -- Can be combined with localization form for currency/language switching functionality +- Display the store's current country, currency, and language information in header or footer areas. ## Block settings -### Content - | Setting | Description | Options | |---------|-------------|---------| -| Localization label style | Controls what localization information is displayed | • Summary (default)
• Country
• Language | - +| Display style | Controls what localization information is displayed | • Summary (default)
• Country
• Language | ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the label | Checkbox (default: false) | -| Enable top padding | Adds top padding around the label | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the label | Checkbox (default: false) | - +| Enable top padding | Adds top padding above the label | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the label | Checkbox (default: false) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/logo.md b/slab/blocks/logo.md index bdb9c8c..adfa933 100644 --- a/slab/blocks/logo.md +++ b/slab/blocks/logo.md @@ -3,15 +3,12 @@ ## Overview -Displays the store logo with responsive sizing for desktop and mobile devices. The component renders either an uploaded logo image or falls back to the shop name as text if no image is provided. The logo is fully customizable with options for height adjustments on different devices, horizontal alignment, padding, and visibility controls across breakpoints. +Displays the store logo as either an uploaded image or text fallback. Supports responsive sizing for desktop and mobile devices, customizable typography, alignment, and visibility options. ## Common use cases -- Upload a logo with transparent background for best results -- Adjust desktop and mobile logo heights to maintain proper proportions and readability -- Consider logo placement within the overall header layout when choosing alignment -- Use text fallback when logo image is not available +- Display your store logo in the header with responsive sizing for desktop and mobile devices. ## Block settings @@ -20,41 +17,37 @@ Displays the store logo with responsive sizing for desktop and mobile devices. T | Setting | Description | Options | |---------|-------------|---------| -| Logo | Upload a logo image | Image picker

Visible when show image is true | +| Logo | Upload a logo image | Image picker

_Visible when show image is enabled_ | | URL | Link destination when logo is clicked | URL input (default: /) | -| Text | Text to display if no logo image is provided | Text input

Visible when show image is false | -| Show image | Toggle between logo image and text | Checkbox (default: false) | - +| Text | Text to display when no logo image is used | Text input

_Visible when show image is disabled_ | +| Show image | Toggle between logo image and text display | Checkbox (default: false) | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Desktop logo height | Height of the logo on desktop devices | 10 - 200 px (default: 24) | -| Mobile logo height | Height of the logo on mobile devices | 10 - 200 px (default: 24) | +| Desktop logo height | Height of the logo on desktop devices | 10 – 200 px (default: 24) | +| Mobile logo height | Height of the logo on mobile devices | 10 – 200 px (default: 24) | | Enable horizontal padding | Adds horizontal padding around the logo | Checkbox (default: false) | - ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for text logo | • Standard
• Heading (default)
• Subheading
• Accent

Visible when font size contains 'type--' or font size is "custom" | -| Font size | Controls the font size of text logo | • Smaller
• Small
• Default
• Big
• Bigger (default)
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Custom | -| Size | Custom font size when using custom typography | 4 - 400 px (default: 16)

Visible when font size is "custom" | -| Line height | Custom line height when using custom typography | 100 - 300 % (default: 150)

Visible when font size is "custom" | -| Letter spacing | Custom letter spacing when using custom typography | -3 - 3 rem (default: 0)

Visible when font size is "custom" | - +| Font family | Controls the font family used for text logo | • Standard
• Heading (default)
• Subheading
• Accent

_Visible when font size contains 'type--' or font size is "custom"_ | +| Font size | Controls the font size of the text logo | • Smaller
• Small
• Default
• Big
• Bigger (default)
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Custom | +| Size | Custom font size | 4 – 400 px (default: 16)

_Visible when font size is "custom"_ | +| Line height | Custom line height | 100 – 300 % (default: 150)

_Visible when font size is "custom"_ | +| Letter spacing | Custom letter spacing | -3 – 3 rem (default: 0)

_Visible when font size is "custom"_ | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +| Horizontal alignment | Controls horizontal alignment of the logo | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/map.md b/slab/blocks/map.md new file mode 100644 index 0000000..3ffd962 --- /dev/null +++ b/slab/blocks/map.md @@ -0,0 +1,52 @@ +# Map + + +## Overview + +A customizable store locator block that displays a map with markers for each store location. The block supports dynamic map rendering with Mapbox and static map rendering with an image. It also includes an accordion for each store location with details and a button to fly to the store. + + +## Common use cases + +* Display an interactive map with location markers +* Show store locations or service areas +* Create contact pages with embedded maps + + +## Compatible blocks + +The following blocks can be nested within this block: + +* Location + + +## Block settings + +### General + +| Setting | Description | Options | +|---------|-------------|----------| +| Enable dynamic map | Enables a dynamic interactive map | Checkbox (default: true) | +| Image | This image will be used instead of the map if you disable dynamic map. |

Image picker

Visible when enable_dynamic_map is false

| + +### Color + +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +|---------|-------------|----------| +| Map theme | Controls the map visual style |

• Standard
• Dark
• Light (default)

| + +### Display + +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/menu-dropdown.md b/slab/blocks/menu-dropdown.md index a8b5234..c62dbbd 100644 --- a/slab/blocks/menu-dropdown.md +++ b/slab/blocks/menu-dropdown.md @@ -3,23 +3,21 @@ ## Overview -A container component that handles menu dropdown functionality and styling. Provides a flexible menu system with support for nested links, dropdowns, and featured content blocks. Uses Alpine.js for dropdown menu interactions and positioning, supports full-width dropdowns for specified menu columns, and handles nested menu items up to grandchild level. +A container component that handles menu dropdown functionality and styling. Provides a flexible menu system with support for nested links, dropdowns, and featured content blocks. ## Common use cases -- Use for main navigation menus that require dropdowns -- Configure menu_columns setting for full-width mega menus -- Add navigation images to enhance visual hierarchy -- Customize fonts and spacing to match site design -- Leverage blocks to add featured content in dropdowns +* Create a multi-level navigation dropdown menu with customizable typography and colors +* Build header navigation with mega menu dropdowns +* Configure separate styles for parent, child, and grandchild links ## Compatible blocks The following blocks can be nested within this block: -- [Menu item](_g__menu-item.md) +* [Menu item](_g__menu-item.md) ## Block settings @@ -27,69 +25,79 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Menu | Select the menu to display | Link list picker (default: main-menu) | +|---------|-------------|----------| +| Menu | Select the navigation menu to display | Link list picker (default: main-menu) | - -### Parent links +### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for parent menu links | • Standard
• Heading
• Subheading
• Accent

Visible when parent font size contains type-- | -| Font size | Font size for parent menu links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | -| Enable dropdown icons | Shows chevron icons for menu items with dropdowns | Checkbox (default: true) | -| Enable link as button | Converts parent links with children to buttons | Checkbox (default: false) | +|---------|-------------|----------| +| Top spacing | Top spacing in pixels | 0 - 30 px (default: 15 px) | +| Bottom spacing | Bottom spacing in pixels | 0 - 30 px (default: 15 px) | +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| - -### Child links +### Colors | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for child menu links | • Standard
• Heading
• Subheading
• Accent

Visible when child font size contains type-- | -| Font size | Font size for child menu links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|----------| +| Type | Controls text color mode |

• Custom
• Base (default)

Visible when enable_text_inheritance is false

| +| Text | Select a custom text color scheme |

Color scheme picker

Visible when text_color_type is custom and enable_text_inheritance is false

| +| Text | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when text_color_type is base and enable_text_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | -### Grandchild links +### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for grandchild menu links | • Standard
• Heading
• Subheading
• Accent

Visible when grandchild font size contains type-- | -| Font size | Font size for grandchild menu links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|----------| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Right

| -### Dropdown +### Parent links | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Background and text color scheme for dropdown | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | -| Color border | Border color for dropdown | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None | -| Layout | Layout style for dropdown menus | • Stacked (default)
• Inline | -| Color divider | Divider color between stacked dropdown items | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None | -| Enable internal padding | Adds internal padding to dropdown content | Checkbox (default: false)

Visible when dropdown is not full-width | -| Enable margin | Applies margin based on theme settings | Checkbox (default: true)

Visible when menu columns is not blank | -| Gap size | Spacing between dropdown menu items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | -| Menu columns | Comma-separated list of menu items to display as full-width columns | Text input | +|---------|-------------|----------| +| Font family | Font family for parent menu links |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when parent font size contains type--

| +| Font size | Font size for parent menu links |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| +| Enable dropdown icons | Shows dropdown indicator icons | Checkbox (default: true) | +| Enable click to open | When enabled the parent menu items will not be linked and instead act as buttons to open a dropdown. | Checkbox (default: false) | - -### Spacing +### Child links | Setting | Description | Options | -|---------|-------------|---------| -| Top spacing | Padding space at the top of parent links | 0 - 30 px (default: 15) | -| Bottom spacing | Padding space at the bottom of parent links | 0 - 30 px (default: 15) | -| Enable horizontal padding | Adds horizontal padding around the menu | Checkbox (default: false) | -| Gap size | Spacing between menu items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | +|---------|-------------|----------| +| Font family | Font family for child menu links |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when child font size contains type--

| +| Font size | Font size for child menu links |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| +### Grandchild links -### Layout +| Setting | Description | Options | +|---------|-------------|----------| +| Font family | Font family for grandchild menu links |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when grandchild font size contains type--

| +| Font size | Font size for grandchild menu links |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| + +### Dropdown | Setting | Description | Options | -|---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment of the menu | • Left (default)
• Center
• Right | +|---------|-------------|----------| +| Layout | Controls the dropdown layout style |

• Stacked (default)
• Inline

| +| Enable internal padding | Adds internal padding to the dropdown | Checkbox (default: true) | +| Enable margin | Adds margin around the dropdown |

Checkbox (default: true)

Visible when menu_columns is not blank

| +| Gap size | Spacing between items in the dropdown |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| +| Full width dropdown | Enter a comma-separated list of menu links that should display with a full width dropdown. E.g. Best sellers, Sale, New arrivals | Text input | +### Dropdown colors + +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls dropdown color mode |

• Custom
• Base (default)

Visible when enable_dropdown_inheritance is false

| +| Scheme | Select a custom dropdown color scheme |

Color scheme picker

Visible when dropdown_color_type is custom and enable_dropdown_inheritance is false

| +| Scheme | Controls the dropdown background color |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when dropdown_color_type is base and enable_dropdown_inheritance is false

| +| Border | Controls the dropdown border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when dropdown_color_type is base and enable_dropdown_inheritance is false

| +| Divider | Controls the dropdown divider color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when dropdown_color_type is base and enable_dropdown_inheritance is false

| +| Enable inheritance | Inherit dropdown colors from parent | Checkbox (default: false) | ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/menu-page.md b/slab/blocks/menu-page.md index 6c238ca..1617266 100644 --- a/slab/blocks/menu-page.md +++ b/slab/blocks/menu-page.md @@ -3,24 +3,21 @@ ## Overview -A dynamic menu container component that creates a multi-level navigation menu with hover and click interactions. Supports up to three levels of navigation (parent, child, and grandchild links) with customizable styling and optional thumbnail images for menu items. Uses Alpine.js for menu interaction handling and includes hover and focus states with configurable timing. +A dynamic menu container component that creates a multi-level navigation menu with hover and click interactions. Supports up to three levels of navigation (parent, child, and grandchild links) with customizable styling and optional thumbnail images for menu items. ## Common use cases -- Create multi-level navigation menus with parent, child, and grandchild links -- Use consistent image sizes for navigation thumbnails (recommended 64px) -- Configure menu depth and content for optimal mobile usability -- Keep menu labels concise for better layout -- Test hover/click interactions across different devices -- Use dropdown icons for better UX when submenus are present +* Create a page-style navigation menu with slide-in sub-pages for child links +* Build mobile-friendly navigation with animated page transitions +* Configure separate typography for each menu level ## Compatible blocks The following blocks can be nested within this block: -- [Menu item](_g__menu-item.md) +* [Menu item](_g__menu-item.md) ## Block settings @@ -28,54 +25,51 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Menu | Select the menu to display | Link list picker (default: main-menu) | +|---------|-------------|----------| +| Menu | Select the navigation menu to display | Link list picker (default: main-menu) | - -### Parent links +### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for parent menu links | • Standard
• Heading
• Subheading
• Accent

Visible when parent font size contains type-- | -| Font size | Font size for parent menu links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | -| Enable dropdown icons | Shows chevron icons for menu items with dropdowns | Checkbox (default: true) | +|---------|-------------|----------| +| Enable padding | Adds padding around the content | Checkbox (default: false) | +| Enable internal padding | Adds internal padding to the menu page content | Checkbox (default: true) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| - -### Child links +### Color | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for child menu links | • Standard
• Heading
• Subheading
• Accent

Visible when child font size contains type-- | -| Font size | Font size for child menu links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | -### Grandchild links +### Parent links | Setting | Description | Options | -|---------|-------------|---------| -| Font family | Font family for grandchild menu links | • Standard
• Heading
• Subheading
• Accent

Visible when grandchild font size contains type-- | -| Font size | Font size for grandchild menu links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +|---------|-------------|----------| +| Font family | Font family for parent menu links |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when parent font size contains type--

| +| Font size | Font size for parent menu links |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| +| Enable dropdown icons | Shows dropdown indicator icons | Checkbox (default: true) | -### Page +### Child links | Setting | Description | Options | -|---------|-------------|---------| -| Color scheme | Background and text color scheme for menu page | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary | -| Color border | Border color for menu page | • Subtle (default)
• Strong
• None | - +|---------|-------------|----------| +| Font family | Font family for child menu links |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when child font size contains type--

| +| Font size | Font size for child menu links |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| -### Spacing +### Grandchild links | Setting | Description | Options | -|---------|-------------|---------| -| Enable padding | Adds padding around the menu | Checkbox (default: false) | -| Enable internal padding | Adds internal padding to menu content | Checkbox (default: true) | -| Gap size | Spacing between menu items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +|---------|-------------|----------| +| Font family | Font family for grandchild menu links |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when grandchild font size contains type--

| +| Font size | Font size for grandchild menu links |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/menu.md b/slab/blocks/menu.md index 42d541c..f179b8d 100644 --- a/slab/blocks/menu.md +++ b/slab/blocks/menu.md @@ -3,17 +3,12 @@ ## Overview -A flexible menu block component that renders a multi-level navigation menu with customizable styling options. Supports up to three levels of navigation (parent, child, and grandchild links) with optional thumbnail images for child and grandchild menu items. +A flexible menu block that renders a multi-level navigation menu with customizable styling. Supports up to three levels of navigation (parent, child, and grandchild links) with configurable typography, color, and layout options. ## Common use cases -- Use stacked layout for sidebar or mobile menus -- Use inline layout for horizontal navigation bars -- Enable hover animation for interactive menus with many items -- Add thumbnail images to enhance visual navigation -- Configure different styling for each menu level to create visual hierarchy -- Adjust gap sizes based on menu density and available space +- Add a navigation menu to your header, footer, or sidebar with customizable styling for each link level. ## Block settings @@ -24,65 +19,64 @@ A flexible menu block component that renders a multi-level navigation menu with |---------|-------------|---------| | Menu | Select the navigation menu to display | Link list picker (default: main-menu) | - ### Parent links | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for parent links | • Standard (default)
• Heading
• Subheading
• Accent

Visible when parent font size contains 'type--' | -| Font size | Controls the font size of parent links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | -| Font weight | Controls the font weight of parent links | • Default (default)
• Light
• Bold
• Black | -| Text color | Controls the text color of parent links | • Default (default)
• Alternative
• Primary
• Secondary
• Tertiary
• Neutral
• Shade | - +| Font family | Controls the font family used for parent links | • Standard (default)
• Heading
• Subheading
• Accent

_Visible when parent font size contains 'type--'_ | +| Font size | Controls the font size of parent links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | +| Font weight | Controls the font weight of parent links | • Default (default)
• Light
• Bold
• Black | ### Child links | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for child links | • Standard (default)
• Heading
• Subheading
• Accent

Visible when child font size contains 'type--' | -| Font size | Controls the font size of child links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | -| Font weight | Controls the font weight of child links | • Default (default)
• Light
• Bold
• Black | -| Text color | Controls the text color of child links | • Default (default)
• Alternative
• Primary
• Secondary
• Tertiary
• Neutral
• Shade | - +| Font family | Controls the font family used for child links | • Standard (default)
• Heading
• Subheading
• Accent

_Visible when child font size contains 'type--'_ | +| Font size | Controls the font size of child links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | +| Font weight | Controls the font weight of child links | • Default (default)
• Light
• Bold
• Black | ### Grandchild links | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for grandchild links | • Standard (default)
• Heading
• Subheading
• Accent

Visible when grandchild font size contains 'type--' | -| Font size | Controls the font size of grandchild links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | -| Font weight | Controls the font weight of grandchild links | • Default (default)
• Light
• Bold
• Black | -| Text color | Controls the text color of grandchild links | • Default (default)
• Alternative
• Primary
• Secondary
• Tertiary
• Neutral
• Shade | - +| Font family | Controls the font family used for grandchild links | • Standard (default)
• Heading
• Subheading
• Accent

_Visible when grandchild font size contains 'type--'_ | +| Font size | Controls the font size of grandchild links | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | +| Font weight | Controls the font weight of grandchild links | • Default (default)
• Light
• Bold
• Black | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Top spacing | Spacing above the menu | 0 - 30 px (default: 0) | -| Bottom spacing | Spacing below the menu | 0 - 30 px (default: 0) | +| Top spacing | Spacing above the menu | 0 – 30 px (default: 0) | +| Bottom spacing | Spacing below the menu | 0 – 30 px (default: 0) | | Enable horizontal padding | Adds horizontal padding around the menu | Checkbox (default: false) | | Enable internal padding | Adds internal padding to menu items | Checkbox (default: false) | -| Gap size | Spacing between menu items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | +| Gap size | Spacing between menu items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Text color | Color scheme picker for custom mode | Color scheme picker

_Visible when type is "custom" and enable inheritance is disabled_ | +| Text color | Controls the text color | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

_Visible when type is "base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Hover style | Controls the hover effect for menu items | • None (default)
• Background
• Fade | - +| Hover style | Controls the hover effect for menu items | • None (default)
• Background
• Fade | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Layout | Controls the menu layout direction | • Stacked
• Inline (default) | -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +| Layout | Controls the menu layout direction | • Stacked
• Inline (default) | +| Horizontal alignment | Controls horizontal alignment of the menu | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/newsletter-form.md b/slab/blocks/newsletter-form.md index 1fa4319..5adefaf 100644 --- a/slab/blocks/newsletter-form.md +++ b/slab/blocks/newsletter-form.md @@ -3,25 +3,22 @@ ## Overview -A customizable newsletter signup form block that allows customers to subscribe to your store's mailing list. Features responsive layout options, flexible styling, and customizable success messages. Subscribes users to the Shopify customer mailing list and supports both stacked and inline layouts with error handling and success message display. +A customizable newsletter signup form block that allows customers to subscribe to your store's mailing list. Features responsive layout options, flexible styling, and customizable success messages. ## Common use cases -- Collect email addresses for marketing campaigns and newsletters -- Add a compelling success message to confirm subscriptions -- Choose button colors that contrast well with your theme -- Use stacked layout for mobile-first designs -- Consider using padding options when placed within other content blocks -- Test the form across different screen sizes to ensure optimal layout +* Add a newsletter signup form that subscribes customers to your mailing list +* Create email collection forms for marketing campaigns +* Customize success messages after subscription ## Compatible blocks The following blocks can be nested within this block: -- [Input field](form-input.md) -- [Button](button.md) +* [Input field](input-field.md) +* [Button](button.md) ## Block settings @@ -29,28 +26,25 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Success message | Custom message shown after successful subscription | Rich text input | - +|---------|-------------|----------| +| Success message | Message shown after successful submission | Rich text input | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the form | Checkbox (default: false) | -| Enable top padding | Adds top padding around the form | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the form | Checkbox (default: false) | - +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Layout | Form layout style | • Stacked
• Inline (default) | - +|---------|-------------|----------| +| Layout | Controls the layout direction |

• Stacked
• Inline (default)

| ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/overlay__alert.md b/slab/blocks/overlay__alert.md index cbcd047..887da59 100644 --- a/slab/blocks/overlay__alert.md +++ b/slab/blocks/overlay__alert.md @@ -1,51 +1,52 @@ # Overlay alert -## Overview -An alert overlay component that displays content in a floating panel that can be positioned at different corners of the screen. Supports auto-close functionality with visual progress indicator, customizable appearance, and responsive behavior. +## Overview -## Common use cases +An alert overlay block that displays content in a floating panel positioned at different corners of the screen. Supports auto-close functionality with a visual progress indicator, customizable color schemes, and responsive visibility options. -* Use for temporary notifications, messages, or calls-to-action -* Keep content concise as the alert has limited space -* Consider accessibility when choosing colors and auto-close timing -* Display important announcements or promotional messages -* Provide user feedback for actions -## Compatible blocks +## Common use cases -The following blocks can be nested within this block: +- Display temporary notifications, promotional messages, or user feedback in a floating alert panel. -* [Container](layout/container.md) (for alert content) ## Block settings ### Content -| Setting | Description | Options | -| ------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Overlay preset | Select a preset overlay ID or use a custom one |

• Account
• Search
• Menu
• Primary cart
• Alternative cart
• Age verification
• Form response
• Discount
• Error
• Quick buy
• Quick edit
• Custom (default)

| -| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) |

Text input

Visible when overlay preset is "Custom"

| -| Show close button | Displays a close button in the alert | Checkbox (default: false) | -| Enable auto close | Automatically closes the alert after a set duration | Checkbox (default: false) | -| Auto close duration | Time before the alert automatically closes |

1 - 10 s (default: 3)

Visible when enable auto close is true

| +| Setting | Description | Options | +|---------|-------------|---------| +| Overlay preset | Select a preset overlay ID or use a custom one | • Account
• Search
• Menu
• Primary cart
• Alternative cart
• Age verification
• Form response
• Discount
• Error
• Quick buy
• Quick edit
• Custom (default) | +| Overlay ID | Custom identifier for the overlay | Text input

_Visible when overlay preset is "Custom"_ | +| Show close button | Displays a close button in the alert | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text color combination |

• Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Border color | Controls the border color |

• Subtle (default)
• Strong
• None

| +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Color scheme | Controls the color scheme | Color scheme picker

_Visible when type is "Custom" and enable inheritance is disabled_ | +| Color scheme | Controls the background and text color combination | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

_Visible when type is "Base" and enable inheritance is disabled_ | +| Border color | Controls the border color | • Subtle (default)
• Strong
• None

_Visible when type is "Base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | + +### Style + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable auto close | Automatically closes the alert after a set duration | Checkbox (default: false) | +| Auto close duration | Time before the alert automatically closes | 1 – 10 s (default: 3)

_Visible when enable auto close is enabled_ | ### Layout -| Setting | Description | Options | -| ------------------- | ----------------------------------------------- | ---------------------------------- | -| Horizontal position | Position of the alert along the horizontal axis |

• Left
• Right (default)

| -| Vertical position | Position of the alert along the vertical axis |

• Top (default)
• Bottom

| +| Setting | Description | Options | +|---------|-------------|---------| +| Horizontal position | Position of the alert along the horizontal axis | • Left
• Right (default) | +| Vertical position | Position of the alert along the vertical axis | • Top (default)
• Bottom | ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/overlay__drawer.md b/slab/blocks/overlay__drawer.md index 4fe2a53..1bcd9eb 100644 --- a/slab/blocks/overlay__drawer.md +++ b/slab/blocks/overlay__drawer.md @@ -1,50 +1,46 @@ # Overlay drawer -## Overview -A customizable drawer component that displays content in a sliding overlay panel. This component creates an interactive drawer that can be positioned at the bottom, left, or right of the screen with a button to trigger its visibility. +## Overview -## Common use cases +A drawer overlay block that displays content in a sliding panel. Supports configurable positioning, full-height mode, customizable color schemes, and responsive visibility options. -* Use for navigation menus, filters, cart drawers, or any content that should appear on demand -* Consider the best position based on content type (e.g., filters often work well as left/right drawers) -* Ensure drawer content is accessible and navigable by keyboard -* Customize colors and borders to match your theme design -## Compatible blocks +## Common use cases -The following blocks can be nested within this block: +- Display navigation menus, cart drawers, or supplementary content in a sliding panel triggered on demand. -* [Container](layout/container.md) (for drawer content) -* [Container](layout/container.md) (for drawer footer) ## Block settings ### Content -| Setting | Description | Options | -| ----------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| Overlay preset | Select a preset overlay ID or use a custom one |

• Account
• Search
• Menu
• Primary cart
• Alternative cart
• Quick buy
• Quick edit
• Custom (default)

| -| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) |

Text input

Visible when overlay preset is "Custom"

| -| Show close button | Displays a close button in the drawer | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|---------| +| Overlay preset | Select a preset overlay ID or use a custom one | • Account
• Search
• Menu
• Primary cart
• Alternative cart
• Quick buy
• Quick edit
• Custom (default) | +| Overlay ID | Custom identifier for the overlay | Text input

_Visible when overlay preset is "Custom"_ | +| Show close button | Displays a close button in the drawer | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text color combination |

• Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Border color | Controls the border color |

• Subtle (default)
• Strong
• None

| +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Color scheme | Controls the color scheme | Color scheme picker

_Visible when type is "Custom" and enable inheritance is disabled_ | +| Color scheme | Controls the background and text color combination | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

_Visible when type is "Base" and enable inheritance is disabled_ | +| Border color | Controls the border color | • Subtle (default)
• Strong
• None

_Visible when type is "Base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | ### Layout -| Setting | Description | Options | -| ------------------- | ------------------------------------------------ | ---------------------------------------------- | -| Horizontal position | Position of the drawer along the horizontal axis |

• Left
• Center
• Right (default)

| -| Vertical position | Position of the drawer along the vertical axis |

• Top (default)
• Bottom

| -| Enable full height | Makes the drawer extend to full viewport height | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|---------| +| Horizontal position | Position of the drawer along the horizontal axis | • Left
• Center
• Right (default) | +| Vertical position | Position of the drawer along the vertical axis | • Top (default)
• Bottom | +| Enable full height | Makes the drawer extend to full viewport height | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/overlay__popup.md b/slab/blocks/overlay__popup.md index 70688d5..319d0b0 100644 --- a/slab/blocks/overlay__popup.md +++ b/slab/blocks/overlay__popup.md @@ -1,43 +1,39 @@ # Overlay popup -## Overview -A customizable popup modal component that displays content in an overlay triggered by a button. Provides smooth animations, responsive behavior, and extensive styling options through block settings. +## Overview -## Common use cases +A popup overlay block that displays content in a centered modal. Supports an optional full-viewport background, customizable color schemes, and responsive visibility options. -* Use semantic HTML within popup content for better accessibility -* Keep popup content concise to avoid overwhelming users -* Consider mobile viewports when designing popup content -* Test keyboard navigation and screen reader compatibility -* Use appropriate color contrast for overlay background -## Compatible blocks +## Common use cases -The following blocks can be nested within this block: +- Display focused content such as age verification, account forms, or promotional messages in a centered popup modal. -* [Container](layout/container.md) (for popup content) ## Block settings ### Content -| Setting | Description | Options | -| ---------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Overlay preset | Select a preset overlay ID or use a custom one |

• Account
• Search
• Menu
• Primary cart
• Alternative cart
• Age verification
• Quick buy
• Quick edit
• Custom (default)

| -| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) |

Text input

Visible when overlay preset is "Custom"

| -| Show close button | Displays a close button in the popup | Checkbox (default: false) | -| Enable full background | Makes the popup background cover the entire viewport | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|---------| +| Overlay preset | Select a preset overlay ID or use a custom one | • Account
• Search
• Menu
• Primary cart
• Alternative cart
• Age verification
• Quick buy
• Quick edit
• Custom (default) | +| Overlay ID | Custom identifier for the overlay | Text input

_Visible when overlay preset is "Custom"_ | +| Show close button | Displays a close button in the popup | Checkbox (default: false) | +| Enable full background | Makes the popup background cover the entire viewport | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text color combination |

• Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Border color | Controls the border color |

• Subtle (default)
• Strong
• None

| +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Color scheme | Controls the color scheme | Color scheme picker

_Visible when type is "Custom" and enable inheritance is disabled_ | +| Color scheme | Controls the background and text color combination | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

_Visible when type is "Base" and enable inheritance is disabled_ | +| Border color | Controls the border color | • Subtle (default)
• Strong
• None

_Visible when type is "Base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/overlay__sidebar.md b/slab/blocks/overlay__sidebar.md index 06833ec..38741b7 100644 --- a/slab/blocks/overlay__sidebar.md +++ b/slab/blocks/overlay__sidebar.md @@ -1,48 +1,44 @@ # Overlay sidebar -## Overview -A configurable sidebar overlay component that can slide in from either the left or right side of the screen. Creates a responsive sidebar drawer with customizable styling, positioning, and content. +## Overview -## Common use cases +A sidebar overlay block that slides in from the left or right side of the screen. Supports customizable color schemes, positioning, and responsive visibility options. -* Provide a unique overlay\_id for each sidebar instance -* Use the visibility settings to control display on different device sizes -* Consider user experience when configuring close button visibility -* Create navigation menus, filters, or supplementary content panels -## Compatible blocks +## Common use cases -The following blocks can be nested within this block: +- Display navigation menus, filters, or supplementary content panels in a sidebar that slides in from the side of the screen. -* [Container](layout/container.md) (for sidebar content) -* [Container](layout/container.md) (for sidebar footer) ## Block settings ### Content -| Setting | Description | Options | -| ----------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| Overlay preset | Select a preset overlay ID or use a custom one |

• Account
• Search
• Menu
• Primary cart
• Alternative cart
• Quick buy
• Quick edit
• Custom (default)

| -| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) |

Text input

Visible when overlay preset is "Custom"

| -| Show close button | Displays a close button in the sidebar | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|---------| +| Overlay preset | Select a preset overlay ID or use a custom one | • Account
• Search
• Menu
• Primary cart
• Alternative cart
• Quick buy
• Quick edit
• Custom (default) | +| Overlay ID | Custom identifier for the overlay | Text input

_Visible when overlay preset is "Custom"_ | +| Show close button | Displays a close button in the sidebar | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text color combination |

• Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Border color | Controls the border color |

• Subtle (default)
• Strong
• None

| +| Setting | Description | Options | +|---------|-------------|---------| +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Color scheme | Controls the color scheme | Color scheme picker

_Visible when type is "Custom" and enable inheritance is disabled_ | +| Color scheme | Controls the background and text color combination | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

_Visible when type is "Base" and enable inheritance is disabled_ | +| Border color | Controls the border color | • Subtle (default)
• Strong
• None

_Visible when type is "Base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: false) | ### Layout -| Setting | Description | Options | -| ------------------- | ------------------------------------------------- | ---------------------------------- | -| Horizontal position | Position of the sidebar along the horizontal axis |

• Left
• Right (default)

| +| Setting | Description | Options | +|---------|-------------|---------| +| Horizontal position | Position of the sidebar along the horizontal axis | • Left
• Right (default) | ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/password-form.md b/slab/blocks/password-form.md index 696f8a4..ceb7f03 100644 --- a/slab/blocks/password-form.md +++ b/slab/blocks/password-form.md @@ -3,24 +3,21 @@ ## Overview -A customizable password form block that allows customers to enter a password to access a store. Features responsive layout options, flexible styling, and customizable success messages. Supports both stacked and inline layouts with error handling and success message display. +A customizable password form block that allows customers to enter a password to access a store. Features responsive layout options, flexible styling, and customizable success messages. ## Common use cases -- Protect store access with password authentication -- Use stacked layout for mobile-first designs -- Choose button colors that contrast well with your theme -- Consider using padding options when placed within other content blocks -- Test the form across different screen sizes to ensure optimal layout +* Add a password entry form for storefront password protection +* Create password-gated access to your store during development ## Compatible blocks The following blocks can be nested within this block: -- [Input field](form-input.md) -- [Button](button.md) +* [Input field](input-field.md) +* [Button](button.md) ## Block settings @@ -28,28 +25,25 @@ The following blocks can be nested within this block: ### Content | Setting | Description | Options | -|---------|-------------|---------| -| Success message | Custom message shown after successful password entry | Rich text input | - +|---------|-------------|----------| +| Success message | Message shown after successful submission | Rich text input | ### Spacing | Setting | Description | Options | -|---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the form | Checkbox (default: false) | -| Enable top padding | Adds top padding around the form | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the form | Checkbox (default: false) | - +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Layout | Setting | Description | Options | -|---------|-------------|---------| -| Layout | Form layout style | • Stacked
• Inline (default) | - +|---------|-------------|----------| +| Layout | Controls the layout direction |

• Stacked
• Inline (default)

| ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/payment-icons.md b/slab/blocks/payment-icons.md index 74999bc..70ed672 100644 --- a/slab/blocks/payment-icons.md +++ b/slab/blocks/payment-icons.md @@ -3,16 +3,12 @@ ## Overview -A customizable block that displays payment method icons supported by the store. Shows all enabled payment types from the shop's settings in either a horizontal or vertical layout with configurable spacing and visibility options. +A block that displays payment method icons supported by the store. Shows all enabled payment types in either a horizontal or vertical layout with configurable spacing and visibility options. ## Common use cases -- Best used in footer sections to display accepted payment methods -- Consider using inline layout for wider viewports and stacked for narrow containers -- Adjust gap size based on the payment icons' visual density -- Use padding options when the icons need to be offset from surrounding content -- Set appropriate visibility options if different layouts are needed for mobile/desktop views +- Display accepted payment methods in footer sections with configurable layout and spacing. ## Block settings @@ -22,20 +18,18 @@ A customizable block that displays payment method icons supported by the store. | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the icons | Checkbox (default: false) | -| Enable top padding | Adds top padding around the icons | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the icons | Checkbox (default: false) | -| Gap size | Spacing between payment icons | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| Enable top padding | Adds top padding above the icons | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the icons | Checkbox (default: false) | +| Gap size | Spacing between payment icons | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Layout | Controls the icon layout direction | • Stacked
• Inline (default) | - +| Layout | Controls the icon layout direction | • Stacked
• Inline (default) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/picker-audio.md b/slab/blocks/picker-audio.md index cac3d24..564ec35 100644 --- a/slab/blocks/picker-audio.md +++ b/slab/blocks/picker-audio.md @@ -3,15 +3,12 @@ ## Overview -A form block component that provides audio enable/disable radio button controls with customizable visibility and padding options. +A block that provides an audio toggle button allowing users to enable or disable audio. Supports customizable button color, size, alignment, and responsive visibility options. ## Common use cases -- Ensure translations are set up for 'actions.enable_audio' and 'actions.disable_audio' -- Consider adding ARIA labels for better accessibility -- Allow users to toggle audio on/off for video or audio content -- Display audio control in headers or media sections +- Allow users to toggle audio on or off for video or media content in headers or media sections. ## Block settings @@ -21,33 +18,31 @@ A form block component that provides audio enable/disable radio button controls | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the control | Checkbox (default: false) | -| Enable top padding | Adds top padding around the control | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the control | Checkbox (default: false) | - +| Enable top padding | Adds top padding above the control | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the control | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Button color | Controls the button color scheme | • Primary
• Secondary
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Link (default)
• Inverted link | - +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Button color | Controls the button color scheme | Color scheme picker

_Visible when type is "Custom"_ | +| Button color | Controls the button color scheme | • Plain
• Main
• Blur
• Outline
• Inverted outline
• Transparent (default)
• Inverted transparent

_Visible when type is "Base"_ | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Button size | Controls the button size | • Extra small
• Small (default)
• Standard
• Large | - +| Button size | Controls the button size | • Extra small
• Small (default)
• Standard
• Large | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Full
• Right | - +| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Full
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/picker-country.md b/slab/blocks/picker-country.md index 007db45..d7eecb7 100644 --- a/slab/blocks/picker-country.md +++ b/slab/blocks/picker-country.md @@ -3,15 +3,12 @@ ## Overview -A country/currency selector block that displays a list of available countries with their respective currencies. When a country is selected, it updates the store's localization settings. The block is responsive and can be configured to show/hide on different device sizes. +A country and currency selector block that displays available countries with their currencies as radio buttons. When a country is selected, the store's localization settings are updated. ## Common use cases -- Ensure flag icons are properly cached for performance -- Consider adding loading states for better UX during country switches -- Test across different viewport sizes to ensure proper visibility based on settings -- Display country selection in headers, footers, or checkout pages +- Display a country and currency selector in header, footer, or overlay sections for multi-region stores. ## Block settings @@ -22,9 +19,8 @@ A country/currency selector block that displays a list of available countries wi |---------|-------------|---------| | Enable internal padding | Adds internal padding to the country list | Checkbox (default: false) | - ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/picker-language.md b/slab/blocks/picker-language.md index 6eb3def..473a3ac 100644 --- a/slab/blocks/picker-language.md +++ b/slab/blocks/picker-language.md @@ -3,15 +3,12 @@ ## Overview -A language selection form component that displays available languages as radio buttons. Enables users to switch between different language options on the store. Only displays when multiple languages are configured and language selection is enabled in theme settings. +A language selector block that displays available languages as radio buttons. Enables users to switch between configured language options on the store. ## Common use cases -- Ensure proper translations are set up for all supported languages -- Consider testing keyboard navigation and screen reader compatibility -- Review language-specific layout considerations for longer language names -- Display language selection in headers, footers, or navigation menus +- Display a language selector in header, footer, or overlay sections for multilingual stores. ## Block settings @@ -22,9 +19,8 @@ A language selection form component that displays available languages as radio b |---------|-------------|---------| | Enable internal padding | Adds internal padding to the language list | Checkbox (default: false) | - ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-badges.md b/slab/blocks/product-badges.md index ed46432..6c7cb32 100644 --- a/slab/blocks/product-badges.md +++ b/slab/blocks/product-badges.md @@ -3,18 +3,12 @@ ## Overview -A customizable product badges block that displays various types of informational badges for products. The block can show sold out status, savings information, low stock alerts, custom product tags, and metafield-based badges. Badges can be displayed as plain text or styled badge elements with extensive customization options for positioning, colors, and layout. +A product badges block that displays various informational badges such as sold out status, savings, low stock alerts, custom tag badges, and metafield badges. Supports text or styled badge display with configurable colors, positioning, and overlay mode. ## Common use cases -- Display sold out badges for unavailable products -- Show savings badges with percentage or amount saved -- Display low stock alerts when inventory is below threshold -- Use product tags prefixed with "badge_" to create custom badges -- Configure metafield badges for custom product attributes like "Featured", "New", or "Limited Edition" -- Use overlay positioning for product images to create eye-catching promotional badges -- Set appropriate stock thresholds based on your inventory management needs +- Display sold out, savings, low stock, or custom promotional badges on product cards or product pages. ## Block settings @@ -25,50 +19,48 @@ A customizable product badges block that displays various types of informational |---------|-------------|---------| | Product | Select the product to display badges for | Product picker | | Show sold out badge | Displays a badge when the product is sold out | Checkbox (default: false) | -| Savings badge | Type of savings badge to display | • None
• Percent (default)
• Amount | -| Stock threshold | Minimum stock level to trigger low stock badge (0 = never show) | Number input | -| Metafield badges | Comma-separated list of metafield namespace.key pairs (e.g., "custom.badge,custom.featured") | Text input | - +| Savings badge | Type of savings badge to display | • None
• Percent (default)
• Amount | +| Stock threshold | Minimum stock level to trigger low stock badge | Number input | +| Metafield badges | Comma-separated list of metafield namespace.key pairs | Text input | ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the badges | Checkbox (default: false) | -| Enable top padding | Adds top padding around the badges | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the badges | Checkbox (default: false) | - +| Enable top padding | Adds top padding above the badges | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the badges | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Color scheme | Controls the background color scheme for badges | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

Visible when display type is badge | -| Color border | Controls the border color for badges | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when display type is badge | -| Color text | Controls the text color | • Default (default)
• Alternative
• Primary
• Secondary
• Tertiary
• Neutral
• Shade | +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Color scheme | Controls the color scheme | Color scheme picker

_Visible when type is "Custom" and enable inheritance is disabled_ | +| Background | Controls the background color for badges | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

_Visible when display type is "Badge", type is "Base", and enable inheritance is disabled_ | +| Border color | Controls the border color for badges | • None
• Subtle (default)
• Strong
• Body foreground

_Visible when display type is "Badge", type is "Base", and enable inheritance is disabled_ | +| Text color | Controls the text color | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

_Visible when type is "Base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: true) | | Enable color difference | Uses mix-blend-difference for better visibility on images | Checkbox (default: false) | - ### Style | Setting | Description | Options | |---------|-------------|---------| -| Display type | How badges are displayed | • Text
• Badge (default) | -| Font family | Font family for badge text | • Standard (default)
• Heading
• Subheading
• Accent | -| Font size | Font size for badge text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +| Display type | How badges are displayed | • Text
• Badge (default) | +| Font family | Font family for badge text | • Standard (default)
• Heading
• Subheading
• Accent

_Visible when display type is "Text"_ | +| Font size | Font size for badge text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

_Visible when display type is "Text"_ | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment of the badges | • Left (default)
• Center
• Right | -| Vertical alignment | Controls vertical alignment when overlay is enabled | • Top (default)
• Bottom

Visible when enable overlay is true | +| Horizontal alignment | Controls horizontal alignment of the badges | • Left (default)
• Center
• Right | +| Vertical alignment | Controls vertical alignment when overlay is enabled | • Top (default)
• Bottom

_Visible when enable overlay is enabled_ | | Enable overlay | Positions badges as an overlay on product images | Checkbox (default: false) | - ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-bundles.md b/slab/blocks/product-bundles.md index ee4240f..1fd6af7 100644 --- a/slab/blocks/product-bundles.md +++ b/slab/blocks/product-bundles.md @@ -3,16 +3,12 @@ ## Overview -A product bundle block that lists bundle items from a metafield and allows adding all selected variants to cart at once. Displays bundle products using the c__bundle-item snippet and integrates with the theme's cart functionality to add multiple line items simultaneously. +A product bundle block that lists bundle items from a product metafield and allows adding all selected variants to cart at once. Supports configurable button colors, spacing, and responsive visibility options. ## Common use cases -- Configure product bundles using the custom.product_bundle metafield (list of products) -- Use gap size settings to control spacing between bundle items based on your design needs -- Configure button colors to match your theme's design system -- Set appropriate padding based on the container context where the bundle block is displayed -- Test bundle functionality with products that have variants to ensure proper selection flow +- Display a product bundle with individually selectable variants and an add-all-to-cart button. ## Block settings @@ -23,27 +19,27 @@ A product bundle block that lists bundle items from a metafield and allows addin |---------|-------------|---------| | Product | Select the product to display bundle for | Product picker | - ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the bundle | Checkbox (default: false) | -| Enable top padding | Adds top padding around the bundle | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the bundle | Checkbox (default: false) | -| Gap size | Controls spacing between bundle items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| Enable top padding | Adds top padding above the bundle | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the bundle | Checkbox (default: false) | +| Gap size | Controls spacing between bundle items | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Disabled button color | Color scheme for the disabled "Choose Options" button | • Primary
• Secondary
• Tertiary
• Neutral
• Plain (default)
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | -| Main button color | Color scheme for the active "Add to Cart" button | • Primary (default)
• Secondary
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | - +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Default button color | Color scheme for the active add to cart button | Color scheme picker

_Visible when type is "Custom"_ | +| Default button color | Color scheme for the active add to cart button | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | +| Disabled button color | Color scheme for the disabled choose options button | Color scheme picker

_Visible when type is "Custom"_ | +| Disabled button color | Color scheme for the disabled choose options button | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-buy.md b/slab/blocks/product-buy.md index 907b73f..86a0d3a 100644 --- a/slab/blocks/product-buy.md +++ b/slab/blocks/product-buy.md @@ -3,17 +3,12 @@ ## Overview -A comprehensive product purchase form block that handles variant selection, quantity input, and cart actions. The block dynamically displays different button states based on product availability and option selection, including "Choose Options", "Sold Out", "Unavailable", and "Add to Cart" states. Supports optional quantity input, dynamic checkout buttons, and real-time price display. +A product purchase form block that handles variant selection, quantity input, and cart actions. Displays different button states based on product availability and option selection, and supports dynamic checkout buttons and real-time price display. ## Common use cases -- Ensure all product options are configured before adding this block -- Use inline layout only when horizontal space is sufficient for both quantity and button -- Enable quantity input for products that customers typically buy in bulk -- Configure appropriate button colors to match your theme's design system -- Test with products that have multiple variants to ensure proper option selection flow -- Consider enabling dynamic checkout for improved conversion rates +- Add a product purchase form with add-to-cart, quantity input, and dynamic checkout buttons to a product page. ## Block settings @@ -23,51 +18,50 @@ A comprehensive product purchase form block that handles variant selection, quan | Setting | Description | Options | |---------|-------------|---------| | Product | Select the product to display buy buttons for | Product picker | -| Dynamic label | Custom label for the add to cart button (e.g., "Pre-order") | Rich text input

Visible when enable dynamic label is true | +| Dynamic label | Custom label for the add to cart button | Rich text input

_Visible when enable dynamic label is enabled_ | | Enable dynamic label | Replaces "Add to cart" with custom label text | Checkbox (default: false) | | Enable quantity input | Displays a quantity selector input field | Checkbox (default: false) | | Enable dynamic checkout | Displays dynamic checkout buttons (Shop Pay, Apple Pay, etc.) | Checkbox (default: true) | | Show price | Displays the product price on the add to cart button | Checkbox (default: true) | | Show gift card form | Displays form fields for gift card recipient information | Checkbox (default: false) | - ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the form | Checkbox (default: false) | -| Enable top padding | Adds top padding around the form | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the form | Checkbox (default: false) | -| Gap size | Spacing between form elements | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| Enable top padding | Adds top padding above the form | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the form | Checkbox (default: false) | +| Gap size | Spacing between form elements | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Main button color | Color scheme for the add to cart button | • Primary (default)
• Secondary
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | -| Disabled button color | Color scheme for disabled/placeholder buttons | • Primary
• Secondary
• Tertiary
• Neutral
• Plain (default)
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | -| Dynamic checkout button color | Color scheme for dynamic checkout buttons | • Primary
• Secondary
• Tertiary
• Neutral
• Plain (default) | - +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Default button color | Color scheme for the add to cart button | Color scheme picker

_Visible when type is "Custom"_ | +| Default button color | Color scheme for the add to cart button | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | +| Disabled button color | Color scheme for disabled buttons | Color scheme picker

_Visible when type is "Custom"_ | +| Disabled button color | Color scheme for disabled buttons | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | +| Dynamic checkout button color | Color scheme for dynamic checkout buttons | Color scheme picker

_Visible when type is "Custom"_ | +| Dynamic checkout button color | Color scheme for dynamic checkout buttons | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Button size | Controls the size of buttons | • Extra small
• Small
• Standard (default)
• Large | -| Quantity input | Style of the quantity input field | • Default (default)
• Minimal

Visible when enable quantity input is true | - +| Button size | Controls the size of buttons | • Extra small
• Small
• Standard (default)
• Large | +| Quantity input | Style of the quantity input field | • Default (default)
• Minimal

_Visible when enable quantity input is enabled_ | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Layout | Controls the layout of quantity and button | • Stacked (default)
• Inline | +| Layout | Controls the layout of quantity and button | • Stacked (default)
• Inline | | Enable full width | Makes buttons span the full width of the container | Checkbox (default: false) | - ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-card.md b/slab/blocks/product-card.md index d53dacf..7533be4 100644 --- a/slab/blocks/product-card.md +++ b/slab/blocks/product-card.md @@ -1,16 +1,18 @@ # Product card + ## Overview A flexible product card block for displaying a single product and its associated content blocks. This block is designed to be used within grid or slider layouts and supports a wide range of content types, including rich text, images, videos, icons, product price, badges, swatches, and media. The block offers extensive customization options for spacing, color scheme, border style, layout, and responsive visibility, making it suitable for various merchandising and design needs. + ## Common use cases -* Use within grid or slider sections to create product galleries or featured product displays -* Configure the content blocks to highlight key product information, such as price, badges, and media -* Adjust spacing and color settings to match your theme's design language and improve visual hierarchy -* Use the visibility settings to tailor the product card display for different devices and layouts -* Leverage scroll animations to add engaging motion effects to product cards +* Display a single product with customizable content blocks like price, media, and swatches +* Use within grid or slider sections to create product galleries +* Configure content blocks to highlight key product information +* Use visibility settings to tailor the product card for different devices + ## Compatible blocks @@ -25,49 +27,54 @@ The following blocks can be nested within this block: * [Container](layout/container.md) * [Button](button.md) * [Video](video.md) -* [Quick buy](product-quick-buy.md) +* [Quick buy button](product-quick-buy.md) * [Price](product-price.md) -* [Inventory](product-inventory.md) +* [Inventory availability](product-inventory.md) * [Badges](product-badges.md) * [Swatches](product-swatches.md) * [Product media](product-media.md) * [Slider](layout__slider.md) -* [Grid](layout__grid.md) -* [Flex](layout__flex.md) +* [Default grid](layout__grid.md) +* [Flex grid](layout__flex.md) + ## Block settings ### Content -| Setting | Description | Options | -| ------- | ----------------------------- | -------------- | +| Setting | Description | Options | +|---------|-------------|----------| | Product | Select the product to display | Product picker | ### Spacing -| Setting | Description | Options | -| ------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------- | -| Enable horizontal padding | Adds horizontal padding around the product card | Checkbox (default: false) | -| Enable vertical padding | Adds vertical padding around the product card | Checkbox (default: false) | -| Gap size | Spacing between content blocks within the card |

• None
• Default (default)
• XS
• SM
• MD
• LG
• XL

| +| Setting | Description | Options | +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable vertical padding | Adds vertical padding | Checkbox (default: false) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| ### Color -| Setting | Description | Options | -| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Color scheme | Controls the background and text colors |

• Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent

| -| Color border | Controls the border color |

• Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

| +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when color_type is base and enable_inheritance is false and border_position is not

| +| Enable inheritance | Inherit colors from parent block | Checkbox (default: false) | ### Style -| Setting | Description | Options | -| ----------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All

| -| Show underline on hover | Displays an underline effect when hovering over the card | Checkbox (default: false) | +| Setting | Description | Options | +|---------|-------------|----------| +| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All

| +| Radius | Controls the border radius |

• None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full

| +| Show underline on hover | Displays an underline effect when hovering | Checkbox (default: false) | ### Display -| Setting | Description | Options | -| ---------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| -| Scroll animation | Animation effect when the card scrolls into view |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| +| Scroll animation | Controls how the block appears when scrolled into view. |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

| diff --git a/slab/blocks/product-inventory.md b/slab/blocks/product-inventory.md index 7ad7da7..437e30e 100644 --- a/slab/blocks/product-inventory.md +++ b/slab/blocks/product-inventory.md @@ -3,14 +3,12 @@ ## Overview -This block displays the inventory level of a product and provides visual feedback when the inventory falls below a specified inventory_threshold. It is designed to alert users when stock is low, using customizable settings for appearance and behavior. +A product inventory block that displays stock level information and provides visual feedback when inventory falls below a configurable threshold. Designed to alert customers when stock is low, using customizable appearance settings. ## Common use cases -- Use this block to alert customers when product inventory is low, encouraging them to purchase before stock runs out -- Ensure the product and inventory_threshold settings are configured correctly to provide accurate inventory alerts -- Display stock availability information on product pages and product cards +- Display low stock alerts on product pages to encourage customers to purchase before stock runs out. ## Block settings @@ -22,40 +20,38 @@ This block displays the inventory level of a product and provides visual feedbac | Product | Select the product to display inventory for | Product picker | | Inventory threshold | Minimum stock level before showing inventory alert | Number input (default: 5) | - ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the inventory display | Checkbox (default: false) | -| Enable top padding | Adds top padding around the inventory display | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the inventory display | Checkbox (default: false) | - +| Enable top padding | Adds top padding above the inventory display | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the inventory display | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +| Type | Determines color configuration mode | • Custom
• Base (default)

_Visible when enable inheritance is disabled_ | +| Text color | Controls the text color | Color scheme picker

_Visible when type is "Custom" and enable inheritance is disabled_ | +| Text color | Controls the text color | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

_Visible when type is "Base" and enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for the inventory text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of the inventory text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +| Font family | Controls the font family used for the inventory text | • Standard (default)
• Heading
• Subheading
• Accent

_Visible when font size contains "type--"_ | +| Font size | Controls the font size of the inventory text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +| Horizontal alignment | Controls horizontal alignment of the inventory text | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-media.md b/slab/blocks/product-media.md index 4ce4ec7..8079f3d 100644 --- a/slab/blocks/product-media.md +++ b/slab/blocks/product-media.md @@ -3,17 +3,12 @@ ## Overview -A versatile product media block that renders product images or videos with extensive customization options. Features include hover effects with secondary media, aspect ratio control, flexible padding and spacing, comprehensive color schemes, and responsive visibility settings. The block automatically detects and handles both image and video media types from the product's media collection. +A product media block that renders product images or videos with hover effects, aspect ratio control, and flexible styling. Automatically detects and handles both image and video media types from the product's media collection. ## Common use cases -- Display product images on product pages and product cards -- Show product videos with autoplay and loop functionality -- Enable hover effects to show secondary product images -- Control aspect ratios for consistent product image display -- Use object-fit settings to control how images fill their containers -- Configure appropriate padding based on the block's container context +- Display product images with optional secondary image hover effects on product pages and product cards. ## Block settings @@ -25,36 +20,35 @@ A versatile product media block that renders product images or videos with exten | Product | Select the product to display media for | Product picker | | Show second image on hover | Displays the second product image when hovering over the first | Checkbox (default: true) | - ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the media | Checkbox (default: false) | -| Enable top padding | Adds top padding around the media | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the media | Checkbox (default: false) | - +| Enable top padding | Adds top padding above the media | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the media | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Color scheme | Controls the background color scheme | • Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None

Visible when border position is not blank | - +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Color scheme | Controls the color scheme | Color scheme picker

_Visible when type is "Custom"_ | +| Background | Controls the background color | • Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

_Visible when type is "Base"_ | +| Border color | Controls the border color | • None
• Subtle (default)
• Strong
• Body foreground

_Visible when border position is not "None" and type is "Base"_ | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | +| Border position | Controls where borders appear | • None (default)
• Top
• Bottom
• Left
• Right
• Top and bottom
• Left and right
• All | +| Radius | Controls the border radius of the media | • None
• Default (default)
• SM
• MD
• LG
• XL
• 2XL
• Full | | Enable aspect ratio | Forces the media to maintain a specific aspect ratio | Checkbox (default: false) | -| Show entire image | Uses object-contain instead of object-cover to show full image | Checkbox (default: true)

Visible when enable aspect ratio is true | -| Aspect ratio | The aspect ratio to maintain | • Square
• Landscape
• Portrait
• None

Visible when enable aspect ratio is true | - +| Show entire image | Uses object-contain instead of object-cover to show full image | Checkbox (default: true)

_Visible when enable aspect ratio is enabled_ | +| Aspect ratio | The aspect ratio to maintain | • Square
• Landscape
• Portrait
• None

_Visible when enable aspect ratio is enabled_ | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-options.md b/slab/blocks/product-options.md index 0122e4a..22201a5 100644 --- a/slab/blocks/product-options.md +++ b/slab/blocks/product-options.md @@ -3,19 +3,12 @@ ## Overview -A comprehensive product variant selection block that provides flexible display options for product options including colors, sizes, and other variants. The block supports both button-based and dropdown-based selection interfaces, with advanced features like swatches, tooltips, and unavailability indicators. It integrates with Alpine.js for interactive behavior and handles complex variant logic including availability checking and option state management. +A product variant selection block that provides flexible display options for product options including colors, sizes, and other variants. Supports both button and dropdown selection interfaces, with advanced features like swatches, tooltips, grid layout, and unavailability indicators. ## Common use cases -- Use button selection for better user experience when you have few variant options -- Enable swatches for color options to provide visual selection feedback -- Consider using unavailable indication to guide customers toward available variants -- Use grid layout when displaying many options to maintain organized appearance -- Configure appropriate gap sizes based on your design system and available space -- Enable tooltips for swatch-only displays to show option names on hover -- Test responsive behavior to ensure smooth transitions between desktop dropdowns and mobile drawers -- Ensure proper styling of disabled states when using unavailability indicators +- Display product variant options with button or dropdown selection on product pages. ## Block settings @@ -25,64 +18,64 @@ A comprehensive product variant selection block that provides flexible display o | Setting | Description | Options | |---------|-------------|---------| | Product | Select the product to display options for | Product picker | -| Variant selection | Controls how non-swatch variants are displayed | • Buttons (default)
• Dropdowns | -| Unavailable indication | Controls how unavailable variants are indicated | • None
• Empty (default)
• Selected | +| Variant selection | Controls how non-swatch variants are displayed | • Buttons (default)
• Dropdowns | +| Unavailable indication | Controls how unavailable variants are indicated | • None
• Empty (default)
• Selected | | Show labels | Displays labels for each option | Checkbox (default: true) | - +| Show single variant options | Displays options even when only one variant exists | Checkbox (default: true) | ### Swatches | Setting | Description | Options | |---------|-------------|---------| -| Swatch selection | Controls how swatch options (colors) are displayed | • Buttons (default)
• Dropdowns | +| Swatch selection | Controls how swatch options are displayed | • Buttons (default)
• Dropdowns | | Show swatch | Displays color swatches for color options | Checkbox (default: true) | -| Show tooltip | Displays tooltips showing option names on swatch hover | Checkbox (default: true)

Visible when swatch selection is "buttons" | -| Show labels | Displays text labels with swatches | Checkbox (default: false) | -| Layout | Controls the layout of swatch and label | • Stacked
• Inline (default)

Visible when show labels is true | -| Size | Size of the swatch indicators | 8 - 120 px (default: 16)

Visible when show swatch is true | -| Radius | Border radius for swatches | • None
• Default
• SM
• MD
• LG
• XL
• 2XL
• Full (default)

Visible when show swatch is true | - +| Show tooltip | Displays tooltips showing option names on swatch hover | Checkbox (default: true)

_Visible when swatch selection is "Buttons"_ | +| Show labels | Displays text labels alongside swatches | Checkbox (default: false) | +| Layout | Controls the layout of swatch and label | • Stacked
• Inline (default)

_Visible when show swatch labels is enabled_ | +| Size | Size of the swatch indicators | Range: 8 - 120 px (default: 16)

_Visible when show swatch is enabled_ | +| Radius | Border radius for swatches | • None
• Default
• SM
• MD
• LG
• XL
• 2XL
• Full (default)

_Visible when show swatch is enabled_ | ### Spacing | Setting | Description | Options | |---------|-------------|---------| | Enable horizontal padding | Adds horizontal padding around the options | Checkbox (default: false) | -| Enable top padding | Adds top padding around the options | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the options | Checkbox (default: false) | -| Gap size | Spacing between option elements | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| Enable top padding | Adds top padding above the options | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding below the options | Checkbox (default: false) | +| Gap size | Spacing between option elements | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | -| Button color | Color scheme for option buttons | • Primary
• Secondary
• Tertiary
• Neutral
• Plain (default)
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | -| Button color selected | Color scheme for selected option buttons | • Primary
• Secondary
• Tertiary
• Neutral
• Plain
• Outline (default) | - +| Type | Determines color configuration mode | • Custom
• Base (default) | +| Default button color | Color scheme for default option buttons | Color scheme picker

_Visible when type is "Custom"_ | +| Selected button color | Color scheme for selected option buttons | Color scheme picker

_Visible when type is "Custom"_ | +| Default button color | Color scheme for default option buttons | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | +| Selected button color | Color scheme for selected option buttons | • Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

_Visible when type is "Base"_ | +| Text color | Controls the text color for option labels | • Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

_Visible when enable inheritance is disabled_ | +| Enable inheritance | Inherits color settings from the parent block | Checkbox (default: true) | +| Enable selected outline | Adds an outline to the selected option button | Checkbox (default: false) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for option labels | • Standard
• Heading
• Subheading
• Accent

Visible when show labels is true | -| Font size | Controls the font size of option labels | • Smaller
• Small
• Default
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Visible when show labels is true | -| Button size | Controls the size of option buttons | • Extra small
• Small (default)
• Standard
• Large | - +| Font family | Controls the font family used for option labels | • Standard (default)
• Heading
• Subheading
• Accent

_Visible when show labels is enabled_ | +| Font size | Controls the font size of option labels | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

_Visible when show labels is enabled_ | +| Button size | Controls the size of option buttons | • Extra small
• Small (default)
• Standard
• Large | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | +| Horizontal alignment | Controls horizontal alignment of the options | • Left (default)
• Center
• Right | | Enable grid layout | Uses a grid layout instead of flex wrap | Checkbox (default: false) | -| Row desktop | Number of columns in grid on desktop | 1 - 12 (default: 4)

Visible when enable grid layout is true | -| Row mobile | Number of columns in grid on mobile | 1 - 3 (default: 2)

Visible when enable grid layout is true | - +| Row desktop | Number of columns in grid on desktop | Range: 1 - 12 (default: 4)

_Visible when enable grid layout is enabled_ | +| Row mobile | Number of columns in grid on mobile | Range: 1 - 3 (default: 2)

_Visible when enable grid layout is enabled_ | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | diff --git a/slab/blocks/product-pickup.md b/slab/blocks/product-pickup.md index 6e380bf..622ccbe 100644 --- a/slab/blocks/product-pickup.md +++ b/slab/blocks/product-pickup.md @@ -3,16 +3,14 @@ ## Overview -Displays local pickup availability for the selected variant with store location details. Shows availability status, pickup times, and store addresses. Opens a drawer overlay when clicked to display detailed information about all available pickup locations. Content updates dynamically when variant selection changes. +A block that displays product pickup availability information, showing whether a product is available for in-store pickup. Supports customizable spacing, color schemes, and responsive visibility controls. ## Common use cases -- Display pickup availability on product pages for stores with local pickup enabled -- Configure internal padding for better visual spacing within the pickup button -- Use appropriate color schemes and borders to match your theme design -- Set visibility options based on whether pickup is primarily a mobile or desktop feature -- Integrate with product variant selection to show real-time pickup availability +* Display pickup availability status on product pages to inform customers about in-store pickup options +* Configure internal padding for better visual spacing within the pickup button +* Use color schemes and borders to match your theme design ## Block settings @@ -21,29 +19,29 @@ Displays local pickup availability for the selected variant with store location | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display pickup availability for | Product picker | - +| Product | Controls the product | Product picker | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable internal padding | Adds internal padding to the pickup button | Checkbox (default: true) | -| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | -| Enable top padding | Adds top padding around the block | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | - +| Enable internal padding | Adds internal padding to the content | Checkbox (default: true) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Color scheme | Controls the background and text colors | • Body (default)
• Neutral
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | -| Color border | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Scheme | Controls the scheme |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Scheme | Controls the scheme |

• Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color type is base and enable inheritance is false

| +| Border | Controls the border |

• Body
• Subtle (default)
• Strong
• None

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/product-price.md b/slab/blocks/product-price.md index ea05cfe..cca4684 100644 --- a/slab/blocks/product-price.md +++ b/slab/blocks/product-price.md @@ -3,17 +3,14 @@ ## Overview -A comprehensive product price display block that renders pricing information for products including regular prices, sale prices, price ranges, and unit pricing. Automatically handles product variants by using selected_or_first_available_variant and displays sale pricing with strikethrough compare-at prices when available. Unit pricing appears below main price when available on the selected variant. +A customizable product price block that displays the product price with optional price range formatting for both regular and sale prices. Supports text styling, alignment, color schemes, and responsive visibility controls. ## Common use cases -- Display product pricing on product pages and product cards -- Show price ranges for products with multiple variants -- Display sale prices with strikethrough compare-at prices -- Show unit pricing for products sold by weight or volume -- Configure appropriate font sizes based on context (smaller for cards, larger for product pages) -- Use alignment settings that match your overall product layout design +* Display product prices with customizable formatting and styling +* Show price ranges or starting prices for products with multiple variants +* Configure sale price display to show ranges or starting prices ## Block settings @@ -22,44 +19,42 @@ A comprehensive product price display block that renders pricing information for | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display pricing for | Product picker | -| Price range | How to display prices for products with multiple variants | • Range (default)
• Starting price | -| Sale price range | How to display sale prices for products with multiple variants | • Range (default)
• Starting price | - +| Product | Controls the product | Product picker | +| Price range | Controls the price range | • Show price range (default)
• Show starting price | +| Sale price range | Controls the sale price range | • Show range (default)
• Show starting price | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the price | Checkbox (default: false) | -| Enable top padding | Adds top padding around the price | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the price | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Color text | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Scheme | Controls the scheme |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Text color | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Font family for the price text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains type-- | -| Font size | Font size for the price text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type--

| +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment of the price | • Left (default)
• Center
• Right | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/product-quick-buy.md b/slab/blocks/product-quick-buy.md index 0ce7a71..fe4358f 100644 --- a/slab/blocks/product-quick-buy.md +++ b/slab/blocks/product-quick-buy.md @@ -3,16 +3,14 @@ ## Overview -A quick buy button block for product pages that allows customers to add a product to their cart or open a quick buy modal without navigating to the product detail page. Automatically handles single-variant products by adding them directly to the cart, and multi-variant products by opening a quick buy modal for variant selection. +A customizable quick buy button block that allows customers to add products to cart directly. Supports dynamic labels, multiple button styles, color schemes, and responsive visibility controls. ## Common use cases -- Use on collection pages or featured product sections for streamlined shopping -- Enable dynamic label for custom button text based on product state (e.g., "Pre-order") -- Configure button size and color to match your theme's design system -- Use full width option for prominent call-to-action buttons -- Consider alignment settings based on surrounding content layout +* Add a quick buy button to product cards or product pages +* Enable dynamic labels for pre-order or custom purchase actions +* Configure button size and color to match your theme's design system ## Block settings @@ -21,27 +19,26 @@ A quick buy button block for product pages that allows customers to add a produc | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display quick buy button for | Product picker | -| Dynamic label | Custom button text when dynamic label is enabled | Rich text input

Visible when enable dynamic label is true | -| Enable dynamic label | Allows custom button text instead of default "Add to Cart" | Checkbox (default: false) | - +| Product | Controls the product | Product picker | +| Dynamic label | Controls the dynamic label |

Rich text input (default: Pre-order)

Visible when enable dynamic label is true

| +| Enable dynamic label | Controls the enable dynamic label | Checkbox (default: false) | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable internal padding | Adds internal padding to the button | Checkbox (default: true) | -| Enable horizontal padding | Adds horizontal padding around the button | Checkbox (default: false) | -| Enable top padding | Adds top padding around the button | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the button | Checkbox (default: false) | - +| Enable internal padding | Adds internal padding to the button content | Checkbox (default: true) | +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Button color | Controls the button color scheme | • Primary
• Secondary (default)
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | - +| Type | Controls the type | • Custom
• Base (default) | +| Button | Controls the button |

Color scheme picker

Visible when color type is custom

| +| Button | Controls the button |

• Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

Visible when color type is base

| ### Style @@ -49,17 +46,15 @@ A quick buy button block for product pages that allows customers to add a produc |---------|-------------|---------| | Button size | Controls the button size | • Extra small
• Small (default)
• Standard
• Large | - ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment of the button | • Left (default)
• Center
• Right

Visible when enable full width is false | -| Enable full width | Makes the button span the full width of its container | Checkbox (default: false) | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | +| Enable full width | Makes the block span the full width of its container | Checkbox (default: false) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/product-rating.md b/slab/blocks/product-rating.md index d50d640..5f207f4 100644 --- a/slab/blocks/product-rating.md +++ b/slab/blocks/product-rating.md @@ -3,14 +3,14 @@ ## Overview -A comprehensive product rating display block that renders the rating information for a product. The block supports various styling options, alignment controls, and responsive visibility settings to seamlessly integrate with different product layouts and themes. +A customizable product rating block that displays star, circle, or square rating icons alongside text. Supports multiple icon styles, configurable sizes, text styling, color schemes, and responsive visibility controls. ## Common use cases -- Configure the product resource setting to specify which product's rating to display -- Display product ratings on product pages and product cards -- Show customer reviews and ratings to build trust +* Display product ratings with customizable icon styles on product pages +* Show rating information in product cards or product detail layouts +* Configure icon appearance including type, style, and size ## Block settings @@ -19,46 +19,44 @@ A comprehensive product rating display block that renders the rating information | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display rating for | Product picker | - +| Product | Controls the product | Product picker | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the rating | Checkbox (default: false) | -| Enable top padding | Adds top padding around the rating | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the rating | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Scheme | Controls the scheme |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Text color | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Icon type | Shape of rating icons | • Star (default)
• Circle
• Square

Visible when icon display is not "none" | -| Icon display | Controls how rating icons are displayed | • None
• Default (default)
• Simple | -| Icon style | Style variant for rating icons | • Classic (default)
• Sharp

Visible when icon display is not "none" | -| Icon size | Size of rating icons | 10 - 100 px (default: 14)

Visible when icon display is not "none" | -| Font family | Controls the font family used for rating text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of rating text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +| Icon type | Controls the icon type |

• Star (default)
• Circle
• Square

Visible when icon display is not none

| +| Icon display | Controls the icon display | • None
• Default (default)
• Simple | +| Icon style | Controls the icon style |

• Classic (default)
• Sharp

Visible when icon display is not none

| +| Icon size | Controls the icon size |

10 – 100 (default: 14)

Visible when icon display is not none

| +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type--

| +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/product-sibling-options.md b/slab/blocks/product-sibling-options.md index 88a3f6c..97415d3 100644 --- a/slab/blocks/product-sibling-options.md +++ b/slab/blocks/product-sibling-options.md @@ -8,13 +8,11 @@ A product navigation block that displays sibling products (related products from ## Common use cases -- Configure the custom.linked_collection metafield for your products to enable sibling product navigation -- Use button/swatch mode when displaying a small number of siblings (2-6 products) for quick visual selection -- Use dropdown mode when displaying many siblings (7+ products) to save space and reduce visual clutter -- Enable tooltips when showing swatches without labels to improve accessibility -- Consider enabling grid layout for consistent spacing and alignment -- Adjust swatch size (8-120px) based on design context: smaller for compact layouts, larger for hero sections -- Set appropriate gap sizes to balance density and readability +* Configure the custom.linked_collection metafield for your products to enable sibling product navigation +* Use button/swatch mode when displaying a small number of siblings for quick visual selection +* Use dropdown mode when displaying many siblings to save space and reduce visual clutter +* Enable tooltips when showing swatches without labels to improve accessibility +* Consider enabling grid layout for consistent spacing and alignment ## Block settings @@ -23,56 +21,61 @@ A product navigation block that displays sibling products (related products from | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display sibling options for | Product picker | -| Label | Optional label text displayed above the sibling options | Text input | -| Swatch selection | Controls how sibling options are displayed | • Buttons (default)
• Dropdowns | -| Show swatch | Displays product featured image as swatch background | Checkbox (default: true) | -| Show tooltip | Displays tooltip on hover showing product title | Checkbox (default: true)

Visible when swatch selection is buttons | -| Show labels | Displays product title alongside swatches | Checkbox (default: false)

Visible when swatch selection is buttons | -| Layout | Controls how swatches and labels are arranged | • Stacked
• Inline (default)

Visible when show labels and swatch selection is buttons | -| Swatch size | Size of the swatch preview images | 8 - 120 px (default: 16)

Visible when show swatch is true | -| Swatch radius | Controls the border radius of swatches | • None
• Default
• SM
• MD
• LG
• XL
• 2XL
• Full (default)

Visible when show swatch is true | +| Product | Controls the product | Product picker | +| Label | Controls the label | Text input | +### Swatches + +| Setting | Description | Options | +|---------|-------------|---------| +| Swatch selection | Controls the swatch selection | • Buttons (default)
• Dropdowns | +| Show swatch | Controls the show swatch | Checkbox (default: true) | +| Show tooltip | Controls the show tooltip |

Checkbox (default: true)

Visible when swatch selection is buttons

| +| Show labels | Controls the show labels |

Checkbox (default: false)

Visible when swatch selection is buttons

| +| Layout | Controls the layout |

• Stacked
• Inline (default)

Visible when show swatch is true and swatch selection is buttons

| +| Size | Controls the size |

8 – 120 px (default: 16)

Visible when show swatch is true

| +| Radius | Controls the radius |

• None
• Default
• Small
• Medium
• Large
• Extra large
• 2x Large
• Full (default)

Visible when show swatch is true

| ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | -| Enable top padding | Adds top padding around the block | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | -| Gap size | Controls spacing between sibling option buttons | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color for labels | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade

Visible when label is not blank | -| Button color | Controls the button/swatch color scheme | • Primary
• Secondary
• Tertiary
• Neutral
• Plain (default)
• Outline
• Inverted outline
• Blur
• Link
• Inverted link | - +| Type | Controls the type | • Custom
• Base (default) | +| Text color | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when label is not blank and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | +| Button | Controls the button |

Color scheme picker

Visible when color type is custom

| +| Button | Controls the button |

• Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

Visible when color type is base

| ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family for labels | • Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type-- and label is not blank | -| Font size | Controls the font size for labels | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Visible when label is not blank | -| Button size | Controls the size of buttons/swatches | • Extra small
• Small (default)
• Standard
• Large | - +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type-- and label is not blank

| +| Font size | Controls the font size |

• Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

Visible when label is not blank

| +| Button size | Controls the button size | • Extra small
• Small (default)
• Standard
• Large | ### Layout +This section is visible when swatch selection is buttons. + | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment | • Left (default)
• Center
• Right

Visible when label is not blank | -| Enable grid layout | Displays options in a grid instead of flex wrap | Checkbox (default: false)

Visible when swatch selection is buttons | -| Row desktop | Number of columns in grid on desktop | 1 - 12 (default: 4)

Visible when enable grid layout and swatch selection is buttons | -| Row mobile | Number of columns in grid on mobile | 1 - 3 (default: 2)

Visible when enable grid layout and swatch selection is buttons | - +| Horizontal alignment | Controls the horizontal alignment |

• Left (default)
• Center
• Right

Visible when label is not blank

| +| Enable grid layout | Controls the enable grid layout |

Checkbox (default: false)

Visible when swatch selection is buttons

| +| Row desktop | Controls the row desktop |

1 – 12 (default: 4)

Visible when enable grid layout is true and swatch selection is buttons

| +| Row mobile | Controls the row mobile |

1 – 3 (default: 2)

Visible when enable grid layout is true and swatch selection is buttons

| ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/product-subscription.md b/slab/blocks/product-subscription.md index a7a5428..df72721 100644 --- a/slab/blocks/product-subscription.md +++ b/slab/blocks/product-subscription.md @@ -8,12 +8,10 @@ A subscription options block that displays purchase choices for products with se ## Common use cases -- Use only with products that have selling plans properly configured in Shopify admin -- Place within or near product forms for optimal user experience -- Enable default subscription option for subscription-focused products to improve conversion -- Configure appropriate padding based on surrounding layout context -- Test thoroughly with different subscription configurations and discount types -- Use visibility settings to control display on different device sizes if needed +* Use only with products that have selling plans properly configured in Shopify admin +* Place within or near product forms for optimal user experience +* Enable default subscription option for subscription-focused products to improve conversion +* Use visibility settings to control display on different device sizes if needed ## Block settings @@ -22,28 +20,19 @@ A subscription options block that displays purchase choices for products with se | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display subscription options for | Product picker | -| Enable default subscription | Automatically selects the first available subscription option on page load | Checkbox (default: true) | - +| Product | Controls the product | Product picker | +| Enable default subscription | Controls the enable default subscription | Checkbox (default: true) | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the block | Checkbox (default: false) | -| Enable top padding | Adds top padding around the block | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the block | Checkbox (default: false) | - - -### Color - -| Setting | Description | Options | -|---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/product-swatches.md b/slab/blocks/product-swatches.md index c1e1e1f..621df28 100644 --- a/slab/blocks/product-swatches.md +++ b/slab/blocks/product-swatches.md @@ -8,12 +8,11 @@ A customizable product variant swatches block that displays color and other opti ## Common use cases -- Display color swatches for products with color variants -- Show variant option swatches for product selection -- Use custom uploaded swatch images for brand-specific colors -- Configure swatch limits to control how many swatches are displayed -- Enable tooltips to show swatch names on hover -- Set appropriate swatch sizes based on context (smaller for cards, larger for product pages) +* Display color swatches for products with color variants +* Show variant option swatches for product selection +* Use custom uploaded swatch images for brand-specific colors +* Configure swatch limits to control how many swatches are displayed +* Enable tooltips to show swatch names on hover ## Block settings @@ -22,31 +21,28 @@ A customizable product variant swatches block that displays color and other opti | Setting | Description | Options | |---------|-------------|---------| -| Product | Select the product to display swatches for | Product picker | -| Size | Size of the swatch circles | 8 - 44 px (default: 16) | -| Limit | Maximum number of swatches to display | 1 - 20 (default: 6) | -| Radius | Border radius for swatch circles | • None
• Default
• Sm
• Md
• Lg
• Xl
• 2xl
• Full (default) | -| Show tooltip | Displays swatch name in a tooltip on hover | Checkbox (default: true) | - +| Product | Controls the product | Product picker | +| Size | Controls the size | 8 – 44 px (default: 16) | +| Limit | Controls the limit | 1 – 20 (default: 6) | +| Radius | Controls the radius | • None
• Default
• Small
• Medium
• Large
• Extra large
• 2x Large
• Full (default) | +| Show tooltip | Controls the show tooltip | Checkbox (default: true) | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the swatches | Checkbox (default: false) | -| Enable top padding | Adds top padding around the swatches | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the swatches | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal alignment of the swatches | • Left (default)
• Center
• Right | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Right | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/progress-bar.md b/slab/blocks/progress-bar.md new file mode 100644 index 0000000..7daf2e3 --- /dev/null +++ b/slab/blocks/progress-bar.md @@ -0,0 +1,72 @@ +# Progress bar + + +## Overview + +A configurable progress bar block for use in theme sections. + + +## Common use cases + +* Display cart progress tiers that incentivize customers to reach spending thresholds +* Show free shipping progress indicators +* Create tiered discount progress bars + + +## Compatible blocks + +The following blocks can be nested within this block: + +* Progress tier + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|----------| +| Progress bar calculation | Choose to calculate the progress bar based on subtotal or total. |

• Subtotal
• Total (default)

| + +### Spacing + +| Setting | Description | Options | +|---------|-------------|----------| +| Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | +| Enable internal padding | Adds internal padding to the progress bar content | Checkbox (default: true) | +| Gap size | Spacing between content blocks within the container |

• None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large

| + +### Color + +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Bar | Select a custom progress bar color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Container | Select a custom container color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Bar | Controls the progress bar color |

• Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Container | Controls the container background color |

• Body
• Accent 1
• Accent 2
• Accent 3
• Shade 1 (default)
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color_type is base and enable_inheritance is false

| +| Text | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when border_position is not and color_type is base and enable_inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | + +### Style + +| Setting | Description | Options | +|---------|-------------|----------| +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type--

| +| Font size | Controls the font size |

• Smaller
• Small (default)
• Default
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

| +| Border position | Controls where borders appear |

• None (default)
• Top
• Bottom
• Left
• Right
• Top & bottom
• Left & right
• All

| + +### Layout + +| Setting | Description | Options | +|---------|-------------|----------| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Justify
• Right

| + +### Display + +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/render-quick-buy.md b/slab/blocks/render-quick-buy.md index bb62b5a..8434d63 100644 --- a/slab/blocks/render-quick-buy.md +++ b/slab/blocks/render-quick-buy.md @@ -8,10 +8,8 @@ A block for rendering a quick buy interface, allowing users to quickly purchase ## Common use cases -- Ensure the 'c__button' snippet is properly configured to match the theme's design -- Adjust the gap size in theme settings to fit the design requirements -- Use in quick buy overlays or popups for fast product purchasing -- Display quick buy functionality in product cards or grids +* Use in quick buy overlays or popups for fast product purchasing +* Display quick buy functionality in product cards or grids ## Block settings diff --git a/slab/blocks/render-quick-edit.md b/slab/blocks/render-quick-edit.md index 1c1f8a3..13c44b2 100644 --- a/slab/blocks/render-quick-edit.md +++ b/slab/blocks/render-quick-edit.md @@ -8,10 +8,8 @@ A block for rendering a quick edit interface, allowing users to quickly edit ite ## Common use cases -- Allow customers to edit cart items without navigating away -- Ensure the 'c__button' snippet is properly configured to match the theme's design -- Adjust the gap size in theme settings to fit the design requirements -- Use in cart drawers or overlays for quick edit functionality +* Allow customers to edit cart items without navigating away +* Use in cart drawers or overlays for quick edit functionality ## Block settings diff --git a/slab/blocks/richtext.md b/slab/blocks/richtext.md index 80e6a2a..b8c0274 100644 --- a/slab/blocks/richtext.md +++ b/slab/blocks/richtext.md @@ -3,15 +3,14 @@ ## Overview -A flexible rich text content block that allows for formatted text content with customizable text color, alignment, and responsive visibility options. +A flexible rich text content block that allows for formatted text content with customizable typography, text color, alignment, and responsive visibility options. Supports scroll-based animations and custom font sizing with line height and letter spacing controls. ## Common use cases -- Use for any formatted text content like paragraphs, headings, lists -- Consider text color contrast when using force light/dark options -- Use visibility options to create different content for mobile/desktop -- Default text alignment is left-aligned for better readability +* Display formatted text content such as paragraphs, headings, and lists +* Use custom typography settings for unique text presentations +* Configure scroll animations for engaging page transitions ## Block settings @@ -20,47 +19,45 @@ A flexible rich text content block that allows for formatted text content with c | Setting | Description | Options | |---------|-------------|---------| -| Content | The main text content to display | Rich text input | - +| Content | Controls the content | Rich text input | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) | -| Enable top padding | Adds top padding around the content | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Text color | Controls the text color |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Text color | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for the text | • Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' or font size is "custom" | -| Font size | Controls the font size of the text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Custom | -| Size | Custom font size when using custom typography | 4 - 200 px (default: 16)

Visible when font size is "custom" | -| Line height | Custom line height when using custom typography | 100 - 300 % (default: 150)

Visible when font size is "custom" | -| Letter spacing | Custom letter spacing when using custom typography | -3 - 3 rem (default: 0)

Visible when font size is "custom" | - +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type-- or font size is custom

| +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Custom | +| Size | Controls the size |

4 – 200 px (default: 16)

Visible when font size is custom

| +| Line height | Controls the line height |

100 – 300 % (default: 150)

Visible when font size is custom

| +| Letter spacing | Controls the letter spacing |

-3 – 3 rem (default: 0)

Visible when font size is custom

| ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | -| Enable max width | Limits the maximum width of the text content | Checkbox (default: true) | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Justify
• Right | +| Enable max width | Controls the enable max width | Checkbox (default: true) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | -| Scroll animation | Adds scroll-based animations to the block | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | +| Scroll animation | Controls the scroll animation | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | diff --git a/slab/blocks/search-input.md b/slab/blocks/search-input.md index 9e4ce41..3f9eeaa 100644 --- a/slab/blocks/search-input.md +++ b/slab/blocks/search-input.md @@ -3,16 +3,14 @@ ## Overview -A customizable search form component that provides a responsive search interface with various styling and layout options. Features include configurable button display, search overlay support, and flexible padding controls. +A customizable search form component that provides a responsive search interface with configurable button display, search overlay support, and flexible styling options. ## Common use cases -- Use small size for header/navigation integrations -- Enable search overlay for a more immersive search experience -- Consider showing the search button for better accessibility on mobile devices -- Match button color scheme with your site's design system -- Adjust padding settings based on surrounding content +* Add a search interface to headers, overlays, or search pages +* Enable search overlay for an immersive search experience +* Configure button visibility and styling to match your theme design ## Block settings @@ -21,32 +19,31 @@ A customizable search form component that provides a responsive search interface | Setting | Description | Options | |---------|-------------|---------| -| Placeholder | Placeholder text for the search input | Text input (default: Search for product) | -| Enable search overlay | Opens search results in an overlay when enabled | Checkbox (default: true) | -| Show button | Displays a submit button next to the search input | Checkbox (default: false) | -| Button label | Label text for the search button | Text input (default: Search)

Visible when show button is true | -| Button color | Color scheme for the search button | • Primary
• Secondary (default)
• Tertiary
• Neutral
• Plain
• Outline
• Inverted outline
• Blur

Visible when show button is true | -| Layout | Controls the layout of input and button | • Stacked
• Inline (default)

Visible when show button is true | - +| Placeholder | Controls the placeholder | Text input | +| Enable search overlay | Controls the enable search overlay | Checkbox (default: true) | +| Show button | Controls the show button | Checkbox (default: false) | +| Button label | Controls the button label |

Text input

Visible when show button is true

| +| Type | Controls the type |

• Custom
• Base (default)

Visible when show button is true

| +| Button | Controls the button |

Color scheme picker

Visible when show button is true and color type is custom

| +| Button | Controls the button |

• Plain (default)
• Main
• Blur
• Outline
• Inverted outline
• Transparent
• Inverted transparent

Visible when show button is true and color type is base

| +| Layout | Controls the layout |

• Stacked
• Inline (default)

Visible when show button is true

| ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the search form | Checkbox (default: false) | -| Enable top padding | Adds top padding around the search form | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the search form | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Size | Controls the size of the search input | • Small
• Medium (default)
• Large | - +| Size | Controls the size | • Small
• Medium (default)
• Large | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/search-results.md b/slab/blocks/search-results.md index dd61ce9..5ffa585 100644 --- a/slab/blocks/search-results.md +++ b/slab/blocks/search-results.md @@ -3,18 +3,14 @@ ## Overview -A comprehensive search results block that provides real-time search functionality with keyboard navigation, suggestions, and displays results for multiple content types. Features a sticky search bar with input field, loading states, search suggestions, and organized results display for products, collections, pages, articles, and query suggestions. +A comprehensive search results block that provides real-time search functionality with keyboard navigation, suggestions, and organized results display for products, collections, pages, articles, and query suggestions. Features a sticky search bar, loading states, and configurable search link suggestions. ## Common use cases -- Configure search resource types in theme settings to control what content appears in results -- Add manual search link suggestions to help users discover content when starting their search -- Use appropriate color schemes and border styles to match your theme design -- Consider the number of search result types when configuring the layout -- Set up customer access tags if you need to hide certain content from non-approved users -- Ensure Alpine.js search store and helper functions are properly initialized -- Test keyboard navigation functionality across different devices and browsers +* Display search results with support for multiple content types +* Add manual search link suggestions to help users discover content +* Configure color schemes and border styles to match your theme design ## Block settings @@ -23,29 +19,29 @@ A comprehensive search results block that provides real-time search functionalit | Setting | Description | Options | |---------|-------------|---------| -| Placeholder | Placeholder text for the search input | Text input (default: Search for product) | -| Search recommendations | Link list of manual search suggestions to display when no search term is entered | Link list picker | - +| Placeholder | Controls the placeholder | Text input | +| Search recommendations | Controls the search recommendations | Link list picker | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the search results | Checkbox (default: false) | -| Enable top padding | Adds top padding around the search results | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the search results | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Color scheme | Controls the background and text color combination | • Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | -| Border color | Controls the border color | • Body
• Subtle (default)
• Strong
• Primary
• Secondary
• Tertiary
• None | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Scheme | Controls the scheme |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Scheme | Controls the scheme |

• Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur
• Transparent

Visible when color type is base and enable inheritance is false

| +| Border | Controls the border |

• Body
• Subtle (default)
• Strong
• None

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: false) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/search-summary.md b/slab/blocks/search-summary.md index d59bf70..345d07b 100644 --- a/slab/blocks/search-summary.md +++ b/slab/blocks/search-summary.md @@ -8,12 +8,9 @@ A search results summary block that displays the number of search results found ## Common use cases -- Place this block at the top of search results pages for clear user feedback -- Use consistent styling with your search form and results layout -- Consider using center alignment for standalone search summary displays -- Enable max-width for better readability in wide layouts -- Adjust font size based on the importance of search feedback in your design -- Use appropriate padding to ensure proper spacing within search result containers +* Place at the top of search results pages for clear user feedback +* Use consistent styling with your search form and results layout +* Adjust font size and alignment to match your theme design ## Block settings @@ -22,36 +19,35 @@ A search results summary block that displays the number of search results found | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the summary | Checkbox (default: false) | -| Enable top padding | Adds top padding around the summary | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the summary | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Scheme | Controls the scheme |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Text color | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for the text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of the text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type--

| +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | -| Enable max width | Limits the maximum width of the text content | Checkbox (default: false) | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Justify
• Right | +| Enable max width | Controls the enable max width | Checkbox (default: false) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/share.md b/slab/blocks/share.md index 1a5a64a..c252a05 100644 --- a/slab/blocks/share.md +++ b/slab/blocks/share.md @@ -1,53 +1,48 @@ # Share -## Overview -A customizable share component that allows users to easily share content to social media platforms. Features a share button with dynamic text feedback. Supports sharing to Facebook, Twitter/X, Pinterest, and LinkedIn, with native sharing on supported devices. +## Overview -## Common use cases +A customizable share component that allows users to easily share content to social media platforms. Features a share button with dynamic text feedback. -* Add social sharing buttons to product pages -* Enable content sharing on blog posts -* Create shareable links for promotions -* Allow users to share pages on social media -* Provide quick sharing options for articles -## Compatible blocks +## Common use cases -The following blocks can be nested within this block: +* Add social sharing buttons that let customers share content +* Enable sharing to Facebook, X, Pinterest, and LinkedIn +* Create shareable links for products, articles, or promotions -* [Container](layout/container.md) ## Block settings ### Content -| Setting | Description | Options | -| ---------------------- | ---------------------------- | ------------------------ | -| Enable Facebook share | Shows Facebook share button | Checkbox (default: true) | -| Enable X/Twitter share | Shows X/Twitter share button | Checkbox (default: true) | -| Enable Pinterest share | Shows Pinterest share button | Checkbox (default: true) | -| Enable LinkedIn share | Shows LinkedIn share button | Checkbox (default: true) | +| Setting | Description | Options | +|---------|-------------|----------| +| Enable Facebook share | Enable Facebook share | Checkbox (default: true) | +| Enable X/Twitter share | Enable X/Twitter share | Checkbox (default: true) | +| Enable Pinterest share | Enable Pinterest share | Checkbox (default: true) | +| Enable LinkedIn share | Enable LinkedIn share | Checkbox (default: true) | ### Spacing -| Setting | Description | Options | -| ------------------------- | -------------------------------------------- | ------------------------- | +| Setting | Description | Options | +|---------|-------------|----------| | Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | -| Enable top padding | Adds top padding | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Layout -| Setting | Description | Options | -| -------------------- | ----------------------------------------------------------------------- | ---------------------------------------------- | -| Width | Controls the width of the share dropdown | 100 - 400 px (default: 250) | -| Vertical direction | Controls whether the dropdown opens up or down |

• Up (default)
• Down

| -| Horizontal position | Controls horizontal positioning of the dropdown relative to the trigger |

• Left (default)
• Center
• Right

| -| Horizontal alignment | Controls horizontal alignment of the share button |

• Left (default)
• Center
• Right

| +| Setting | Description | Options | +|---------|-------------|----------| +| Width | Controls the width of the block | 100 - 400 px (default: 250 px) | +| Direction | Controls whether the dropdown opens up or down |

• Down
• Up (default)

| +| Horizontal position | Controls horizontal positioning |

• Left (default)
• Center
• Right

| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Right

| ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/shared-discount.md b/slab/blocks/shared-discount.md index d623653..e036398 100644 --- a/slab/blocks/shared-discount.md +++ b/slab/blocks/shared-discount.md @@ -8,10 +8,9 @@ A dynamic content block that displays shared discount messages. This block provi ## Common use cases -- Use max-width setting for better readability of error messages -- Consider text color contrast when customizing the appearance -- Test error messages in both mobile and desktop views when using visibility options -- Display discount codes shared by customers or promotional messages +* Display discount codes shared by customers or promotional messages +* Use max-width setting for better readability of discount messages +* Configure text color and styling to highlight discount information ## Block settings @@ -20,36 +19,35 @@ A dynamic content block that displays shared discount messages. This block provi | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) | -| Enable top padding | Adds top padding around the content | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Color | Setting | Description | Options | |---------|-------------|---------| -| Text color | Controls the text color | • Default (default)
• Alternative
• Primary background
• Primary foreground
• Secondary background
• Secondary foreground
• Tertiary background
• Tertiary foreground
• Neutral background
• Neutral foreground
• Shade
• Error
• Success | - +| Type | Controls the type |

• Custom
• Base (default)

Visible when enable inheritance is false

| +| Text color | Controls the text color |

Color scheme picker

Visible when color type is custom and enable inheritance is false

| +| Text color | Controls the text color |

• Default (default)
• Alternative
• Link
• Error
• Success
• Shade 1
• Shade 2
• Shade 3

Visible when color type is base and enable inheritance is false

| +| Enable inheritance | Colors will be inherited from the closest parent block that has a set scheme. | Checkbox (default: true) | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font family | Controls the font family used for the text | • Standard
• Heading
• Subheading
• Accent

Visible when font size contains 'type--' | -| Font size | Controls the font size of the text | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | - +| Font family | Controls the font family |

• Standard (default)
• Heading
• Subheading
• Accent

Visible when font size contains type--

| +| Font size | Controls the font size | • Smaller
• Small
• Default (default)
• Big
• Bigger
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6 | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Justify
• Right | -| Enable max width | Limits the maximum width of the text content | Checkbox (default: true) | - +| Horizontal alignment | Controls the horizontal alignment | • Left (default)
• Center
• Justify
• Right | +| Enable max width | Controls the enable max width | Checkbox (default: true) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/shop-login.md b/slab/blocks/shop-login.md index 09f1d94..9c9d8ba 100644 --- a/slab/blocks/shop-login.md +++ b/slab/blocks/shop-login.md @@ -3,15 +3,14 @@ ## Overview -A block that displays a login button for the shop. +A block that displays a shop login or follow button with configurable layout and visibility options. ## Common use cases -- Display a login button for the shop -- Support responsive visibility controls for mobile/desktop display -- Offer text alignment options (left, center, justify, right) -- Add shop login functionality to headers or account pages +* Add a login button to headers or account pages +* Use the follow button type for shop follow functionality +* Configure full-width layout for prominent login buttons ## Block settings @@ -20,28 +19,25 @@ A block that displays a login button for the shop. | Setting | Description | Options | |---------|-------------|---------| -| Button type | Select the type of button to display | • Login (default)
• Follow | - +| Button type | Controls the button type | • Login (default)
• Follow | ### Spacing | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the button | Checkbox (default: false) | -| Enable top padding | Adds top padding around the button | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the button | Checkbox (default: false) | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Horizontal alignment | Controls horizontal text alignment | • Left (default)
• Center
• Right

Visible when enable full width is false or button type is "follow" | -| Enable full width | Makes the button span the full width of its container | Checkbox (default: false)

Visible when button type is "login" | - +| Horizontal alignment | Controls the horizontal alignment |

• Left (default)
• Center
• Right

Visible when enable full width is false or button type is follow

| +| Enable full width | Controls the enable full width |

Checkbox (default: false)

Visible when button type is login

| ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/shop-pay-installments.md b/slab/blocks/shop-pay-installments.md new file mode 100644 index 0000000..8055156 --- /dev/null +++ b/slab/blocks/shop-pay-installments.md @@ -0,0 +1,42 @@ +# Shop Pay installments + + +## Overview + +A block that displays Shop Pay installment payment messaging, showing customers how they can split their purchase into installments. Supports both cart-level and product-level installment displays with configurable color schemes. + + +## Common use cases + +* Display installment payment options on product pages +* Show cart-level installment messaging in the cart drawer or cart page +* Configure color scheme to match your theme design + + +## Block settings + +### Content + +| Setting | Description | Options | +|---------|-------------|---------| +| Installment type | Controls the installment type | • Cart (default)
• Product | + +### Spacing + +| Setting | Description | Options | +|---------|-------------|---------| +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | + +### Color + +| Setting | Description | Options | +|---------|-------------|---------| +| Scheme | Controls the scheme | • Body (default)
• Accent 1
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur
• Transparent | + +### Display + +| Setting | Description | Options | +|---------|-------------|---------| +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/social-icons.md b/slab/blocks/social-icons.md index ae890b0..a5b0365 100644 --- a/slab/blocks/social-icons.md +++ b/slab/blocks/social-icons.md @@ -8,11 +8,9 @@ A customizable social media icons block that displays a collection of social med ## Common use cases -- Configure social media URLs in theme settings before adding this block -- Use appropriate gap sizes based on icon size selection -- Consider the number of social icons when choosing between stacked vs inline layout -- Adjust icon size (16-48px) based on the design context and available space -- Use padding options to properly space the block within its container +* Display social media links in headers, footers, or sidebars +* Configure social media URLs in theme settings before adding this block +* Adjust icon size and gap spacing based on the design context ## Block settings @@ -21,28 +19,25 @@ A customizable social media icons block that displays a collection of social med | Setting | Description | Options | |---------|-------------|---------| -| Enable horizontal padding | Adds horizontal padding around the icons | Checkbox (default: false) | -| Enable top padding | Adds top padding around the icons | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding around the icons | Checkbox (default: false) | -| Gap size | Spacing between social icons | • None
• Default (default)
• XS
• SM
• MD
• LG
• XL | - +| Enable horizontal padding | Controls the enable horizontal padding | Checkbox (default: false) | +| Enable top padding | Controls the enable top padding | Checkbox (default: false) | +| Enable bottom padding | Controls the enable bottom padding | Checkbox (default: false) | +| Gap size | Controls the gap size | • None
• Default (default)
• Extra small
• Small
• Medium
• Large
• Extra large | ### Style | Setting | Description | Options | |---------|-------------|---------| -| Font size | Controls the size of the social icons | 16 - 48 px (default: 20) | - +| Font size | Controls the font size | 16 – 48 px (default: 20) | ### Layout | Setting | Description | Options | |---------|-------------|---------| -| Layout | Controls the icon layout direction | • Stacked
• Inline (default) | - +| Layout | Controls the layout | • Stacked
• Inline (default) | ### Display | Setting | Description | Options | |---------|-------------|---------| -| Visibility | Controls when the block is visible | • All (default)
• Mobile only
• Desktop only | +| Visibility | Controls the visibility | • Show on all devices (default)
• Show on mobile only
• Show on desktop only | diff --git a/slab/blocks/video.md b/slab/blocks/video.md index cb94571..1a648a6 100644 --- a/slab/blocks/video.md +++ b/slab/blocks/video.md @@ -1,66 +1,64 @@ # Video + ## Overview -A customizable video block component that supports both native and custom video controls. Provides flexible styling options including color schemes, button styles, and layout controls. Supports responsive design with mobile/desktop visibility options and customizable width and alignment. +A customizable video block component that supports both native and custom video controls. Provides flexible styling options including color schemes, button styles, and layout controls. + ## Common use cases -* Embed promotional videos on homepage +* Embed promotional videos on homepage or landing pages * Showcase product demonstrations -* Display brand storytelling content -* Create engaging video backgrounds -* Add instructional or educational videos - -## Compatible blocks - -The following blocks can be nested within this block: +* Display brand storytelling content with custom controls -* [Container](layout/container.md) ## Block settings ### Content -| Setting | Description | Options | -| ---------------------- | ----------------------------------------- | ------------------------- | -| Video | The video file to display | Video picker | -| Autoplay video | Automatically plays the video when loaded | Checkbox (default: true) | -| Loop video | Restarts video when it ends | Checkbox (default: true) | -| Default video controls | Shows native browser video controls | Checkbox (default: false) | -| Custom video controls | Shows custom branded play/pause controls | Checkbox (default: true) | +| Setting | Description | Options | +|---------|-------------|----------| +| Video | The video file to display | Video picker | +| Enable autoplay | Automatically plays the video when loaded | Checkbox (default: true) | +| Enable loop | Restarts video when it ends | Checkbox (default: true) | +| Show default video controls | Shows native browser video controls | Checkbox (default: false) | +| Show custom video controls | Shows custom branded play/pause controls | Checkbox (default: true) | ### Spacing -| Setting | Description | Options | -| ------------------------- | -------------------------------------------- | ------------------------- | +| Setting | Description | Options | +|---------|-------------|----------| | Enable horizontal padding | Adds horizontal padding inside the container | Checkbox (default: false) | -| Enable top padding | Adds top padding | Checkbox (default: false) | -| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | +| Enable top padding | Adds top padding | Checkbox (default: false) | +| Enable bottom padding | Adds bottom padding | Checkbox (default: false) | ### Color -| Setting | Description | Options | -| ------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Color scheme | Controls the background color scheme |

• Body
• Neutral
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Primary
• Secondary
• Tertiary
• Blur

| -| Border color | Controls the border color |

• Subtle (default)
• Strong
• None

| +| Setting | Description | Options | +|---------|-------------|----------| +| Type | Controls color mode (custom or base) |

• Custom
• Base (default)

Visible when enable_inheritance is false

| +| Scheme | Select a custom color scheme |

Color scheme picker

Visible when color_type is custom and enable_inheritance is false

| +| Scheme | Controls the background and text colors |

• Body
• Accent 1 (default)
• Accent 2
• Accent 3
• Shade 1
• Shade 2
• Shade 3
• Blur

Visible when color_type is base and enable_inheritance is false

| +| Border | Controls the border color |

• None
• Subtle (default)
• Strong
• Body foreground

Visible when color_type is base and enable_inheritance is false

| +| Enable inheritance | Inherit colors from parent block | Checkbox (default: false) | ### Style -| Setting | Description | Options | -| ------------- | ----------------------------------------- | --------------------------------------------------------------------------------------- | -| Width | Controls the width of the video container | 5 - 100 % (default: 100) | -| Minimum width | Minimum width of the video container | 5 - 500 px (default: 500) | -| Radius | Controls the border radius |

• None
• Default (default)
• Sm
• Md
• Lg
• Xl
• 2xl
• Full

| +| Setting | Description | Options | +|---------|-------------|----------| +| Width | Controls the width of the block | 5 - 100 % (default: 100 %) | +| Minimum width | Minimum width of the block | 5 - 500 px (default: 500 px) | +| Radius | Controls the border radius |

• None
• Default (default)
• Small
• Medium
• Large
• 1x Large
• 2x Large
• Full

| ### Layout -| Setting | Description | Options | -| -------------------- | ------------------------------------------ | ---------------------------------------------- | -| Horizontal alignment | Controls horizontal alignment of the video |

• Left (default)
• Center
• Right

| +| Setting | Description | Options | +|---------|-------------|----------| +| Horizontal alignment | Controls horizontal alignment |

• Left (default)
• Center
• Right

| ### Display -| Setting | Description | Options | -| ---------- | ---------------------------------- | --------------------------------------------------------- | -| Visibility | Controls when the block is visible |

• All (default)
• Mobile only
• Desktop only

| +| Setting | Description | Options | +|---------|-------------|----------| +| Visibility | Controls when the block is visible |

• Show on all devices (default)
• Show on mobile only
• Show on desktop only

| diff --git a/slab/blocks/visibility.md b/slab/blocks/visibility.md index 986b1a6..0a5e57d 100644 --- a/slab/blocks/visibility.md +++ b/slab/blocks/visibility.md @@ -3,25 +3,23 @@ ## Overview -A container block that controls content visibility based on screen size, customer status, and cart state. Conditionally renders child blocks based on customer authentication state, approved customer status, and screen size requirements. Uses liquid conditionals for complete block hiding rather than CSS display properties, making it ideal for sensitive content that needs to be completely hidden from certain user groups. +A container block that controls content visibility based on screen size and customer status. Conditionally renders child blocks based on customer authentication state and screen size requirements. ## Common use cases -- Show or hide content based on customer login status -- Display content only to approved or B2B customers -- Control visibility based on cart state (empty or not empty) -- Use for content that needs to be completely hidden from certain user groups -- Prefer this over CSS display:none for sensitive content -- Control device-specific visibility for mobile or desktop only +* Show or hide content based on customer login status +* Display content only to approved or B2B customers +* Control visibility based on cart state (empty or not empty) +* Control device-specific visibility for mobile or desktop only ## Compatible blocks The following blocks can be nested within this block: -- All theme blocks -- App blocks +* All theme blocks +* App blocks ## Block settings @@ -29,8 +27,8 @@ The following blocks can be nested within this block: ### Display | Setting | Description | Options | -|---------|-------------|---------| -| Device visibility | Controls when the block is visible based on screen size | • All (default)
• Mobile only
• Desktop only | -| Customer visibility | Controls when the block is visible based on customer status | • All (default)
• Logged out
• Any account
• Approved account
• B2B account | -| Cart visibility | Controls when the block is visible based on cart state | • All (default)
• Empty
• Not empty | -| Scroll animation | Animation effect when the block scrolls into view | • None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom | +|---------|-------------|----------| +| Device | Controls when the block is visible based on screen size |

• Always show (default)
• Show on mobile
• Show on desktop

| +| Customer | Controls when the block is visible based on customer status |

• Show to all visitors (default)
• Show to logged out visitors
• Show to any account
• Show to approved accounts
• Show to B2B accounts

| +| Cart | Controls when the block is visible based on cart state |

• Always show (default)
• Show when cart is empty
• Show when cart has items

| +| Scroll animation | Controls how the block appears when scrolled into view. |

• None (default)
• Fade
• Slide up
• Slide down
• Slide left
• Slide right
• Zoom

|