# Basic

	Cover image
Text	Fox-BG Light (97).jpg	#text
Collapsible text	Fox-BG Light (87).jpg	#collapsible-text
Button	Fox-BG Light (85).jpg	#button
Press	Fox-BG Light (95).jpg	#press
Testimonial	Fox-BG Light (96).jpg	#testimonial
Image	Fox-BG Light (92).jpg	#image
Image card	Fox-BG Light (93).jpg	#image-card
Images stack	Fox-BG Light (94).jpg	#images-stack
Card layered	Fox-BG Light (86).jpg	#card-layered
Icon	Fox-BG Light (90).jpg	#icon
Icon box	Fox-BG Light (91).jpg	#icon-box
Video	Fox-BG Light (98).jpg	#video
Countdown timer	Fox-BG Light (88).jpg
Countdown timer: Icon with text	Fox-BG Light (89).jpg	#countdown-timer-icon-with-text
Article card	Fox-BG Light (84).jpg	#article-card
Divider	Fox-BG Light (99).jpg	#divider

Text

The **Text block** is used to display rich text content such as descriptions, quotes, product details, and other text-based elements, from headings, subheadings, to text. #### ⚙️ **Block settings**

Setting	Description
Text	The main content of the block. You can enter plain text or use rich text.
Highlight style	Choose a highlight style to emphasize text. Options include: None Wavy underline Solid background
Highlight font style	Select whether highlighted text is italic or normal. This is only available when highlight style is not "None".
Highlight shape color	Choose the color for the shape around the highlighted text.
Highlight text color	Select the text color for highlighted text.
Font preset	Choose a preset font style. Learn more: typography
Font size	Adjust the size of the text.
Line height	Choose the line height.
Text color	Select the color of the text: Text or Subtext.
Width	Choose the width of the text block.

#### 💡 Best practices * The **Highlight style** feature is great for drawing attention to key information. * Use subtle animations, like **Fade In** or **Slide In**, to attract attention without being distracting. Avoid overuse of animations for a more polished, professional design.

Collapsible text

The **Collapsible text block** helps you show rich text content (like brand stories, product details, or policies) while keeping your page clean and scannable. Visitors can expand the content by clicking the “View more” button and collapse it back when done reading. #### ⚙️ **Block settings** | Setting | Description | | -------- | ---------------------------------------------------------------------------------------------------------------- | | **Text** | The main text content displayed in the block. Supports rich text formatting (headings, paragraphs, links, etc.). | | Typography | Description | | ------------------------------------------------------------ | ---------------------------------------------------------------- | | **Preset** | Choose a predefined text style. | | **Font** *(visible when “Custom” preset is selected)* | Choose which theme font to apply (body, heading, or subheading). | | **Font size** *(visible when “Custom” preset is selected)* | Define a custom font size for desktop and mobile separately. | | **Line height** *(visible when “Custom” preset is selected)* | Adjust line spacing (tight, normal, or loose). | | **Color** | Select text color: `Text` (default) or `Subtext` (lighter tone). | | Collapsible settings | Description | | -------------------- | ------------------------------------------------------------------------------------------- | | **Text line limit** | Control how many lines are shown before truncation. Options: None, 1–5 lines. | | **Button style** | Choose the style of the “View more” button (`Primary`, `Secondary`, `White`, or `Outline`). | | **Padding** | Adjust spacing around the text content (in px). | | **Mobile scale** | Adjust padding scale for mobile view (%). | #### 💡 **Pro tips** * Set a **4-line limit** for long texts — it keeps content readable and inviting. * Keep text conversational — collapsible text works best when used for storytelling. * Combine this block with **Image or Group blocks** to balance visuals and long copy.

Button

The **Button** block lets you insert a clickable button anywhere in your section — perfect for guiding shoppers to featured products, collections, or promotions. #### ⚙️ **Block settings**

