\n\t\t\tMerkel reaches ‘grand coalition’ breakthrough with Social Democrats\n\t\t
\n\t\t
\n\t\t\tMove raises hopes of end to political deadlock that has gripped Germany\n\t\t\tsince September\n\t\t
\n\t
\n\n\t\n
\n```\n\nToppers support a wide array of [elements](#supported-elements) and can be customised using several [themes](#themes) and [background colors](#colors). For a full list of examples, including example markup, see [o-topper in the Registry](http://registry.origami.ft.com/components/o-topper).\n\n### Supported elements\n\n| Element | Use case |\n| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `.o-topper__content` | Main content area of topper. Required parent of all elements except `__visual` and `__background`. |\n| `.o-topper__tags` | Wrapper element for the article concept tag elements `__brand`, `__topic` and `__opinion-genre`. |\n| `.o-topper__brand` | A concept tag that represents a brand, e.g. \"The Big Read\". |\n| `.o-topper__topic` | A concept tag that represents a topic or generic concept. |\n| `.o-topper__opinion-genre` | A concept tag that represents the abstract Opinion genre. |\n| `.o-topper__columnist` | Wrapper element for `__columnist-name`. Should be placed below the headline and standfirst. |\n| `.o-topper__columnist-list` | List of one or more columnists that wrote an Opinion genre article. |\n| `.o-topper__columnist-name` | Represents the columnist that wrote an Opinion genre article. |\n| `.o-topper__headline` | The main headline of the article. |\n| `.o-topper__standfirst` | A short introduction to the article. |\n| `.o-topper__background` | Element used to display the editorially-chosen colored background of the topper. Must be empty. |\n| `.o-topper__visual` | Wrapper for the visual elements `__picture` and `__image`. Should be a `` tag. |\n| `.o-topper__picture` | A `` tag visual element. |\n| `.o-topper__image` | An `` tag visual element, usually used as fallback for a ``. |\n| `.o-topper__image-credit` | Element showing credit/copyright for the `__picture` or `__image`, where no image caption is given. If an image caption is provided alongside credit/copyright information use `.o-topper__image-caption` instead. Should be a `` tag. |\n| `.o-topper__image-caption` | Element showing caption and credit/copyright together for the `__picture` or `__image`. Should be a `` tag. |\n\n### Themes\n\nThese themes affect the layout and visual style of all elements. See the [demos](http://registry.origami.ft.com/components/o-topper) for examples.\n\n```\n.o-topper--basic\n.o-topper--branded\n.o-topper--opinion\n.o-topper--full-bleed-image-left\n.o-topper--full-bleed-offset\n.o-topper--split-text-left\n.o-topper--split-text-center\n.o-topper--deep-landscape\n.o-topper--deep-portrait\n```\n\n### Colors\n\nThese colors affect the background of the `.o-topper__background` and `.o-topper__visual` elements, and select a contrasting text color for all other elements.\n\n```\n.o-topper--color-paper\n.o-topper--color-wheat\n.o-topper--color-white\n.o-topper--color-black\n.o-topper--color-claret\n.o-topper--color-oxford\n.o-topper--color-slate\n.o-topper--color-crimson\n.o-topper--color-sky\n.o-topper--color-matisse\n```\n\n### Modifiers\n\n| Modifier | Use case |\n| ------------------------------------ | ------------------------------------------------------------------------------------------------- |\n| `.o-topper__content--background-box` | Create a background box around the element `.o-topper__content`. The background colour of the box |\n| | will be defined based on the background of the topper |\n\n## Sass\n\nTo include all o-topper CSS include `oTopper`:\n\n```scss\n@import '@financial-times/o-topper/main';\n@include oTopper();\n```\n\nTo include o-topper styles granularly specify which elements, themes, and colours to output styles for using the options `$opts` argument:\n\n```scss\n@include oTopper(\n\t$opts: (\n\t\t'themes': (\n\t\t\t'branded',\n\t\t\t// .o-topper--branded\n\t\t\t'opinion',\n\t\t\t// .o-topper--opinion\n\t\t\t'has-headshot',\n\t\t\t// .o-topper--has-headshot\n\t\t\t'full-bleed-offset',\n\t\t\t'split-text-left',\n\t\t\t'split-text-center',\n\t\t\t'full-bleed-image-center',\n\t\t\t'full-bleed-image-left',\n\t\t\t'package',\n\t\t\t'package-extra',\n\t\t\t'package-extra-wide',\n\t\t\t'package-special-report',\n\t\t\t'right-rail',\n\t\t\t'centered',\n\t\t\t'deep-landscape',\n\t\t),\n\t\t'elements': (\n\t\t\t'content',\n\t\t\t// .o-topper__content\n\t\t\t'visual',\n\t\t\t// .o-topper__visual\n\t\t\t'background',\n\t\t\t// .o-topper__background\n\t\t\t'headline',\n\t\t\t'headline--large',\n\t\t\t'summary',\n\t\t\t'standfirst',\n\t\t\t'summary--body',\n\t\t\t'tags',\n\t\t\t'columnist',\n\t\t\t'columnist-name',\n\t\t\t'brand',\n\t\t\t'topic',\n\t\t\t'read-next',\n\t\t\t'image',\n\t\t\t'image-credit',\n\t\t\t'image-caption',\n\t\t),\n\t\t'colors': (\n\t\t\t'o3-color-palette-white',\n\t\t\t// .o-topper--color-white\n\t\t\t'o3-color-palette-black',\n\t\t\t// .o-topper--color-black\n\t\t\t'o3-color-palette-claret',\n\t\t\t'o3-color-palette-oxford',\n\t\t\t'o3-color-palette-paper',\n\t\t\t'o3-color-palette-slate',\n\t\t\t'o3-color-palette-wheat',\n\t\t\t'o3-color-palette-crimson',\n\t\t\t'o3-color-palette-sky',\n\t\t),\n\t)\n);\n```\n\n## Migration\n\n| State | Major Version | Last Minor Release | Migration guide |\n| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |\n| ⚠ maintained | 7 | N/A | [migrate to v7](MIGRATION.md#migrating-from-v6-to-v7) |\n| ╳ deprecated | 6 | 6.0 | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |\n| ╳ deprecated | 5 | - | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |\n| ╳ deprecated | 4 | 4.0 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |\n| ╳ deprecated | 3 | 3.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |\n| ╳ deprecated | 2 | 2.7 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |\n| ╳ deprecated | 1 | 1.2 | - |\n\n## Contact\n\nIf you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-teaser/issues), visit [#ft-origami](https://financialtimes.slack.com/messages/ft-origami/) or email [Origami Support](mailto:origami-support@ft.com).\n\n## Licence\n\nThis software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).\n","readmeFilename":"README.md"}