Socket
Socket
Sign inDemoInstall

@financial-times/o-editorial-layout

Package Overview
Dependencies
Maintainers
18
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@financial-times/o-editorial-layout - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-beta.1

8

origami.json

@@ -12,3 +12,3 @@ {

},
"supportStatus": "experimental",
"supportStatus": "active",
"browserFeatures": {

@@ -39,2 +39,8 @@ "required": [

{
"title": "Wrapper",
"name": "wrapper",
"template": "demos/src/wrapper.mustache",
"description": "Wrapper for editorial styles. Styles all child typographic elements."
},
{
"title": "Pa11y",

@@ -41,0 +47,0 @@ "name": "pa11y",

9

package.json

@@ -28,8 +28,9 @@ {

"name": "@financial-times/o-editorial-layout",
"version": "1.0.0",
"version": "1.1.0-beta.1",
"description": "",
"dependencies": {
"@financial-times/o-editorial-typography": "^1.0.0",
"@financial-times/o-spacing": "^2.0.0",
"origami-ci-tools": "^1.1.1"
"@financial-times/o-typography": "^6.1.0",
"@financial-times/o-quote": "^4.0.0",
"@financial-times/o-spacing": "^2.0.0"
},

@@ -39,4 +40,4 @@ "component": "o-editorial-layout",

"devDependencies": {
"eslint-config-origami-component": "^1.0.0"
"origami-ci-tools": "^1.0.0"
}
}

@@ -35,2 +35,28 @@ o-editorial-layout [![Circle CI](https://circleci.com/gh/Financial-Times/o-editorial-layout/tree/master.svg?style=svg)](https://circleci.com/gh/Financial-Times/o-editorial-layout/tree/master)[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)

A wrapper class `o-editorial-layout-wrapper` may be used to style child elements based on their semantic meaning. This includes headings, paragraphs, lists, figure captions, footers, blockquotes, and more. See a [full example in the wrapper registry](https://registry.origami.ft.com/components/o-editorial-layout). Only direct children, and in some cases the children of paragraph elements, are styled.
```html
<div class="o-editorial-layout-wrapper">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p><a href="#">Lorem ipsum dolor sit amet consectetur</a> adipisicing elit.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quaerat!</p>
<footer><cite>Lorem, ipsum dolor.</cite></footer>
</blockquote>
<p><em>Some italic copy</em> adipisci consectetur.</p>
<p>Quas<sup>sup</sup> and dolorem<sub>sub</sub> harum tempora omnis.</p>
<ol>
<li>Lorem ipsum&#xA0;adipiscing elit.</li>
<li>Sed feugiat turpis at massa tristique.</li>
<li>Curabitu r accumsan elit luctus.</li>
</ol>
</div>
```
### Sass

@@ -52,3 +78,4 @@

'body': true,
'headings': (1, 2, 3)
'headings': (1, 2, 3),
'wrapper': true
));

@@ -55,0 +82,0 @@ ```

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc