artanis/Bricks-Sections
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new sections, update design system, fix header mobile layout

Browse Source 
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>
This commit is contained in:
Spencer
2026-03-10 18:15:23 -05:00
parent 7f538a0132
commit f57034e40d
16 changed files with 1047 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
sections/announcement-bar.json Normal file
View File

@@ -0,0 +1,134 @@
{
"title": "BCW — Announcement Bar",
"type": "section",
"templateType": "section",
"content": [
{
"id": "sec001",
"name": "section",
"parent": 0,
"children": ["con001"],
"settings": {
"_background": {
"color": {
"raw": "var(--color-primary-dark)"
}
},
"_typography": {
"color": {
"raw": "var(--color-white)"
},
"font-size": "12",
"font-weight": "600"
},
"_padding": {
"top": "10",
"bottom": "10"
}
},
"label": "Announcement Bar"
},
{
"id": "con001",
"name": "container",
"parent": "sec001",
"children": ["blk001", "blk002"],
"settings": {
"_direction": "row",
"_justifyContent": "space-between",
"_direction:mobile_portrait": "column",
"_alignItems:mobile_portrait": "center"
}
},
{
"id": "blk001",
"name": "block",
"parent": "con001",
"children": ["ico001", "txt001"],
"settings": {
"_direction": "row",
"_justifyContent": "flex-start",
"_justifyContent:mobile_portrait": "center",
"_width": "max-content",
"_alignItems": "center"
},
"label": "Left Info"
},
{
"id": "ico001",
"name": "icon",
"parent": "blk001",
"children": [],
"settings": {
"icon": {
"library": "themify",
"icon": "ti-location-pin"
},
"iconSize": "24px",
"_padding": {
"right": "10"
},
"_typography": {
"font-size": "22"
}
}
},
{
"id": "txt001",
"name": "text-basic",
"parent": "blk001",
"children": [],
"settings": {
"text": "123 Your Street, City, State ZIP",
"_typography": {
"font-size": "13"
}
}
},
{
"id": "blk002",
"name": "block",
"parent": "con001",
"children": ["ico002", "txt002"],
"settings": {
"_direction": "row",
"_justifyContent": "flex-end",
"_justifyContent:mobile_portrait": "center",
"_width": "max-content",
"_alignItems": "center"
},
"label": "Right Info"
},
{
"id": "ico002",
"name": "icon",
"parent": "blk002",
"children": [],
"settings": {
"icon": {
"library": "themify",
"icon": "ti-headphone"
},
"iconSize": "24px",
"_padding": {
"right": "10"
},
"_typography": {
"font-size": "22"
}
}
},
{
"id": "txt002",
"name": "text-basic",
"parent": "blk002",
"children": [],
"settings": {
"text": "Tel: +1 000-000-0000",
"_typography": {
"font-size": "13"
}
}
}
]
}

278
sections/cards.json Normal file
View File

