@ndla/ui NPM | npm.io

ndla-ui

Main UI component library for NDLA

Installation

yarn add --save @ndla/ui

npm i --save @ndla/ui

The following dependencies are optional, but some components may depend on one or more of them.

react-router
@ndla/article-converter
@ndla/button
@ndla/licenses
@ndla/icons
@ndla/tabs
@ndla/util

See: package.json for version requirements.

N.B! Optional dependencies are required if you use import {...} from '@ndla/ui'.

Usage

/* Your project's main .scss import file */
@import "~@ndla/ui/scss/main"; // with webpack and sass-loader
@import "../path/to/node_modules/ndla-ui/scss/main"; // direct reference

import { Breadcrumb, Hero, OneColumn, Article } from "@ndla/ui";

const MyPage = ({ topicPath, topic, article }) => {
  return (
    <div>
      <Hero>
        <OneColumn cssModifier="narrow">
          <div className="c-hero__content">
            <section>
              <Breadcrumb topicPath={topicPath} />
              <h1 className="c-hero__title">{topic.name}</h1>
            </section>
          </div>
        </OneColumn>
      </Hero>
      <div className="u-bg-lightblue">
        <OneColumn cssModifier="narrow">
          <Article article={article} />
        </OneColumn>
      </div>
    </div>
  );
};

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

10 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

6 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

ndla-ui

Installation

Optional dependencies

Usage

Styling

Component Usage