Spencer
f57034e40d
Sections: - Add announcement-bar, cards, features-3col-cards, hero-card-homepage, hero-card-page, hero-slider - Rename content-image-right → content-image (image-left layout, better mobile stacking) Design system: - Add cards-grid global class (flex-wrap for fluid wrapping card grids) - Update feature-card with responsive _widthMax constraints (33%/50%/95%) - Document Bricks Style Manager spacing setup in design.md Headers: - Fix header-with-cta mobile hamburger positioning — wrap nav+button in block element with row-reverse on mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
18 lines
5.4 KiB
JSON
18 lines
5.4 KiB
JSON
{
|
|
"title": "BCW — Hero Slider",
|
|
"type": "section",
|
|
"templateType": "section",
|
|
"content": [
|
|
{
|
|
"id": "cod001",
|
|
"name": "code",
|
|
"parent": 0,
|
|
"children": [],
|
|
"settings": {
|
|
"code": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css\">\n\n<style>\n .bcw-hero-slider {\n width: 100%;\n }\n\n .bcw-hero-slider .swiper-slide {\n background-image: var(--bg-desktop);\n background-size: cover;\n background-position: center;\n min-height: 600px;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .bcw-hero-slider .swiper-slide {\n background-image: var(--bg-mobile);\n min-height: 420px;\n }\n }\n\n .bcw-hero-card {\n width: 50%;\n margin-left: 5%;\n background: rgba(255, 255, 255, 0.88);\n padding: var(--space-lg);\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n }\n\n @media (max-width: 767px) {\n .bcw-hero-card {\n width: 90%;\n margin-left: 5%;\n }\n }\n\n .bcw-hero-eyebrow {\n color: var(--color-primary);\n font-size: var(--text-sm);\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n }\n\n .bcw-hero-card h1 {\n font-size: var(--h1);\n color: var(--color-heading);\n margin: 0;\n line-height: 1.15;\n }\n\n .bcw-hero-card p {\n font-size: var(--text-base);\n color: var(--color-text);\n margin: 0;\n }\n\n .bcw-hero-buttons {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--space-sm);\n }\n\n .bcw-btn-primary {\n display: inline-block;\n background: var(--color-primary);\n color: var(--color-white);\n padding: 12px 24px;\n font-weight: 600;\n text-decoration: none;\n }\n\n .bcw-btn-primary:hover {\n background: var(--color-primary-dark);\n color: var(--color-white);\n }\n\n .bcw-btn-outline {\n display: inline-block;\n background: transparent;\n color: var(--color-primary);\n border: 2px solid var(--color-primary);\n padding: 10px 24px;\n font-weight: 600;\n text-decoration: none;\n }\n\n .bcw-btn-outline:hover {\n background: var(--color-primary);\n color: var(--color-white);\n }\n\n .bcw-hero-slider .swiper-button-prev,\n .bcw-hero-slider .swiper-button-next {\n color: var(--color-white);\n }\n\n .bcw-hero-slider .swiper-pagination-bullet-active {\n background: var(--color-primary);\n }\n</style>\n\n<div class=\"bcw-hero-slider swiper\">\n <div class=\"swiper-wrapper\">\n\n <!-- Slide 1 -->\n <!-- Desktop image: 1400x700, Mobile image: 700x900 (portrait crop) -->\n <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=1'); --bg-mobile: url('https://picsum.photos/700/900?random=1')\">\n <div class=\"bcw-hero-card\">\n <span class=\"bcw-hero-eyebrow\">Your Eyebrow Label</span>\n <h1>Your Hero Headline Goes Here</h1>\n <p>Supporting text that describes your offer or value proposition. Keep it concise and benefit-focused.</p>\n <div class=\"bcw-hero-buttons\">\n <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 2 -->\n <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=2'); --bg-mobile: url('https://picsum.photos/700/900?random=2')\">\n <div class=\"bcw-hero-card\">\n <span class=\"bcw-hero-eyebrow\">Second Slide Label</span>\n <h1>Another Compelling Headline</h1>\n <p>Each slide carries its own message, image, and call to action. Replace this with your content.</p>\n <div class=\"bcw-hero-buttons\">\n <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n </div>\n </div>\n </div>\n\n <!-- Slide 3 -->\n <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=3'); --bg-mobile: url('https://picsum.photos/700/900?random=3')\">\n <div class=\"bcw-hero-card\">\n <span class=\"bcw-hero-eyebrow\">Third Slide Label</span>\n <h1>Keep Your Message Clear and Focused</h1>\n <p>Duplicate or remove slides as needed. Swap the URLs in the style attribute for desktop and mobile images.</p>\n <div class=\"bcw-hero-buttons\">\n <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n </div>\n </div>\n </div>\n\n </div>\n\n <div class=\"swiper-button-prev\"></div>\n <div class=\"swiper-button-next\"></div>\n <div class=\"swiper-pagination\"></div>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js\"></script>\n<script>\n (function () {\n var el = document.currentScript.closest('.brxe-code').querySelector('.bcw-hero-slider');\n new Swiper(el, {\n loop: true,\n autoplay: {\n delay: 5000,\n disableOnInteraction: false\n },\n navigation: {\n nextEl: el.querySelector('.swiper-button-next'),\n prevEl: el.querySelector('.swiper-button-prev')\n },\n pagination: {\n el: el.querySelector('.swiper-pagination'),\n clickable: true\n }\n });\n })();\n</script>"
|
|
},
|
|
"label": "Hero Slider"
|
|
}
|
|
]
|
|
}
|