{
"component": "Co

{
"component": "ContactListSection",
"type": "container",
"style": {
"backgroundColor": "#F9FAFB",
"padding": "32px"
},
"layout": {
"display": "flex",
"flexDirection": "column",
"gap": "24px"
},
"children": [
{
"component": "SectionTitle",
"type": "Text",
"content": "Title",
"style": {
"fontSize": "24px",
"fontWeight": "700",
"color": "#111827"
}
},
{
"component": "CardsContainer",
"type": "container",
"layout": {
"display": "grid",
"columns": 12,
"gap": "24px"
},
"children": [
{
"component": "ContactCard",
"type": "container",
"gridColumn": "span 6",
"style": {
"backgroundColor": "#FFFFFF",
"borderRadius": "12px",
"padding": "24px",
"border": "1px solid #E5E7EB",
"boxShadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
},
"layout": {
"display": "flex",
"flexDirection": "column"
},
"children": [
{
"component": "LinkRow",
"type": "container",
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "8px"
},
"children": [
{
"component": "Text",
"content": "Title or External link",
"style": {
"fontSize": "16px",
"fontWeight": "600",
"color": "#2563EB"
}
},
{
"component": "Icon",
"name": "heroicons:arrow-top-right-on-square",
"style": {
"size": "16px",
"color": "#2563EB"
}
},
{
"component": "Icon",
"name": "heroicons:chevron-right",
"style": {
"size": "16px",
"color": "#2563EB"
}
}
]
},
{
"component": "ContactInfo",
"type": "container",
"style": {
"marginTop": "16px"
},
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "12px"
},
"children": [
{
"component": "Icon",
"name": "heroicons:phone",
"style": {
"size": "20px",
"color": "#4B5563"
}
},
{
"component": "Divider",
"type": "decorative",
"style": {
"width": "1px",
"height": "20px",
"backgroundColor": "#D1D5DB"
}
},
{
"component": "Box",
"layout": {
"display": "flex",
"alignItems": "baseline",
"gap": "4px"
},
"children": [
{
"component": "Text",
"content": "000-000-0000",
"style": {
"fontSize": "16px",
"fontWeight": "500",
"color": "#2563EB",
"textDecoration": "underline"
}
},
{
"component": "Text",
"content": "(Description)",
"style": {
"fontSize": "16px",
"fontWeight": "400",
"color": "#4B5563"
}
}
]
}
]
},
{
"component": "RemarkText",
"type": "Text",
"content": "※Remark Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"style": {
"marginTop": "4px",
"fontSize": "14px",
"fontWeight": "400",
"color": "#6B7280"
}
},
{
"component": "ContactInfo",
"type": "container",
"style": {
"marginTop": "12px"
},
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "12px"
},
"children": [
{
"component": "Icon",
"name": "heroicons:phone",
"style": {
"size": "20px",
"color": "#4B5563"
}
},
{
"component": "Divider",
"type": "decorative",
"style": {
"width": "1px",
"height": "20px",
"backgroundColor": "#D1D5DB"
}
},
{
"component": "Box",
"layout": {
"display": "flex",
"alignItems": "baseline",
"gap": "4px"
},
"children": [
{
"component": "Text",
"content": "000-000-0000",
"style": {
"fontSize": "16px",
"fontWeight": "500",
"color": "#2563EB",
"textDecoration": "underline"
}
},
{
"component": "Text",
"content": "(Description)",
"style": {
"fontSize": "16px",
"fontWeight": "400",
"color": "#4B5563"
}
}
]
}
]
},
{
"component": "RemarkText",
"type": "Text",
"content": "※Remark Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"style": {
"marginTop": "4px",
"fontSize": "14px",
"fontWeight": "400",
"color": "#6B7280"
}
}
]
},
{
"component": "ContactCard",
"type": "container",
"gridColumn": "span 6",
"style": {
"backgroundColor": "#FFFFFF",
"borderRadius": "12px",
"padding": "24px",
"border": "1px solid #E5E7EB",
"boxShadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
},
"layout": {
"display": "flex",
"flexDirection": "column"
},
"children": [
{
"component": "LinkRow",
"type": "container",
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "8px"
},
"children": [
{
"component": "Text",
"content": "Title or External link",
"style": {
"fontSize": "16px",
"fontWeight": "600",
"color": "#2563EB"
}
},
{
"component": "Icon",
"name": "heroicons:arrow-top-right-on-square",
"style": {
"size": "16px",
"color": "#2563EB"
}
},
{
"component": "Icon",
"name": "heroicons:chevron-right",
"style": {
"size": "16px",
"color": "#2563EB"
}
}
]
},
{
"component": "ContactInfo",
"type": "container",
"style": {
"marginTop": "16px"
},
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "12px"
},
"children": [
{
"component": "Icon",
"name": "heroicons:phone",
"style": {
"size": "20px",
"color": "#4B5563"
}
},
{
"component": "Divider",
"type": "decorative",
"style": {
"width": "1px",
"height": "20px",
"backgroundColor": "#D1D5DB"
}
},
{
"component": "Box",
"layout": {
"display": "flex",
"alignItems": "baseline",
"gap": "4px"
},
"children": [
{
"component": "Text",
"content": "000-000-0000",
"style": {
"fontSize": "16px",
"fontWeight": "500",
"color": "#2563EB",
"textDecoration": "underline"
}
},
{
"component": "Text",
"content": "(Description)",
"style": {
"fontSize": "16px",
"fontWeight": "400",
"color": "#4B5563"
}
}
]
}
]
},
{
"component": "RemarkText",
"type": "Text",
"content": "※Remark Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"style": {
"marginTop": "4px",
"fontSize": "14px",
"fontWeight": "400",
"color": "#6B7280"
}
},
{
"component": "ContactInfo",
"type": "container",
"style": {
"marginTop": "12px"
},
"layout": {
"display": "flex",
"alignItems": "center",
"gap": "12px"
},
"children": [
{
"component": "Icon",
"name": "heroicons:phone",
"style": {
"size": "20px",
"color": "#4B5563"
}
},
{
"component": "Divider",
"type": "decorative",
"style": {
"width": "1px",
"height": "20px",
"backgroundColor": "#D1D5DB"
}
},
{
"component": "Box",
"layout": {
"display": "flex",
"alignItems": "baseline",
"gap": "4px"
},
"children": [
{
"component": "Text",
"content": "000-000-0000",
"style": {
"fontSize": "16px",
"fontWeight": "500",
"color": "#2563EB",
"textDecoration": "underline"
}
},
{
"component": "Text",
"content": "(Description)",
"style": {
"fontSize": "16px",
"fontWeight": "400",
"color": "#4B5563"
}
}
]
}
]
},
{
"component": "RemarkText",
"type": "Text",
"content": "※Remark Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"style": {
"marginTop": "4px",
"fontSize": "14px",
"fontWeight": "400",
"color": "#6B7280"
}
}
]
}
]
}
]
}