> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Card Callout
> Centered callout card section for announcements, promotions, or key messages
## What It Does
The **Card Callout** section creates a visually distinct, centered card perfect for highlighting important messages, announcements, promotions, or calls-to-action. The card stands out from regular content with elevated styling, drawing attention to your key message.
## Getting Started
Add the Card Callout section to any template where you want a prominent, standalone message
Add a title and supporting content text for your callout
Set button text and URL to direct customers to a specific action or page
Choose section width (Narrower, Page, Narrow, or Fullwidth) based on design preference
## Settings
**Type:** Text field\
**Default:** "Callout title text"
Main heading displayed prominently on the callout card. Should be concise and attention-grabbing.
**Examples by Use Case:**
**Promotion:**
* "Limited Time: 25% Off Sitewide"
* "Spring Sale Ends Sunday"
* "Free Shipping Over \$50"
**Announcement:**
* "We've Moved!"
* "New Collection Dropping Friday"
* "Holiday Hours: Dec 24-26"
**Value Proposition:**
* "100% Organic Materials"
* "Handcrafted in Portland"
* "30-Day Money-Back Guarantee"
**Call-to-Action:**
* "Not Sure What to Buy?"
* "Looking for a Gift?"
* "Want 10% Off Your First Order?"
**Best practices:**
* **Keep short:** 3-8 words ideal (longer titles may wrap awkwardly)
* **Front-load value:** Put key benefit first ("Free Shipping" not "Get Free Shipping")
* **Create urgency:** Use time-sensitive language when appropriate
* **Be specific:** "25% Off" beats "Big Sale"
**Type:** Textarea\
**Default:** "Callout content text"
Supporting text below the title. Provides additional context, details, or persuasive copy to complement the headline.
**Content Guidelines:**
**Length:**
* **Minimum:** 10-20 words (too short feels incomplete)
* **Optimal:** 20-40 words (1-2 sentences, easily scannable)
* **Maximum:** 60 words (longer text diminishes "callout" impact)
**Tone by Purpose:**
**Promotional:**
* "Use code SPRING25 at checkout. Offer valid through Sunday, April 30. Cannot be combined with other discounts."
**Informational:**
* "Our team will be offline December 24-26 for the holidays. Orders placed during this time will ship starting December 27."
**Value-driven:**
* "Every product is handmade in our Portland studio using sustainably-sourced organic materials. Quality you can feel, values you can trust."
**Action-oriented:**
* "Take our 2-minute quiz and we'll recommend the perfect products for your needs. Free shipping on all quiz orders!"
**Best practices:**
* **Complement title:** Don't repeat title verbatim; expand on it
* **Add specifics:** Include dates, codes, conditions the title doesn't cover
* **End with benefit:** Last sentence should reinforce value ("Ships same-day!")
* **Keep scannable:** Short sentences, clear language
**Type:** Text field\
**Default:** "Button text"
Label for the call-to-action button. Should be action-oriented and clearly indicate what happens when clicked.
**Effective Button Text Examples:**
**Shopping Actions:**
* "Shop Now"
* "Shop the Sale"
* "Browse Collection"
* "View Products"
* "Start Shopping"
**Information Actions:**
* "Learn More"
* "Read Details"
* "See Our Story"
* "Get Answers"
**Interactive Actions:**
* "Take the Quiz"
* "Contact Us"
* "Get Started"
* "Sign Up"
**Urgency Actions:**
* "Claim Offer"
* "Get 25% Off"
* "Don't Miss Out"
**Best practices:**
* **Use verbs:** Start with action words (Shop, Browse, Claim, Get)
* **Be specific:** "Shop Spring Sale" beats generic "Click Here"
* **Create urgency:** "Claim Offer" implies scarcity more than "Learn More"
* **Match title tone:** Playful titles need playful buttons, serious titles need serious buttons
* **Keep short:** 1-3 words ideal, 4-5 words maximum
**Avoid:**
* Generic "Click Here" or "Submit" (no context)
* Overly long "Browse Our Entire Collection of Products" (too wordy)
* Confusing "Maybe Later" or "Skip" (negative/ambiguous actions)
**Type:** URL field\
**Default:** "/" (homepage)
Destination page when customers click the button. Can link to any page on your site or external URLs.
**Common Link Destinations:**
**Collections:**
* `/collections/sale` - Sale collection
* `/collections/new-arrivals` - New products
* `/collections/best-sellers` - Popular products
* `/collections/all` - All products
**Pages:**
* `/pages/about` - About page
* `/pages/contact` - Contact form
* `/pages/shipping` - Shipping policy
* `/pages/quiz` - Custom quiz page
**Products:**
* `/products/product-handle` - Specific product
* Useful for featured product promotions
**Blog:**
* `/blogs/news` - Blog homepage
* `/blogs/news/article-title` - Specific article
**Cart/Discount:**
* `/cart` - Cart page
* `/discount/CODENAME` - Auto-apply discount code
**External:**
* `https://yourapp.com/quiz` - External quiz platform
* `https://instagram.com/yourstore` - Social media
**Best practices:**
* **Test links:** Verify URLs work before publishing
* **Use relative paths:** `/collections/sale` instead of full URL when possible
* **Match button text:** If button says "Shop Sale", link to sale collection
* **Consider mobile:** Ensure destination is mobile-friendly
**Type:** Select dropdown\
**Options:** Narrower, Page, Narrow, Fullwidth\
**Default:** Narrower (container--sm)
Controls the maximum width of the callout card, affecting how prominent and spacious it appears.
### Width Options
**Narrower (container--sm)** ← **Default**
* **Max width:** \~600-700px
* **Use when:** Short, punchy messages (promotional callouts, single CTAs)
* **Effect:** Very focused, card "floats" prominently in center with significant whitespace
* **Best for:**
* "Free Shipping Over \$50" promotions
* Single-sentence announcements
* Minimalist designs
* Mobile-optimized layouts (minimal horizontal scrolling concern)
**Page (container--default)**
* **Max width:** \~1000-1200px
* **Use when:** Moderate content length, balanced between focus and readability
* **Effect:** Card doesn't feel cramped but maintains focus
* **Best for:**
* 2-3 sentence content
* Value propositions with detail
* Standard informational callouts
**Narrow (container--md)**
* **Max width:** \~1400px
* **Use when:** Longer content that needs breathing room
* **Effect:** Wider card, content has more horizontal space
* **Best for:**
* Announcements with multiple details
* Callouts with longer explanatory text
* When adjacent to other fullwidth sections (maintain consistency)
**Fullwidth (container--fullwidth)**
* **Max width:** Full page width (minus page margins)
* **Use when:** Want maximum visual impact and horizontal space
* **Effect:** Card spans nearly entire page, very prominent
* **Best for:**
* Homepage hero-style callouts
* Bold promotional banners
* When you need maximum horizontal content space
* Below fullwidth sections (visual consistency)
### Choosing the Right Width
**Consider content length:**
* **Short title + 1 sentence:** Narrower or Page
* **Title + 2-3 sentences:** Page or Narrow
* **Title + 3+ sentences:** Narrow or Fullwidth
**Consider page layout:**
* **Standalone section:** Narrower (creates strong focal point)
* **Between narrow sections:** Narrower or Page (match adjacent widths)
* **Between fullwidth sections:** Narrow or Fullwidth (maintain visual rhythm)
**Consider aesthetic:**
* **Minimalist:** Narrower (emphasizes whitespace)
* **Balanced:** Page or Narrow (standard layouts)
* **Bold:** Fullwidth (maximum impact)
**Mobile behavior:** All widths become full-screen on mobile (minus margins), so width choice primarily affects desktop appearance.
## Best practices
Callouts lose impact if too wordy. Aim for short title (under 8 words) and brief content (1-3 sentences). Length defeats "callout" purpose.
Place callouts where they add value without disrupting flow: between major page sections, above footer, or after key content. Avoid mid-paragraph breaks.
Don't use multiple callout cards on one page—dilutes attention. Use one prominent callout, or space multiple callouts far apart (different page sections).
Button text and URL must align logically. "Shop Sale" should link to sale collection, not homepage. Mismatched CTAs confuse customers.
Time-sensitive callouts ("Ends Sunday") drive action but must be accurate. Update or remove expired promotions immediately to maintain trust.
If your page has multiple sections with specific widths (narrow, fullwidth), choose callout width that matches adjacent sections for visual cohesion.
Focus on customer benefits ("Free Shipping", "30-Day Returns") rather than features ("We offer shipping", "Returns available"). Benefits drive action.
Callouts are often viewed on mobile. Ensure text is readable at mobile sizes and button is easily tappable (not too small or close to other elements).
## Common Use Cases
### Free Shipping Promotion
**Settings:**
* Title: "Free Shipping Over \$50"
* Content: "Add \$50 to your cart and get free standard shipping to the continental US. No code needed—discount applies automatically at checkout."
* Button text: "Shop Now"
* Button URL: `/collections/all`
* Section width: Narrower
**Best for:** E-commerce sites wanting to increase average order value with free shipping threshold
### Limited-Time Sale
**Settings:**
* Title: "Spring Sale: 25% Off Ends Sunday"
* Content: "Use code SPRING25 at checkout. Offer valid through April 30. Cannot be combined with other discounts."
* Button text: "Shop the Sale"
* Button URL: `/collections/sale`
* Section width: Page
**Best for:** Seasonal promotions, holiday sales, clearance events
### Business Announcement
**Settings:**
* Title: "We've Moved to a Bigger Space!"
* Content: "Visit us at our new location: 123 Main Street, Portland. Same team, same quality, more room for you. Stop by for a grand opening celebration May 1-7."
* Button text: "Get Directions"
* Button URL: `/pages/contact` (page with map/address)
* Section width: Narrow
**Best for:** Physical retailers announcing location changes, events, or milestones
### Value Proposition Callout
**Settings:**
* Title: "Handcrafted with Care"
* Content: "Every piece is made-to-order in our Portland studio using sustainably-sourced materials. We never cut corners, and we never compromise on quality."
* Button text: "Our Story"
* Button URL: `/pages/about`
* Section width: Page
**Best for:** Artisan brands, sustainable products, craft-focused businesses
### Interactive Quiz CTA
**Settings:**
* Title: "Not Sure What to Order?"
* Content: "Take our 2-minute quiz and we'll recommend the perfect products for your needs. Plus, get 10% off your first quiz order!"
* Button text: "Take the Quiz"
* Button URL: `/pages/quiz` or external quiz app URL
* Section width: Narrower
**Best for:** Stores with complex product lines, personalized products, or quiz apps
### Holiday Hours
**Settings:**
* Title: "Holiday Hours: Dec 24-26"
* Content: "Our team will be offline December 24-26 celebrating with family. Orders placed during this time will ship starting December 27. Happy holidays!"
* Button text: "Contact Us"
* Button URL: `/pages/contact`
* Section width: Page
**Best for:** Seasonal closures, holiday schedules, temporary service changes
## Layout Behavior
### Desktop Layout (1200px+)
The callout card displays as a **centered, elevated card**:
* **Card styling:** Subtle background, border, or shadow (depends on theme design)
* **Text alignment:** Center-aligned (title, content, button all centered)
* **Width:** Constrained by Section Width setting (Narrower to Fullwidth)
* **Spacing:** Significant whitespace around card creates "floating" effect
**Visual hierarchy:**
1. Title (large, bold)
2. Content (medium, regular weight)
3. Button (prominent, theme button styling)
### Mobile Layout (Under 768px)
On mobile, the card adjusts:
* **Full-width:** Card spans mobile screen (minus standard margins)
* **All width options behave similarly** on mobile (no horizontal space for width variation)
* **Stacked content:** Title, content, button stack vertically
* **Touch-optimized:** Button sized for easy tapping (minimum 44px tap target)
**Mobile spacing:** Padding/margins reduce to prevent card from feeling cramped on small screens.
### Card Design Elements
The callout card typically includes:
* **Background:** Light background color or subtle pattern (distinguishes from page background)
* **Border/Shadow:** Subtle border or drop shadow for elevation effect
* **Padding:** Generous internal padding around content (prevents text from touching edges)
* **Button:** Styled with theme's primary button colors
**Theme variation:** Exact card appearance depends on theme's design system. Some themes use bold shadows, others use subtle borders.
### Responsive Breakpoints
The section adapts across three responsive ranges:
* **Desktop (1200px+):** Full section width variation visible, generous spacing
* **Tablet (768px - 1199px):** Moderate width, balanced spacing
* **Mobile (under 768px):** Full-width cards, compressed spacing
## Related Sections
* **[Newsletter](/themes/mojave/newsletter)** - Alternative CTA for email signups (more specific than general callout)
* **[Banner Fullwidth](/themes/mojave/banner-fullwidth)** - Fullwidth banner with image (more visual than card callout)
* **[Rich Text](/themes/mojave/richtext)** - For longer announcements or informational content without card styling
* **[Countdown Timer](/themes/mojave/countdown-timer)** - Add urgency to time-sensitive callouts with countdown
## Technical Notes
### Center Alignment
The Card Callout section uses **CSS center alignment** for all content:
* `text-align: center` on title and content
* `margin: 0 auto` on button (centered within card)
* `display: flex` with `justify-content: center` for overall card positioning
This creates consistent, symmetrical presentation regardless of content length.
### Section Width Implementation
Width options use CSS classes:
* `container--sm`: \~600-700px max-width
* `container--default`: \~1000-1200px max-width
* `container--md`: \~1400px max-width
* `container--fullwidth`: Full width (no max-width constraint)
These classes apply `max-width` values and `margin: 0 auto` for centering when below max-width.
### Responsive Behavior
The card uses CSS media queries to adjust:
```css theme={null}
@media (max-width: 768px) {
.card-callout {
padding: 20px; /* Reduce padding on mobile */
margin: 15px; /* Reduce margins */
}
}
```
Mobile breakpoints ensure card doesn't feel cramped or excessively padded on small screens.
### Button Styling
The button inherits theme's button styles:
* Colors from theme settings (primary button color)
* Hover effects (color change, shadow, transform)
* Font sizing and weight from theme typography
* Border radius from theme's button radius setting
**Customization:** To change button appearance beyond theme settings, use theme's custom CSS.
### Text Overflow Handling
**Long titles:**
* Automatically wrap to multiple lines if needed
* No character limit enforced (but readability suffers past \~12 words)
* Font size doesn't reduce (maintains readability)
**Long content:**
* Wraps naturally within card width
* No truncation (all text displays)
* Consider visual balance—very long content makes card too tall
**Best practice:** Keep content concise to avoid excessive card height.
### Accessibility Features
The section includes accessibility considerations:
* **Semantic HTML:** Card uses `` element
* **Heading hierarchy:** Title uses appropriate heading level
* **Button accessibility:** Button is keyboard-navigable with focus styles
* **ARIA labels:** Button includes descriptive label (button text)
* **Color contrast:** Theme ensures sufficient contrast for readability
**Screen readers:** Announce title, content, and button sequentially, providing complete context before action option.
### Performance
The Card Callout section has minimal performance impact:
* **No images:** Pure text/button (fast loading)
* **Minimal HTML:** Simple DOM structure
* **CSS-only styling:** No JavaScript dependencies
* **Fast render:** Displays immediately (no data fetching or delays)
**Mobile performance:** Lightweight design ensures fast loading on slow connections.
## Troubleshooting
**Button not clickable/not working:**
* Verify Button URL is set (check it's not empty)
* Test URL directly in browser address bar (ensure it's valid)
* Check for typos in URL (extra spaces, missing slashes)
* Ensure URL starts with `/` for internal links or `https://` for external
**Card looks cut off or too wide:**
* Check Section Width setting (try different width options)
* Preview on actual screen size (editor may not show exact breakpoints)
* If issue persists on mobile, may be theme CSS issue (contact theme support)
**Text is hard to read (poor contrast):**
* Card background/text colors controlled by theme settings
* Try changing theme's color scheme (Theme settings > Colors)
* For specific fixes, use custom CSS (requires theme code editing)
**CTA button text truncated:**
* Keep button text short (1-4 words ideal)
* Check mobile preview (longer text may wrap awkwardly on small screens)
* Rephrase button with shorter synonym ("Shop Now" vs "Browse Full Collection")
**Card appears multiple times or in wrong location:**
* Check you haven't added same section multiple times to template
* Verify you're editing correct template (Home vs Page vs Product)
* Remove duplicate sections if found
**Changes not saving:**
* Click "Save" in theme customizer before exiting
* Hard refresh browser (Cmd/Ctrl + Shift + R) to clear cache
* Check you're editing live theme (not draft theme)
* Try incognito/private window to rule out cache issues
**Section doesn't stand out visually:**
* Relies on theme's card styling (some themes have subtle card designs)
* Check theme settings for card shadow/border options
* Consider using Banner Fullwidth section if you need more visual impact
* For custom styling, add CSS (requires theme code editing)