@eightshift/frontend-libs

{ "$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json", "componentName": "paragraph", "title": "Paragraph", "componentClass": "paragraph", "example": { "attributes": { "paragraphContent": "This is paragraph", "paragraphSize": "regular", "paragraphColor": "black", "paragraphUse": true } }, "attributes": { "paragraphContent": { "type": "string" }, "paragraphSize": { "type": "string", "default": "body:regular" }, "paragraphColor": { "type": "string", "default": "black" }, "paragraphUse": { "type": "boolean", "default": true } }, "options": { "paragraphSize": [ { "label": "48", "value": "h4", "weights": ["bold", "medium"] }, { "label": "32", "value": "h5", "weights": ["bold", "medium"] }, { "label": "24", "value": "h6", "weights": ["bold", "medium"] }, { "label": "16", "value": "body", "weights": ["bold", "medium", "regular"] }, { "label": "14", "value": "caption", "weights": ["bold", "regular"] }, { "label": "12", "value": "info-text", "weights": ["regular"] } ], "paragraphColor": [ "white", "black", "primary500" ] }, "variables": { "paragraphSize": { "h4:bold": [ { "variable": { "paragraph-font-size": "2.5rem", "paragraph-line-height": "1.4", "paragraph-font-weight": "bold", "paragraph-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "paragraph-font-size": "3rem", "paragraph-line-height": "1.42" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.35" } } ], "h4:medium": [ { "variable": { "paragraph-font-size": "2.5rem", "paragraph-line-height": "1.4", "paragraph-font-weight": "500", "paragraph-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "paragraph-font-size": "3rem", "paragraph-line-height": "1.42" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.35" } } ], "h5:bold": [ { "variable": { "paragraph-font-size": "2rem", "paragraph-line-height": "1.39", "paragraph-font-weight": "bold", "paragraph-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.49" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.3" } } ], "h5:medium": [ { "variable": { "paragraph-font-size": "2rem", "paragraph-line-height": "1.39", "paragraph-font-weight": "500", "paragraph-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.49" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.3" } } ], "h6:bold": [ { "variable": { "paragraph-font-size": "1.5rem", "paragraph-line-height": "1.35", "paragraph-font-weight": "bold", "paragraph-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "paragraph-letter-spacing": "0" } } ], "h6:medium": [ { "variable": { "paragraph-font-size": "1.5rem", "paragraph-line-height": "1.35", "paragraph-font-weight": "500", "paragraph-letter-spacing": "-1px" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "paragraph-letter-spacing": "0" } } ], "body:bold": [ { "variable": { "paragraph-font-size": "1rem", "paragraph-line-height": "1.39", "paragraph-font-weight": "bold" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "paragraph-letter-spacing": "0" } } ], "body:medium": [ { "variable": { "paragraph-font-size": "1rem", "paragraph-line-height": "1.39", "paragraph-font-weight": "500" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "paragraph-letter-spacing": "0" } } ], "body:regular": [ { "variable": { "paragraph-font-size": "1rem", "paragraph-line-height": "1.39", "paragraph-font-weight": "normal" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.4" } }, { "breakpoint": "desktop", "variable": { "paragraph-letter-spacing": "0" } } ], "caption:bold": [ { "variable": { "paragraph-font-size": "0.875rem", "paragraph-line-height": "1.4", "paragraph-font-weight": "bold" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.52" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.5" } } ], "caption:regular": [ { "variable": { "paragraph-font-size": "0.875rem", "paragraph-line-height": "1.4", "paragraph-font-weight": "normal" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.52" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.5" } } ], "info-text:regular": [ { "variable": { "paragraph-font-size": "0.75rem", "paragraph-line-height": "1.37", "paragraph-font-weight": "normal" } }, { "breakpoint": "tablet", "variable": { "paragraph-line-height": "1.55" } }, { "breakpoint": "desktop", "variable": { "paragraph-line-height": "1.5" } } ] }, "paragraphColor": { "white": [ { "variable": { "paragraph-color": "var(--global-colors-white)", "paragraph-link-color": "var(--global-colors-primary300)" } } ], "black": [ { "variable": { "paragraph-color": "var(--global-colors-black)", "paragraph-link-color": "var(--global-colors-primary500)" } } ], "primary500": [ { "variable": { "paragraph-color": "var(--global-colors-primary500)", "paragraph-link-color": "var(--global-colors-primary700)" } } ] } } }