@eightshift/frontend-libs

{ "$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json", "componentName": "heading", "title": "Heading", "componentClass": "heading", "example": { "attributes": { "headingContent": "This is heading", "headingLevel": 2, "headingSize": "h2:bold", "headingColor": "black", "headingUse": true } }, "attributes": { "headingContent": { "type": "string" }, "headingLevel": { "type": "integer", "default": 2 }, "headingSize": { "type": "string", "default": "h2:bold" }, "headingColor": { "type": "string", "default": "black" }, "headingUse": { "type": "boolean", "default": true } }, "options": { "headingSize": [ { "label": "150", "value": "hero", "weights": ["bold"] }, { "label": "120", "value": "h1", "weights": ["bold", "medium"] }, { "label": "80", "value": "h2", "weights": ["bold", "medium"] }, { "label": "64", "value": "h3", "weights": ["bold", "medium"] }, { "label": "32", "value": "h4", "weights": ["bold", "medium"] }, { "label": "24", "value": "h5", "weights": ["bold", "medium"] }, { "label": "18", "value": "h6", "weights": ["bold", "medium"] } ], "headingColor": [ "primary500", "white", "black" ] }, "variables": { "headingSize": { "hero:bold": [ { "variable": { "heading-font-size": "5rem", "heading-line-height": "1.2", "heading-font-weight": "bold", "heading-letter-spacing": "-2px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "7.5rem" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "9.375rem", "heading-line-height": "1" } } ], "h1:bold": [ { "variable": { "heading-font-size": "4.5rem", "heading-line-height": "1.22", "heading-font-weight": "bold", "heading-letter-spacing": "-2px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "6rem", "heading-line-height": "1.12" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "7.5rem", "heading-line-height": "1.05" } } ], "h1:medium": [ { "variable": { "heading-font-size": "4.5rem", "heading-line-height": "1.22", "heading-font-weight": "500", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "6rem", "heading-line-height": "1.12", "heading-letter-spacing": "-2px" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "7.5rem", "heading-line-height": "1.05" } } ], "h2:bold": [ { "variable": { "heading-font-size": "4rem", "heading-line-height": "1.25", "heading-font-weight": "bold", "heading-letter-spacing": "-2px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "4.5rem", "heading-line-height": "1.22" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "5rem", "heading-line-height": "1.2" } } ], "h2:medium": [ { "variable": { "heading-font-size": "4rem", "heading-line-height": "1.25", "heading-font-weight": "500", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "4.5rem", "heading-line-height": "1.22" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "5rem", "heading-line-height": "1.2" } } ], "h3:bold": [ { "variable": { "heading-font-size": "3rem", "heading-line-height": "1.04", "heading-font-weight": "bold", "heading-letter-spacing": "-2px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "3.5rem", "heading-line-height": "1.08" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "4rem", "heading-line-height": "1.3" } } ], "h3:medium": [ { "variable": { "heading-font-size": "3rem", "heading-line-height": "1.04", "heading-font-weight": "500", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "3.5rem", "heading-line-height": "1.08" } }, { "breakpoint": "desktop", "variable": { "heading-font-size": "4rem", "heading-line-height": "1.3" } } ], "h4:bold": [ { "variable": { "heading-font-size": "2.5rem", "heading-line-height": "1.4", "heading-font-weight": "bold", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "3rem", "heading-line-height": "1.42" } }, { "breakpoint": "desktop", "variable": { "heading-line-height": "1.35" } } ], "h4:medium": [ { "variable": { "heading-font-size": "2.5rem", "heading-line-height": "1.4", "heading-font-weight": "500", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-font-size": "3rem", "heading-line-height": "1.42" } }, { "breakpoint": "desktop", "variable": { "heading-line-height": "1.35" } } ], "h5:bold": [ { "variable": { "heading-font-size": "2rem", "heading-line-height": "1.39", "heading-font-weight": "bold", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-line-height": "1.49" } }, { "breakpoint": "desktop", "variable": { "heading-line-height": "1.3" } } ], "h5:medium": [ { "variable": { "heading-font-size": "2rem", "heading-line-height": "1.39", "heading-font-weight": "500", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-line-height": "1.49" } }, { "breakpoint": "desktop", "variable": { "heading-line-height": "1.3" } } ], "h6:bold": [ { "variable": { "heading-font-size": "1.5rem", "heading-line-height": "1.35", "heading-font-weight": "bold", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "heading-letter-spacing": "0" } } ], "h6:medium": [ { "variable": { "heading-font-size": "1.5rem", "heading-line-height": "1.35", "heading-font-weight": "500", "heading-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "heading-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "heading-letter-spacing": "0" } } ] }, "headingColor": [ { "variable": { "heading-color": "var(--global-colors-%value%)" } } ] } }