Origami Frontend Components & Services

SassDoc: o-teaser

oTeaserClearfix

Clearfix helper styles Outputs clearfix styles on the current element

Links

oTeaser

Output styles for teasers. Can be passed a list of styles to output, or 'all' to output everything

Links

o-teaser-is-silent

Is silent setting

Links

oTeaserBase

Base styles for a teaser sets the font and basic display properties

Links

oTeaserHeading

Teaser heading styles. Including link and hover styling.

Links

oTeaserMeta

Meta area and colouring styles

Links

oTeaserTag

Tag styling. Element should be a link, otherwise use oTeaserMeta

Links

oTeaserStandfirst

Styles for standfirst element

Links

oTeaserImage

Default image styles

Links

oTeaserImagePlaceholder

Image placeholder styles to create a 16:9 space for when an image is being lazy-loaded

Links

oTeaserHeadshot

Headshot styles and modification of content to accomodate the headshot. Should be used outside of a selector

Links

oTeaserPromotedContent

Promoted content theme

Links

oTeaserPaidPost

Paid post theme

Links

oTeaserRelated

Related content list styles

Links

oTeaserRelatedItem

Single related content item styles

Links

oTeaserTimestamp

Timestamp base styles

Links

oTeaserTimestampVariants

Timestamp variant styles adding coloured prefixes. Includes keyframe declaration so must be used outside of a selector

Links

oTeaserHero

Base styles for a hero layout teaser

Links

oTeaserHeroThemeBase

Base styles for themed hero teasers

Links

oTeaserHeroOpinion

Hero opinion theme - blue background white based text

Links

oTeaserHeroImage

Hero image theme styles - full size image with text overlay

Links

oTeaserHeroImageContainer

Hero teaser image container - for standard hero teasers

Links

oTeaserHeroCentre

Centred hero teaser styles for centering content

Links

oTeaserHeroCentreImage

Centred hero teaser styles to centre image

Links

oTeaserHeroStandalone

Hero standalone theme styles

Links

oTeaserLarge

Styles for large teasers. Also form the basis of styles for hero teasers

Links

oTeaserLargeWithImage

Adjusts large teasers to work with images. Appears in portrait at default-medium, landscape in medium-large, and portrait from large up

Links

oTeaserImageContainer

Image container styles for large image at various breakpoints

Links

oTeaserLargeImagePortrait

Forces a large teaser to always appear in the portrait style, regardless of breakpoint

Links

oTeaserLargeImageLandscape

Forces a large teaser to always appear in the landscape style, regardless of breakpoint

Links

oTeaserSmall

Small teaser styles

Links

oTeaserSmallStacked

Small teaser styles for a stacked image image will appear 100% width at the top of the teaser

Links

oTeaserInverse

Inverse theme styles - base all text content on white

Links

oTeaserStretched

Make a teaser fill the full height of its container (if the container is flex) and stretch the heading to move standfirst and timestamp to teaser footer

Links

oTeaserOpinion

General opinion theme teaser - turns tag content blue

Links

oTeaserOpinionBackground

Opinion background theme - colours background blue and adjust text

Links

oTeaserHighlight

Highlight theme - colours background claret and adjust text colours

Links

oTeaserTopStoryBase

Base Top story styles for all variants

Links

oTeaserTopStoryStandalone

Standalone top story theme styles

Links

oTeaserTopStoryLandscape

Landscape top story theme styles

Links

oTeaserTopStoryBigStory

Big Story top story theme styles

Links

oTeaser

Output styles for teasers. Can be passed a list of styles to output, or 'all' to output everything

Links

Switch component view

GitHub Repository

Install o-teaser

If using the Build Service, add o-teaser@^2.3.1 to your link tag.

If running a Manual Build, run bower install --save "o-teaser@^2.3.1".

Help & Support

o-teaser is maintained directly by the Origami team. If you have any questions about o-teaser or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com