Setting	Description
Label	The text shown on the button.
Link	Add a destination URL. This can be a product, collection, page, or any external link.
Style	Choose the button appearance: • `Primary` — main accent button for key CTAs. • `Secondary` — subtle button for secondary actions. • `Outline` — bordered button with a transparent background.
Size	Adjust the button size: `Extra small`, `Small`, `Medium`, or `Large`.
Icon	Add an icon before or after the button text (e.g., arrow, cart, heart, etc.).
Icon style	Choose icon weight: `Default` (outline look) or `Solid` (filled look). Visible only when an icon is selected.
Animation type	Add entrance animation when the button appears on scroll. Visible only if animations are enabled in theme settings: animations
Animation delay	Control how soon the animation starts. Useful when multiple elements are animated in sequence.

{% hint style="info" %} Customize the overall appearance of the buttons in **Theme settings >** [**Buttons**](https://docs.foxecom.com/pebble-theme/theme-settings/buttons). {% endhint %}

Article card

The **Article card** block displays a single blog post with its image, title, tags, author, and publish date. It’s perfect for highlighting featured blog content, promoting your latest stories, or showcasing brand updates anywhere on your storefront. #### ⚙️ **Block settings**

Setting	Description
Article	Select which blog post to display. See how to add blog posts
Layout type	Choose how the card is displayed: • `Overlay` — text on top of the article image. • `Vertical` — image above text (column layout). • `Horizontal` — image beside text (row layout).
Image ratio	Adjust the article image ratio separately for desktop and mobile.
Text alignment	Align text content (`Left`, `Center`, or `Right`).
Show tags	Display article tags as badges on the blog's image.
Show date	Show the article’s publish date.
Show author	Display the article author’s name.
Show button	Include a “Read more” button linking to the full article.

{% hint style="info" %} To change the image corner radius of all article cards (blog cards), go to **Theme settings** > [Blog cards](https://docs.foxecom.com/pebble-theme/theme-settings/blog-cards). {% endhint %}

Press

The **Press** block allows you to showcase press mentions, reviews, or testimonials in a visually appealing way, adding credibility to your brand. #### ⚙️ **Block settings**

Setting	Description
Image	Upload an image to accompany your press or testimonial content.
Width	Adjust the width of the image for desktop and mobile view separately.
Alignment	Set the alignment of the image and text block.
Text content	Add your press content, such as reviews or press mentions.
Author info	Add information about the author or source of the press, such as their name, bio, and photo.
Text alignment	Adjust the text alignment (left, center, or right).
Width	Set the block width (fill, fit-content, or custom).

{% hint style="success" %} The Press block comes with 2 nested **static blocks** by default: * **Text** block: Display the main content text. * **Information** block: Display the author or source information. {% endhint %}

Testimonial

The **Testimonial block** is designed to showcase customer reviews, quotes, or testimonials in a visually appealing way. This block can include an image of the reviewer, the text of their testimonial, and the product associated with the testimonial. #### ⚙️ **Block settings**

Setting	Description
Design	Choose the layout design for the testimonial block: `Stacked` (image above text) `Inline` (image beside text).
Show Image	Decide whether to display an image in the testimonial.
Image	Upload an image.
Image Ratio	Select the aspect ratio for the image.
Image away from edge	Optionally adds space around the image for a more balanced look.
Enable image stretch	For inline layouts, enable or disable image stretching to fit the available space.
Image corner radius	Set rounded corners for the image to soften its appearance.
Product	Link the testimonial to a specific product.

#### ⚙️ Nested static blocks The Testimonial block comes with 2 [static blocks](https://docs.foxecom.com/pebble-theme/overview#static-blocks): * **Text**: Main testimonial content (e.g., the customer's feedback, review, or experience with the product/service). You can enter plain text or rich text. * **Information**: Hold the details about the author of the testimonial (their name and bio).

Image

The **Image block** lets you upload a photo, banner, or graphic, and optionally turn it into a clickable link. #### ⚙️ **Block settings**

Setting	Description
Image	Upload your main desktop image.
Image (mobile)	Upload an optional image optimized for mobile.
Link	Add a clickable link to make the entire image act as a button.
Aspect ratio	Choose how the image fits inside its container.
Width	Select how wide the image should be: • `Fit content` — adjusts to image size • `Fill` — takes full width of container • `Custom` — define your own percentage.
Custom width (if custom selected)	Manually set image width (0–100%).

#### 🎨 **Border settings**

Setting	Description
Borders	Choose `None` or `Solid` to add a border around the image.
Border width	Adjust line thickness (0–10 px).
Border opacity	Control transparency (0–100%).
Border radius	Round the corners of the image (0–32 px).

#### 💡 **Pro tips** * Use **different desktop and mobile images** for better framing and readability on smaller screens. * Combine multiple Image blocks inside a **Grid** or **Group** section for collages or lookbooks. * Apply **rounded corners** for a softer, modern visual style. * Keep image aspect ratios consistent across a section for a tidy look.

Image card

The **Image card block** lets you combine an image with text, button, and optional overlay to create visual cards for promotions, featured products, or storytelling. #### ⚙️ **Block settings**

Setting	Description
Show content below image	Moves all text and button content beneath the image instead of overlaying it.
Gap	Controls spacing between image and content when content is below.
Image	Upload your main desktop image.
Image (mobile)	Upload a different image optimized for mobile layout.
Media overlay	Enable to add a semi-transparent color overlay on top of the image (useful for text contrast).
Overlay color	Choose overlay color and opacity when overlay is enabled.
Aspect ratio	Control how the image fits inside its frame.
Image border	Add a border around the image.
Border width / opacity / radius	Adjust border thickness, transparency, and rounded corners.

#### 🧩 **Content settings**

Setting	Description
Padding	Adds internal padding around text inside the card.
Content direction	Choose layout: • `Vertical` — content stacks in a column. • `Horizontal` — button and text sit side-by-side.
Alignment (horizontal / vertical)	Control how content aligns within the card.
Column gap / Row gap	Adjust the distance between the image and content depending on layout direction.
Width	Define how wide the image card should appear.
Card label	Add a short label to identify or tag this card.

Images stack

The **Images Stack** block allows you to display multiple images in a horizontal stack. This block offers a visually engaging layout with a hover effect that reveals stacked images, creating a dynamic and interactive user experience. Once you add the block, you will be able to add **multiple images** to the stack. Click on each image slot to upload images for your stack.

Card layered

The **Card layered** block combines image, text, and overlay into a modern, interactive card. #### ⚙️ **Block settings** | Setting | Description | | -------------------------- | --------------------------------------------------------------------------------------------------- | | **Image (desktop)** | Upload the main image displayed in the background. | | **Image (mobile)** | Upload a separate image optimized for mobile view. | | **Aspect ratio (desktop)** | Choose the image ratio for desktop (auto, square, portrait, or landscape). | | **Aspect ratio (mobile)** | Choose a separate ratio for mobile devices. | | **Media overlay** | Enable a color overlay on top of the image for contrast. | | **Overlay color** | Choose the overlay color and transparency (visible only when overlay is enabled). | | **Padding (edge gap)** | Adjust spacing between the card’s edge and its text content: `None`, `Small`, `Medium`, or `Large`. | | **Text alignment** | Align text content (`Left`, `Center`, or `Right`). | | **Width (desktop)** | Set how wide the card appears: `Fit content`, `Fill`, or `Custom width`. | | **Custom width (desktop)** | Define a specific percentage width (only visible if “Custom” is selected). | | **Width (mobile)** | Adjust how the card scales on mobile. | | **Custom width (mobile)** | Define a custom mobile width (only visible if “Custom” is selected). | | **Color scheme** | Apply one of your theme’s color schemes to the card’s content area. | | **Border style** | Choose a border type (`None` or `Solid`). | | **Border width** | Control border thickness in pixels (visible only when border is enabled). | | **Border opacity** | Adjust border transparency (0–100%). | | **Border radius** | Round the corners of the card for a softer look (0–32px). | #### 🧩 **Nested content** The **Card layered block** contains three built-in text areas: * **Subheading** — smaller text for numbering or categories. * **Heading** — main focus text or title. * **Description** — optional supporting text below the heading. These are pre-set [**static text blocks**](https://docs.foxecom.com/pebble-theme/overview#static-blocks) inside the card, ensuring a consistent layout style. #### 💡 **Pro tips** * Use **Media overlay** to make light text stand out on bright images. * Combine multiple Card layered blocks in a **Grid section** for editorial-style layouts. * Keep text short and impactful — this block shines with minimal copy. * Use **rounded corners** and subtle borders to create soft, modern visuals.

Icon

The **Icon block** lets you display a visual symbol or upload a custom image icon. You can also turn it into a clickable link — perfect for emphasizing features, linking to social channels, or highlighting quick info visually. #### ⚙️ **Block settings**

Setting	Description
Icon	Choose from a wide selection of built-in icons.
Image icon	Upload a custom image icon instead of using a built-in icon.
Icon size	Select a predefined size or choose Custom size for full control.
Width (Visible if custom size)	Set custom icon width.
Link	Add a destination URL to make the icon clickable.

#### 💡 **Pro tips** * Pair icons with **text or headings** for better context. * Use consistent icon sizes to keep the layout visually balanced. * Avoid oversized icons; they should complement, not overpower, text.

Icon box

The **Icon box block** is a flexible layout element that combines visuals and text. You can use it to highlight store values, product benefits, or any key information in a clean, visual way. #### ⚙️ **Block settings**

Setting	Descriptio
Direction	Choose layout orientation: • `Vertical` — icon on top, text below. • `Horizontal` — icon and text side-by-side.
Text alignment (Vertical only)	Align text and icon: Left, Center, or Right.
Icon	Select a built-in icon.
Image icon	Upload your own image if you want to replace the default icon.
Icon spacing	Controls the space between icon and text (0–32 px).
Icon size	Choose icon size or set a Custom size.
Heading	Enter your title.
Heading preset	Choose heading style.
Description text	Add supporting information below the heading.
Text color	Choose color style for the description (`Text` or `Subtext`).
Link	Make the entire card clickable by entering a URL.
Row gap	Adjust space between heading and text (0–32 px).

#### 🎨 **Appearance settings**

Setting	Description
Style	Choose between: • `Standard` — clean layout without border or background. • `Card` — boxed layout with background and border.
Inherit color scheme (Card only)	Use section color scheme, or disable to apply a custom one.
Border type (Card only)	Select `None` or `Solid` border.
Border width (Card only)	Adjust border thickness (0–3 px).
Border opacity (Card only)	Control border transparency (0–100%).
Border radius (Card only)	Round card corners (0–20 px).

Video

The **Video block** allows you to embed videos from both uploaded files and external URLs (such as YouTube or Vimeo). #### ⚙️ **Block settings**

Setting	Description
Source	Select the video source: Uploaded or External URL.
Video	Upload a video file (if Source is set to Uploaded).
Video URL	Provide a link to a YouTube or Vimeo video (if Source is set to External URL).
Video autoplay	Enable autoplay for the video. When enabled, the video starts automatically when the page loads. ⚠️ This feature may be affected by certain browser and device settings.
Video loop	Enable looping, so the video will restart automatically once it finishes playing.
Cover image	Upload an image to display as a thumbnail or placeholder for the video, visible before the video starts (only if using URL source and Autoplay is off).
Alt text	Add alt text for accessibility purposes, describing the video content (only if using URL source).
Aspect ratio	Set the aspect ratio for the video.
Width	Set the width of the video.
Borders	Choose whether to apply borders around the video.

#### 💡 Best practices * **Aspect ratio**: When embedding videos, the **16:9** ratio works well for most landscape videos, especially from platforms like YouTube and Vimeo. If you're showcasing a square video, **1:1** is a good choice. * **Borders**: Applying **borders** can help frame the video content and make it stand out more on the page. If your video content is minimalist, a **solid border** with a subtle color might enhance the look without being too distracting.

Countdown timer

The **Countdown timer block** displays a ticking timer that counts down to a specific date or resets automatically after a chosen duration. {% hint style="success" %} * **Evergreen type** resets automatically after each duration. * **Fixed-time type** ends at the selected date/time and stays at “00:00:00” after completion. * Timers are fully responsive and adapt their layout across devices. {% endhint %} #### ⚙️ **Block settings** | Setting | Description | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Type** |

Select countdown type:
• Evergreen — loops repeatedly based on duration.
• Fixed time — ends at a specific date and time.

Choose layout appearance:
• Standard — clean, minimal digits.

• Card — bold digits with background boxes.

| | **Number preset** | Select typography style for countdown numbers. | | **Inherit color scheme** | Use the section’s default color scheme. Disable to customize number colors manually. | | **Number color** *(Visible if not inheriting)* | Choose the color of the countdown digits. | | **Number background color** *(Card style only)* | Set background color for the number boxes. | #### 💡 **Pro tips** * Use **Evergreen timers** for recurring deals or automated marketing cycles. * Set **custom number colors** when your section uses contrasting backgrounds. * Place the countdown near a **CTA button** to maximize urgency-driven clicks.

Countdown timer: Icon with text

The **Countdown timer: Icon with text** block helps you display a timer with a short message or icon to highlight urgency — perfect for flash sales, product launches, or limited-time offers. #### ⚙️ **Block settings** | Setting | Description | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Width** | Choose whether the block fits its content or stretches to fill available space. | | **Icon** |

Select an icon from the theme’s icon set.

Select layout style:
• Standard — clean layout without background.

• Card — framed design with background and borders.

| | **Inherit color scheme** *(Card only)* | Use the parent section’s color scheme. Disable to apply a custom scheme. | | **Border** *(Card only)* | Choose border type (`None` or `Solid`). | | **Border width** *(Card only)* | Adjust border thickness (in px). | | **Border opacity** *(Card only)* | Control border transparency (0–100%). | | **Border radius** *(Card only)* | Round the card’s corners (0–20px). | #### 🧩 **Nested content** This block includes a built-in **Countdown timer** block inside it. You can customize the nested timer independently. *Learn more:* [#countdown-timer](#countdown-timer "mention")

Article card

Setting	Description
Article	Select which blog post to display. See how to add blog posts
Layout type	Choose how the card is displayed: • `Overlay` — text on top of the article image. • `Vertical` — image above text (column layout). • `Horizontal` — image beside text (row layout).
Image ratio	Adjust the article image ratio separately for desktop and mobile.
Text alignment	Align text content (`Left`, `Center`, or `Right`).
Show tags	Display article tags as badges on the blog's image.
Show date	Show the article’s publish date.
Show author	Display the article author’s name.
Show button	Include a “Read more” button linking to the full article.

Divider

The **Divider block** adds horizontal spacing and a customizable line between elements. It’s ideal for breaking up long layouts, organizing grouped content, or improving visual hierarchy in your sections. #### ⚙️ **Block settings**

Setting	Description
Thickness	Controls the divider line’s weight (0.5 px – 5 px). Thicker lines create stronger separation.
Length	Adjusts how wide the divider spans (5% – 100% of container width).
Disable on mobile	Hides the divider on mobile devices for cleaner vertical layouts.
Device	Toggle between adjusting padding for `Desktop` or `Mobile`.
Padding top / bottom	Add vertical space before and after the divider. Separate controls for desktop and mobile.

#### 💡 **Pro tips** * Keep **thin (1 px)** dividers for minimalist designs — thicker lines can feel heavy. * Turn off the divider on mobile for shorter, more fluid page layouts. * Combine with **subtle background colors** or color-scheme changes to highlight section transitions.