@@ -0,0 +1,278 @@
{
"title": "BCW — Cards",
"type": "section",
"templateType": "section",
"global_classes": [
{
"id": "cards-grid",
"name": "cards-grid",
"settings": {
"_direction": "row",
"_flexWrap": "wrap",
"_alignItems": "stretch",
"_gap": "var(--col-gap)"
},
"modified": 1773187200,
"user_id": 2
},
{
"id": "feature-card",
"name": "feature-card",
"settings": {
"_background": {
"color": {
"raw": "var(--color-bg-alt)"
}
},
"_padding": {
"top": "var(--space-md)",
"right": "var(--space-md)",
"bottom": "var(--space-md)",
"left": "var(--space-md)"
},
"_border": {
"radius": {
"top": "8px",
"right": "8px",
"bottom": "8px",
"left": "8px"
}
},
"_rowGap": "var(--row-gap)",
"_widthMax": "33%",
"_widthMax:mobile_landscape": "50%",
"_widthMax:mobile_portrait": "95%"
},
"modified": 1773187200,
"user_id": 2
}
],
"content": [
{
"id": "sec001",
"name": "container",
"parent": 0,
"children": ["con001", "con002"],
"settings": {
"_direction": "column",
"_gap": "40px",
"_margin": {
"top": "var(--space-lg)",
"bottom": "var(--space-lg)"
},
"_padding:mobile_portrait": {
"left": "15px",
"right": "15px"
}
},
"label": "Cards Section"
},
{
"id": "con001",
"name": "container",
"parent": "sec001",
"children": ["hdg001", "txt001"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_gap": "16px"
},
"label": "Section Header"
},
{
"id": "hdg001",
"name": "heading",
"parent": "con001",
"children": [],
"settings": {
"tag": "h2",
"text": "Section Heading"
}
},
{
"id": "txt001",
"name": "text-basic",
"parent": "con001",
"children": [],
"settings": {
"text": "A brief supporting statement that introduces this section to your visitors."
}
},
{
"id": "con002",
"name": "container",
"parent": "sec001",
"children": ["con003", "con004", "con005", "con006"],
"settings": {
"_cssGlobalClasses": ["cards-grid"],
"_rowGap": "var(--row-gap)",
"_columnGap": "var(--col-gap)",
"_padding:tablet_portrait": {
"left": "15",
"right": "15"
}
},
"label": "Cards Grid"
},
{
"id": "con003",
"name": "container",
"parent": "con002",
"children": ["ico001", "hdg002", "txt002"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_flexBasis": "280px",
"_flexGrow": "1",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Card One"
},
{
"id": "ico001",
"name": "icon",
"parent": "con003",
"children": [],
"settings": []
},
{
"id": "hdg002",
"name": "heading",
"parent": "con003",
"children": [],
"settings": {
"tag": "h3",
"text": "Card One"
}
},
{
"id": "txt002",
"name": "text-basic",
"parent": "con003",
"children": [],
"settings": {
"text": "Describe this item in one to three short sentences."
}
},
{
"id": "con004",
"name": "container",
"parent": "con002",
"children": ["ico002", "hdg003", "txt003"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_flexBasis": "280px",
"_flexGrow": "1",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Card Two"
},
{
"id": "ico002",
"name": "icon",
"parent": "con004",
"children": [],
"settings": []
},
{
"id": "hdg003",
"name": "heading",
"parent": "con004",
"children": [],
"settings": {
"tag": "h3",
"text": "Card Two"
}
},
{
"id": "txt003",
"name": "text-basic",
"parent": "con004",
"children": [],
"settings": {
"text": "Describe this item in one to three short sentences."
}
},
{
"id": "con005",
"name": "container",
"parent": "con002",
"children": ["ico003", "hdg004", "txt004"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_flexBasis": "280px",
"_flexGrow": "1",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Card Three"
},
{
"id": "ico003",
"name": "icon",
"parent": "con005",
"children": [],
"settings": []
},
{
"id": "hdg004",
"name": "heading",
"parent": "con005",
"children": [],
"settings": {
"tag": "h3",
"text": "Card Three"
}
},
{
"id": "txt004",
"name": "text-basic",
"parent": "con005",
"children": [],
"settings": {
"text": "Describe this item in one to three short sentences."
}
},
{
"id": "con006",
"name": "container",
"parent": "con002",
"children": ["ico004", "hdg005", "txt005"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_flexBasis": "280px",
"_flexGrow": "1",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Card Four"
},
{
"id": "ico004",
"name": "icon",
"parent": "con006",
"children": [],
"settings": []
},
{
"id": "hdg005",
"name": "heading",
"parent": "con006",
"children": [],
"settings": {
"tag": "h3",
"text": "Card Four"
}
},
{
"id": "txt005",
"name": "text-basic",
"parent": "con006",
"children": [],
"settings": {
"text": "Describe this item in one to three short sentences."
}
}
]
}

82
sections/content-image-right.json → sections/content-image.json
View File

@@ -1,5 +1,5 @@
{
"title": "BCW — Content Image Right",
"title": "BCW — Content Image",
"type": "section",
"templateType": "section",
"content": [
@@ -7,7 +7,7 @@
"id": "con001",
"name": "container",
"parent": 0,
"children": ["con002", "imgcol"],
"children": ["imgcol", "con002"],
"settings": {
"_direction": "row",
"_alignItems": "center",
@@ -16,9 +16,49 @@
"_margin": {
"top": "15",
"bottom": "15"
},
"_columnGap": "var(--col-gap)",
"_rowGap": "var(--row-gap)",
"_padding:tablet_portrait": {
"left": "15",
"right": "15"
},
"_padding:mobile_landscape": {
"left": "0",
"right": "0"
}
},
"label": "Content Image Right"
"label": "Content Image"
},
{
"id": "imgcol",
"name": "container",
"parent": "con001",
"children": ["img001"],
"settings": {
"_direction": "row",
"_alignItems": "center",
"_justifyContent": "center",
"_gap": "24px",
"_width": "50%",
"_width:mobile_landscape": "100%"
},
"label": "Image Column"
},
{
"id": "img001",
"name": "image",
"parent": "imgcol",
"children": [],
"settings": {
"_width": "100%",
"image": {
"url": "https://picsum.photos/600",
"external": true,
"filename": "600"
}
},
"label": "Section Image"
},
{
"id": "con002",
@@ -30,7 +70,12 @@
"_alignItems": "flex-start",
"_gap": "24px",
"_width": "50%",
"_rowGap": "15"
"_rowGap": "var(--row-gap)",
"_width:mobile_landscape": "100%",
"_padding:mobile_landscape": {
"left": "15",
"right": "15"
}
},
"label": "Text Column"
},
@@ -62,35 +107,6 @@
"text": "Learn More",
"style": "primary"
}
},
{
"id": "imgcol",
"name": "container",
"parent": "con001",
"children": ["img001"],
"settings": {
"_direction": "row",
"_alignItems": "center",
"_justifyContent": "center",
"_gap": "24px",
"_width": "50%"
},
"label": "Image Column"
},
{
"id": "img001",
"name": "image",
"parent": "imgcol",
"children": [],
"settings": {
"_width": "100%",
"image": {
"url": "https://picsum.photos/600",
"external": true,
"filename": "600"
}
},
"label": "Section Image"
}
]
}

