{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "phclb/cards-layout",
"version": "2.0.1",
"title": "Cards Elements",
"category": "widgets",
"description": "This plugin offers multiple customizable layouts like grid, list, and carousel, making content display easy and flexible.",
"keywords": [
"cards",
"layout",
"content",
"gallery",
"lightbox"
],
"textdomain": "b-blocks",
"attributes": {
"align": {
"type": "string",
"default": "wide"
},
"cards": {
"type": "array",
"default": [
{
"img": {
"url": "https://i.ibb.co/JR5B76cx/card-3.jpg",
"isSet": false
},
"altText": "",
"title": "John Doe",
"subTitle": "",
"desc": "Conveniently engineer diverse products rather than bleeding-edge applications",
"btnLabel": "Load More",
"btnUrl": "#",
"cUrl": "",
"newTab": false,
"focalPoint": "",
"achValue": "#1",
"stateValue": "50K+",
"scTrend": "↑ 34% this quarter",
"sparkLines": [
{
"h": 30,
"i": 0.3
},
{
"h": 45,
"i": 0.4
},
{
"h": 35,
"i": 0.35
},
{
"h": 60,
"i": 0.5
},
{
"h": 50,
"i": 0.45
},
{
"h": 75,
"i": 0.6
},
{
"h": 65,
"i": 0.55
}
],
"skills": [
{
"name": "React / Next.js",
"pct": 95,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "TypeScript",
"pct": 90,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "CSS / Tailwind",
"pct": 88,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "Framer Motion",
"pct": 75,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
}
],
"svg": ""
},
{
"img": {
"url": "https://i.ibb.co/KjbH0QFg/card-2.jpg",
"isSet": false
},
"altText": "",
"title": "John Doe",
"subTitle": "",
"desc": "Conveniently engineer diverse products rather than bleeding-edge applications",
"btnLabel": "Load More",
"btnUrl": "#",
"cUrl": "#",
"newTab": false,
"focalPoint": "",
"achValue": "$10M",
"stateValue": "2s",
"scTrend": "↓ 8x faster than manual",
"sparkLines": [
{
"h": 70,
"i": 0.6
},
{
"h": 60,
"i": 0.5
},
{
"h": 50,
"i": 0.4
},
{
"h": 40,
"i": 0.3
},
{
"h": 30,
"i": 0.2
},
{
"h": 20,
"i": 0.1
},
{
"h": 10,
"i": 0.1
}
],
"skills": [
{
"name": "React / Next.js",
"pct": 95,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "TypeScript",
"pct": 90,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "CSS / Tailwind",
"pct": 88,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "Framer Motion",
"pct": 75,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
}
],
"svg": ""
},
{
"img": {
"url": "https://i.ibb.co/v4ZqhZKV/card-1.jpg",
"isSet": false
},
"altText": "",
"title": "John Doe",
"subTitle": "",
"desc": "Conveniently engineer diverse products rather than bleeding-edge applications",
"btnLabel": "Load More",
"btnUrl": "#",
"cUrl": "#",
"newTab": false,
"focalPoint": "",
"tags": [],
"tagTitle": "See My Latest Works Here",
"achValue": "4.9★",
"stateValue": "4.9",
"scTrend": "↑ 0 incidents this month",
"sparkLines": [
{
"h": 50,
"i": 0.35
},
{
"h": 70,
"i": 0.5
},
{
"h": 65,
"i": 0.45
},
{
"h": 85,
"i": 0.6
},
{
"h": 60,
"i": 0.4
},
{
"h": 90,
"i": 0.7
},
{
"h": 95,
"i": 0.8
}
],
"skills": [
{
"name": "React / Next.js",
"pct": 95,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "TypeScript",
"pct": 90,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "CSS / Tailwind",
"pct": 88,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
},
{
"name": "Framer Motion",
"pct": 75,
"nameColor": "#9191A8",
"pctColor": "#a5b4fc",
"wrapBg": {
"type": "solid",
"color": "rgba(255, 255, 255, 0.06)"
},
"bg": {
"type": "gradient",
"gradient": "linear-gradient(90deg,#6366f1,#8b5cf6)"
}
}
],
"svg": ""
}
]
},
"cardsLayout": {
"type": "object",
"default": {
"style": "default"
}
},
"isContent": {
"type": "boolean",
"default": false
},
"cardTag": {
"type": "object",
"default": {
"isSet": false,
"text": "",
"typo": {
"fontSize": {
"desktop": 11,
"tablet": 11,
"mobile": 11
},
"fontWeight": 700,
"lineHeight": "135%",
"letterSpace": "0.06em",
"fontFamily": "inter"
}
}
},
"cardStyle": {
"type": "object",
"align": "left",
"default": {
"newTab": false,
"borders": {
"color": "#000",
"style": "solid",
"width": "1px"
},
"radius": 5,
"padding": {
"top": "5px",
"right": "5px",
"bottom": "5px",
"left": "5px"
}
}
},
"baseCard": {
"type": "object",
"default": {}
},
"iconWrap": {
"type": "object",
"default": {}
},
"img": {
"type": "object",
"default": {
"borderRadius": 0
}
},
"title": {
"type": "object",
"default": {
"typo": {
"fontSize": {
"desktop": 18,
"tablet": 14,
"mobile": 14
},
"fontWeight": 500,
"lineHeight": "135%"
},
"color": "#000"
}
},
"desc": {
"type": "object",
"default": {
"typo": {
"fontSize": {
"desktop": 14,
"tablet": 14,
"mobile": 14
},
"fontWeight": 400,
"lineHeight": "135%"
},
"color": "#000"
}
},
"btn": {
"type": "object",
"default": {
"typo": {
"fontSize": {
"desktop": 16,
"tablet": 14,
"mobile": 14
},
"fontWeight": 500,
"lineHeight": "135%"
},
"colors": {
"color": "#fff",
"bg": "#000"
},
"padding": {
"top": "5px",
"right": "5px",
"bottom": "5px",
"left": "5px"
},
"borders": {
"color": "#000",
"style": "solid",
"width": "0px"
},
"radius": 5
}
},
"eyeBrow": {
"type": "object",
"default": {
"typo": {
"fontSize": {
"desktop": 11,
"tablet": 11,
"mobile": 11
},
"fontWeight": 700,
"lineHeight": "11px",
"letterSpacing": "0.1em",
"textTransform": "uppercase"
},
"color": "#a5b4fc"
}
},
"bannerCard": {
"type": "object",
"default": {
"isShowGlow": true,
"isGlass": false
}
},
"achievement": {
"type": "object",
"default": {
"achValue": {
"typo": {
"fontSize": {
"desktop": 36,
"tablet": 24,
"mobile": 18
}
},
"bg": {}
},
"badge": {},
"isAnimation": true,
"animSpeed": 20
}
},
"statCard": {
"type": "object",
"default": {
"statValue": {
"typo": {
"fontSize": {
"desktop": 56,
"tablet": 48,
"mobile": 36
}
},
"bg": {}
},
"trendUp": {
"bg": {},
"borders": {}
},
"trendDown": {
"bg": {},
"borders": {}
}
}
},
"progressCard": {
"type": "object",
"default": {
"skillTitleTypo": {},
"skillNameTypo": {},
"skillPctTypo": {},
"skillBarWrapBg": {},
"barThickness": 8,
"barRadius": 999
}
},
"clientLogoCard": {
"type": "object",
"default": {
"logoTxtTypo": {},
"taglineTypo": {},
"logoTxtColor": "#5a5a72",
"taglineColor": "#5a5a72",
"hoverLogoTxtColor": "",
"hoverTaglineColor": "",
"hoverBorder": {}
}
},
"animatedServiceCard": {
"type": "object",
"default": {
"primaryColor": "#45f3ff",
"secondaryColor": "#ff3c7b",
"cardBg": "#333333",
"innerBg": "#292929"
}
},
"columns": {
"type": "object",
"default": {
"desktop": 3,
"tablet": 2,
"mobile": 1
}
},
"columnGap": {
"type": "string",
"default": "30px"
},
"rowGap": {
"type": "string",
"default": "40px"
},
"layout": {
"type": "string",
"default": "vertical"
},
"alignment": {
"type": "string",
"default": "center"
},
"typography": {
"type": "object",
"default": {
"fontSize": 25
}
},
"colors": {
"type": "object",
"default": {
"color": "#333",
"bg": "#fff"
}
},
"separator": {
"type": "object",
"default": {
"width": "20%",
"height": "2px",
"style": "solid",
"color": "#bbb"
}
},
"padding": {
"type": "object",
"default": {
"top": "15px",
"right": "30px",
"bottom": "15px",
"left": "30px"
}
},
"margin": {
"type": "object",
"default": {
"top": "0px",
"right": "0px",
"bottom": "15px",
"left": "0px"
}
},
"border": {
"type": "object",
"default": {
"radius": "5px"
}
},
"shadow": {
"type": "array",
"default": {}
},
"heroFeatureCardEle": {
"type": "object",
"default": {}
},
"creativeCurve": {
"type": "object",
"default": {}
}
},
"supports": {
"align": [
"wide",
"full"
],
"html": false
},
"example": {
"attributes": {}
},
"editorScript": [
"file:./index.js",
"wp-api",
"wp-util"
],
"editorStyle": [
"file:./index.css"
],
"style": [
"file:./view.css"
],
"render": "file:./render.php",
"viewScript": "file:./view.js"
}