open-index/open-npm huggingface dataset:
npm package: @springernature/nature-article
Description: Frontend package for Nature articles
Latest version: 0.15.1
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Nature Article

Set the context for Nature branded articles rendered via the shared article renderer.

- [Global Article](#global-article)

## Global Article

The Nature article package inherits from the [global-article package](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-article), anything that then needs to be either overridden from global or added specifically for nature can be added within this package. This README will detail anything that is added for this specific brand.
npm package: @springernature/nature-banner
Description: Local settings to skin `global-banner` [package](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-banner)
Author: Springer Nature
Latest version: 2.0.1
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Nature Banner

Local settings to skin `global-banner` [package](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-banner)
npm package: @springernature/nature-button
Description: Nature branded button. See [Global Button](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-button) for more information.
Author: Springer Nature
Latest version: 0.2.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Nature Button

Nature branded button. See [Global Button](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-button) for more information.
npm package: @springernature/nature-card
Description: Nature branded card. See [Global Card](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-card) for more information.
Author: Springer Nature
Latest version: 2.0.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Nature Card

Nature branded card. See [Global Card](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/global/packages/global-card) for more information.
npm package: @springernature/nature-footer
Description: Nature branded footer
Author: Springer Nature
Latest version: 4.0.0

# Nature Footer

[![NPM version][badge-npm]][info-npm]

Nature branded site footer

## Installation

To use the footer component, enter the following command in your Terminal:

```
npm install @springernature/nature-footer
```

## Usage

Import the installed component code in your `scss` file:

```scss
@import '@springernature/nature-footer/scss/10-settings/footer';
@import '@springernature/nature-footer/scss/50-components/footer';

@import '@springernature/brand-context/default/scss/60-utilities/container.scss';
@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss';
@import '@springernature/brand-context/default/scss/60-utilities/icons.scss';
@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss';
```

> **NOTE** The component requires the use of the utility classes shown above

## Template

Find a [configurable template in the Footer's `view` folder](https://github.com/springernature/frontend-toolkits/blob/master/toolkits/nature/packages/nature-footer/view/footer.hbs). 

You can see an example in the [Footer's demo` folder](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/nature/packages/nature-footer/demo).

[info-npm]: https://www.npmjs.com/package/@springernature/nature-footer
[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-footer.svg
npm package: @springernature/nature-headings
Description: Nature headings
Author: Springer Nature
Latest version: 0.1.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# Nature Headings

Nature branded headings.

## CSS

Include the SCSS in your application

```scss
// Include this with your other components
@import '@springernature/nature-headings/scss/10-settings/headings';
@import '@springernature/nature-headings/scss/30-mixins/headings';
@import '@springernature/nature-headings/scss/50-components/headings';
```

## Example usage

### Without an icon

```html
<h2 class="c-slice-heading">News &amp; Comment</h2>
```

### With link and an icon

```html
<div class="c-slice-heading">
    <h2>
        <a href="/nature/collections" class="u-link-inherit u-display-inline-flex u-align-items-center">
            Collections
            <svg class="u-icon u-mt-4 u-ml-4" aria-hidden="true" focusable="false" height="20" width="20" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m4.08573416 5.70052374 2.48162731-2.4816273c.39282216-.39282216 1.02197315-.40056173 1.40306523-.01946965.39113012.39113012.3914806 1.02492687-.00014045 1.41654791l-4.17620791 4.17620792c-.39120769.39120768-1.02508144.39160691-1.41671995-.0000316l-4.17639421-4.1763942c-.39122513-.39122514-.39767006-1.01908149-.01657797-1.40017357.39113012-.39113012 1.02337105-.3930364 1.41951348.00310603l2.48183447 2.48183446.99770587 1.01367533z" transform="matrix(0 -1 1 0 2.081146 11.085734)"></path></svg>
        </a>
    </h2>
</div>
```
npm package: @springernature/nature-hero
Description: The Nature Hero component appears at the top of the page on all Nature journal sites.
Author: Springer Nature
Latest version: 4.0.1

# Nature Hero

[![NPM version][badge-npm]][info-npm]

Nature Hero lets you create an area at the top of the page to introduce a journal or featured content.

## When to use this component

Use the Nature hero to highlight the main featured story on Nature journal sites or the Nature homepage.

Only use this component once on a page. Place it below the [Nature Header](https://elements.springernature.com/nature/components/nature-header).  

## How it works

### Installation

To use the Nature Hero component, enter the following command in your Terminal:

```
npm install @springernature/nature-hero
```

Then, import the installed component code in your `scss` file:

```scss
@import '@springernature/nature-hero/scss/10-settings/hero';
@import '@springernature/nature-hero/scss/50-components/hero';

@import '@springernature/brand-context/default/scss/60-utilities/links.scss';
@import '@springernature/brand-context/default/scss/60-utilities/positioning.scss';
@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss';
```

### Title

The title is a `h2` heading. Always follow our [guidelines on headings](https://elements.springernature.com/nature/styleguide/typography#headings).

The full text of the title will be a link to the article page. 

Keep the title to no more than 90 characters in length. This will make it easier for people to scan and read.
    
### Summary

The summary sits below the title. 

Use it to tell people what the article is about. Try to keep this to 1 or 2 short sentences. This will make it quicker for people to decide if they want to read the full article or not.
    
### Image

Images in the Nature Hero should have an aspect ratio of 16:9.

The image must have an alternative text description. [Go to our guidelines on alternative text](https://elements.springernature.com/nature/styleguide/accessibility#use-alternative-alt-text-on-images).

## Template

Find a configurable template in the [Hero's `view` folder](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/nature/packages/nature-hero/view). 

You can see an example in the [Hero's `demo` folder](https://github.com/springernature/frontend-toolkits/tree/master/toolkits/nature/packages/nature-hero/demo).

## Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the [#ask-elements Slack channel](https://springernature.slack.com/archives/CNBTFLBLP).

[info-npm]: https://www.npmjs.com/package/@springernature/nature-header
[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-header.svg


[info-npm]: https://www.npmjs.com/package/@springernature/nature-hero
[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-hero.svg
npm package: @springernature/nature-sort-by
Description: Nature sort by ui dropdown
Author: Springer Nature
Latest version: 5.0.0

# Nature Sort By

[![NPM version][badge-npm]][info-npm]

The Nature Sort by component lets users change the order of a list of content items. For example, to sort search results by date or relevance.

## Installation

To use the Sort By component, enter the following command in your Terminal:

```
npm install @springernature/nature-sort-by
```

## Usage

Import the js and scss as follows:

```js
import {sortBy} from '@springernature/nature-sort-by/js/sort-by';

sortBy();
```

```scss
@import '@springernature/nature-sort-by/scss/10-settings/sort-by';
@import '@springernature/nature-sort-by/scss/50-components/sort-by';
```

Insert the component's HTML inside an HTML form in your application. See an example [template](#template) below.

## Template

Find a configurable template in the [Sort by's `view` folder](https://github.com/springernature/frontend-toolkits/blob/master/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs). 

See an example usage in the [Sort by's `demo` folder](https://github.com/springernature/frontend-toolkits/blob/master/toolkits/nature/packages/nature-sort-by/demo/dist/index.html).

[info-npm]: https://www.npmjs.com/package/@springernature/nature-sort-by
[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-sort-by.svg


## Configuration

The Sort By component passes data to a backend to tell it how a list of content should be sorted. This is done using a standard form submission and requires you to have a backend to receive and that process the form data. Edit the values of the `name` and `value` html attributes on the radio inputs to define data appropriate for your backend logic.