218
sections/features-3col-cards.json Normal file
View File

@@ -0,0 +1,218 @@
{
"title": "BCW — Features 3 Column Cards",
"type": "section",
"templateType": "section",
"global_classes": [
{
"id": "feature-card",
"name": "feature-card",
"settings": {
"_background": {
"color": {
"raw": "var(--color-bg-alt)"
}
},
"_padding": {
"top": "var(--space-md)",
"right": "var(--space-md)",
"bottom": "var(--space-md)",
"left": "var(--space-md)"
},
"_border": {
"radius": {
"top": "8px",
"right": "8px",
"bottom": "8px",
"left": "8px"
}
}
},
"modified": 1741478400,
"user_id": 2
}
],
"content": [
{
"id": "sec001",
"name": "container",
"parent": 0,
"children": ["con001", "con002"],
"settings": {
"_direction": "column",
"_gap": "40px",
"_margin": {
"top": "15",
"bottom": "15"
},
"_padding:mobile_portrait": {
"left": "15px",
"right": "15px"
}
},
"label": "Features 3 Column Cards"
},
{
"id": "con001",
"name": "container",
"parent": "sec001",
"children": ["hdg001", "txt001"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_gap": "16px"
},
"label": "Section Header"
},
{
"id": "hdg001",
"name": "heading",
"parent": "con001",
"children": [],
"settings": {
"tag": "h2",
"text": "Why Choose Us"
}
},
{
"id": "txt001",
"name": "text-basic",
"parent": "con001",
"children": [],
"settings": {
"text": "A brief supporting statement that introduces this section to your visitors."
}
},
{
"id": "con002",
"name": "container",
"parent": "sec001",
"children": ["con003", "con004", "con005"],
"settings": {
"_direction": "row",
"_alignItems": "stretch",
"_justifyContent": "center",
"_gap": "32px",
"_columnGap": "var(--col-gap)",
"_rowGap:mobile_portrait": "var(--row-gap)"
},
"label": "Features Row"
},
{
"id": "con003",
"name": "container",
"parent": "con002",
"children": ["ico001", "hdg002", "txt002"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_gap": "15px",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Feature One"
},
{
"id": "ico001",
"name": "icon",
"parent": "con003",
"children": [],
"settings": []
},
{
"id": "hdg002",
"name": "heading",
"parent": "con003",
"children": [],
"settings": {
"tag": "h3",
"text": "Feature One"
}
},
{
"id": "txt002",
"name": "text-basic",
"parent": "con003",
"children": [],
"settings": {
"text": "Describe this feature or benefit in one to three short sentences."
}
},
{
"id": "con004",
"name": "container",
"parent": "con002",
"children": ["ico002", "hdg003", "txt003"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_gap": "15px",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Feature Two"
},
{
"id": "ico002",
"name": "icon",
"parent": "con004",
"children": [],
"settings": []
},
{
"id": "hdg003",
"name": "heading",
"parent": "con004",
"children": [],
"settings": {
"tag": "h3",
"text": "Feature Two"
}
},
{
"id": "txt003",
"name": "text-basic",
"parent": "con004",
"children": [],
"settings": {
"text": "Describe this feature or benefit in one to three short sentences."
}
},
{
"id": "con005",
"name": "container",
"parent": "con002",
"children": ["ico003", "hdg004", "txt004"],
"settings": {
"_direction": "column",
"_alignItems": "center",
"_gap": "15px",
"_cssGlobalClasses": ["feature-card"]
},
"label": "Feature Three"
},
{
"id": "ico003",
"name": "icon",
"parent": "con005",
"children": [],
"settings": []
},
{
"id": "hdg004",
"name": "heading",
"parent": "con005",
"children": [],
"settings": {
"tag": "h3",
"text": "Feature Three"
}
},
{
"id": "txt004",
"name": "text-basic",
"parent": "con005",
"children": [],
"settings": {
"text": "Describe this feature or benefit in one to three short sentences."
}
}
]
}

4
sections/features-3col.json
View File

@@ -10,7 +10,7 @@
"_typography": {
"text-align": "center"
},
"_rowGap": "10px"
"_rowGap": "var(--row-gap)"
},
"modified": 1772146285,
"user_id": 2
@@ -73,7 +73,7 @@
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "32px",
"_rowGap:mobile_portrait": "15px"
"_rowGap:mobile_portrait": "var(--row-gap)"
},
"label": "Features Row"
},

