@financial-times/o-teaser-collection
Version:
Provides styles to layout out multiple teasers in one section.
115 lines (114 loc) • 2.61 kB
JSON
{
"origamiType": "component",
"origamiVersion": "2.0",
"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-teaser-collection,components",
"supportContact": {
"email": "origami.support@ft.com",
"slack": "financialtimes/origami-support"
},
"brands": [
"core"
],
"supportStatus": "active",
"browserFeatures": {},
"demosDefaults": {
"sass": "demos/src/demo.scss",
"documentClasses": ""
},
"demos": [
{
"title": "Basic",
"name": "standard",
"data": {},
"description": "Standard teaser collection",
"template": "demos/src/demo.mustache"
},
{
"title": "Linked Heading",
"name": "linked",
"data": {
"link": true
},
"description": "Standard teaser collection with a linked heading. A linked heading may be applied to any teaser theme.",
"template": "demos/src/demo.mustache"
},
{
"title": "Responsive Heading (full-width on desktop)",
"name": "full-heading",
"data": {
"headings": [
"full-width"
],
"link": true
},
"description": "The heading border is reduced in size responsively. This can be changed with modifier classes. See the readme for more options.",
"template": "demos/src/demo.mustache"
},
{
"title": "Inverse Heading",
"name": "inverse",
"data": {
"headings": [
"inverse"
],
"link": true
},
"documentClasses": "demo-inverse",
"description": "The heading colour may be inversed for use on a slate (or other dark) background.",
"template": "demos/src/demo.mustache"
},
{
"title": "Collection: horizontal",
"name": "horizontal",
"data": {
"collections": [
"horizontal"
]
},
"description": "Teasers in horizontal rather than standard column layout",
"template": "demos/src/demo.mustache"
},
{
"title": "Collection: special",
"name": "special",
"data": {
"collections": [
"special"
]
},
"description": "",
"template": "demos/src/demo.mustache"
},
{
"title": "Collection: numbered and special",
"name": "numbered",
"data": {
"collections": [
"numbered",
"special"
],
"numbered": true
},
"description": "",
"template": "demos/src/demo.mustache"
},
{
"title": "Collection: mid slice",
"name": "mid-slice",
"data": {
"collections": [
"mid-slice"
]
},
"description": "",
"template": "demos/src/demo.mustache"
},
{
"title": "Pa11y",
"name": "pa11y",
"template": "demos/src/pa11y.mustache",
"hidden": true,
"description": "Accessibility test will be run against this demo"
}
]
}