@financial-times/o-typography/origami.json

Typographical styles for FT branded sites. Including typographical fundamentals such as font scales, vertical rhythm, and font fallbacks; plus styles for UI including links, headings, and titles. Other components build on o-typography to provide for more

{
	"origamiType": "component",
	"origamiVersion": "2.0",
	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-typography,components",
	"supportContact": {
		"email": "origami.support@ft.com",
		"slack": "financialtimes/origami-support"
	},
	"brands": [
		"core",
		"internal",
		"whitelabel"
	],
	"supportStatus": "active",
	"browserFeatures": {
		"optional": [
			"textshadow"
		]
	},
	"demosDefaults": {
		"sass": "demos/src/demo.scss",
		"js": "demos/src/demo.js",
		"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold"
	},
	"demos": [
		{
			"name": "scale",
			"title": "Scale",
			"template": "demos/src/scale.mustache",
			"description": "Demonstrates the default typographic scale.",
			"display_html": false
		},
		{
			"name": "line-width",
			"title": "Line Width",
			"template": "demos/src/line-width.mustache",
			"description": "Demonstrates line width capping for different font-sizes (see the SASS mixin `oTypographyMaxLineWidth`).",
			"display_html": false
		},
		{
			"name": "headings",
			"title": "Headings",
			"template": "demos/src/headings.mustache",
			"description": "Headings."
		},
		{
			"name": "links",
			"title": "Links",
			"template": "demos/src/links.mustache",
			"description": ""
		},
		{
			"name": "links-inverse",
			"title": "Inverse Links",
			"template": "demos/src/links-inverse.mustache",
			"description": "Link styles for use on dark backgrounds.",
			"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold demo-inverse",
			"brands": ["core"]
		},
		{
			"name": "professional-links",
			"title": "Professional Links",
			"template": "demos/src/professional-links.mustache",
			"description": "Link styles for the FT Professional sub-brand.",
			"brands": ["core"]
		},
		{
			"name": "professional-links-inverse",
			"title": "Inverse Professional Links",
			"template": "demos/src/professional-links-inverse.mustache",
			"description": "Link styles for the FT Professional sub-brand.",
			"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold demo-inverse",
			"brands": ["core"]
		},
		{
			"name": "ft-live-links",
			"title": "FT Live Links",
			"template": "demos/src/ft-live-links.mustache",
			"description": "Link styles for the FT Live sub-brand.",
			"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold demo-inverse",
			"brands": ["core"]
		},
		{
			"name": "body",
			"title": "Body",
			"template": "demos/src/body.mustache",
			"description": ""
		},
		{
			"name": "footer",
			"title": "Footer",
			"template": "demos/src/footer.mustache",
			"description": ""
		},
		{
			"name": "caption",
			"title": "Caption",
			"template": "demos/src/caption.mustache",
			"description": ""
		},
		{
			"name": "lists",
			"title": "Lists",
			"template": "demos/src/lists.mustache",
			"description": ""
		},
		{
			"name": "wrapper",
			"title": "Wrapper",
			"template": "demos/src/wrapper.mustache",
			"description": "As an alternative to adding classes to each html element, adding a wrapper class on a parent element will apply typographic styles to child html elements semantically."
		}
	]
}