4
sections/features-4col.json
View File

@@ -10,7 +10,7 @@
"_typography": {
"text-align": "center"
},
"_rowGap": "10px"
"_rowGap": "var(--row-gap)"
},
"modified": 1772146285,
"user_id": 2
@@ -73,7 +73,7 @@
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "24px",
"_rowGap:mobile_portrait": "15px"
"_rowGap:mobile_portrait": "var(--row-gap)"
},
"label": "Features Row"
},

136
sections/hero-card-homepage.json Normal file
View File

@@ -0,0 +1,136 @@
{
"title": "BCW — Hero Card",
"type": "section",
"templateType": "section",
"content": [
{
"id": "sec001",
"name": "section",
"parent": 0,
"children": ["con001"],
"settings": {
"_background": {
"image": {
"url": "https://picsum.photos/1400/700",
"external": true,
"filename": "700"
}
},
"_padding": {
"top": "var(--space-xl)",
"bottom": "var(--space-xl)"
}
},
"label": "Hero Card"
},
{
"id": "con001",
"name": "container",
"parent": "sec001",
"children": ["con002"],
"settings": {
"_direction": "row",
"_alignItems": "center",
"_justifyContent": "flex-start",
"_width": "100%",
"_maxWidth": "100%"
}
},
{
"id": "con002",
"name": "container",
"parent": "con001",
"children": ["txt001", "hdg001", "txt002", "con003"],
"settings": {
"_direction": "column",
"_alignItems": "flex-start",
"_gap": "var(--space-md)",
"_width": "50%",
"_width:mobile_portrait": "100%",
"_margin": {
"left": "5%"
},
"_background": {
"color": {
"raw": "rgba(255, 255, 255, 0.88)"
}
},
"_padding": {
"top": "var(--space-lg)",
"right": "var(--space-lg)",
"bottom": "var(--space-lg)",
"left": "var(--space-lg)"
}
},
"label": "Content Card"
},
{
"id": "txt001",
"name": "text-basic",
"parent": "con002",
"children": [],
"settings": {
"text": "YOUR EYEBROW LABEL",
"_typography": {
"color": {
"raw": "var(--color-primary)"
},
"font-weight": "600",
"letter-spacing": "2px"
}
},
"label": "Eyebrow"
},
{
"id": "hdg001",
"name": "heading",
"parent": "con002",
"children": [],
"settings": {
"tag": "h1",
"text": "Your Hero Headline Goes Here"
}
},
{
"id": "txt002",
"name": "text-basic",
"parent": "con002",
"children": [],
"settings": {
"text": "Supporting text that describes your offer or value proposition. Keep it concise and benefit-focused."
}
},
{
"id": "con003",
"name": "container",
"parent": "con002",
"children": ["btn001", "btn002"],
"settings": {
"_direction": "row",
"_alignItems": "center",
"_gap": "var(--space-sm)"
},
"label": "Buttons"
},
{
"id": "btn001",
"name": "button",
"parent": "con003",
"children": [],
"settings": {
"text": "Get Started",
"style": "primary"
}
},
{
"id": "btn002",
"name": "button",
"parent": "con003",
"children": [],
"settings": {
"text": "Learn More",
"style": "outline"
}
}
]
}

