Main UI component library for NDLA
yarn add --save @ndla/uinpm i --save @ndla/uiThe 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/utilSee: package.json for version requirements.
N.B! Optional dependencies are required if you use import {...} from '@ndla/ui'.
/* 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 referenceimport { Breadcrumb, Hero, OneColumn, Article } from "@ndla/ui";
const MyPage = ({ topicPath, topic, article }) => {
return (
<div>
<Hero>
<OneColumn>
<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>
<Article article={article} />
</OneColumn>
</div>
</div>
);
};