Add new sections, update design system, fix header mobile layout
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:
278
sections/cards.json
Normal file
278
sections/cards.json
Normal 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."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user