79
sections/hero-card-page.json Normal file
View File

@@ -0,0 +1,79 @@
{
"title": "BCW — Hero Card (Page)",
"type": "section",
"templateType": "section",
"content": [
{
"id": "sec001",
"name": "section",
"parent": 0,
"children": ["con001"],
"settings": {
"_background": {
"image": {
"url": "https://picsum.photos/1400/700",
"external": true,
"filename": "700"
}
},
"_padding": {
"top": "var(--space-xl)",
"bottom": "var(--space-xl)"
}
},
"label": "Hero Card (Page)"
},
{
"id": "con001",
"name": "container",
"parent": "sec001",
"children": ["con002"],
"settings": {
"_direction": "row",
"_alignItems": "center",
"_justifyContent": "center",
"_width": "100%",
"_maxWidth": "100%"
}
},
{
"id": "con002",
"name": "container",
"parent": "con001",
"children": ["hdg001"],
"settings": {
"_direction": "row",
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "var(--space-md)",
"_width": "50%",
"_width:mobile_portrait": "100%",
"_background": {
"color": {
"raw": "rgba(255, 255, 255, 0.88)"
}
},
"_padding": {
"top": "var(--space-lg)",
"right": "var(--space-lg)",
"bottom": "var(--space-lg)",
"left": "var(--space-lg)"
}
},
"label": "Content Card"
},
{
"id": "hdg001",
"name": "heading",
"parent": "con002",
"children": [],
"settings": {
"tag": "h1",
"text": "Page Title Goes Here",
"_typography": {
"text-align": "center"
}
}
}
]
}

2
sections/hero-simple.json
View File

@@ -55,7 +55,7 @@
"_justifyContent": "center",
"_gap": "16px",
"_columnGap": "30"
"_columnGap": "var(--col-gap)"
}
},
{

17
sections/hero-slider.json Normal file
View File

File diff suppressed because one or more lines are too long