Open primary navigation
Origami Frontend Components & Services

Demos: o-layout

Documentation Layout

Ideal for documentation.

Open demo in a new tab

Landing Layout

Ideal for a homepage. This demo shows the land layout's hero area paired with optional overview elements.

Open demo in a new tab

Landing Layout With Article List

Ideal for a subsection or category page, the landing layout may have a muted hero area. This demo shows the muted hero area paired with an article list but any content, including the overview elements, may be used below the hero area.

Open demo in a new tab

Query Layout

Ideal for a search or filter page.

Open demo in a new tab
Status
active
Switch component view

GitHub: o-layout@5.3.1

Install o-layout

If using the Build Service, add o-layout@^5.3.1 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-layout@^5.3.1".

Help & Support

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

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com