# @visual-framework/vf-box
> vf-box component
Latest version **2.4.0** (published 2021-10-01) · Apache 2.0 license · 0 weekly downloads
## Install
```sh
npm install @visual-framework/vf-box
pnpm add @visual-framework/vf-box
yarn add @visual-framework/vf-box
bun add @visual-framework/vf-box
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.4.0 |
| Published | 2021-10-01 |
| First published | 2018-11-27 |
| Weekly downloads | 0 |
| License | Apache 2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 39.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | VF |
| Maintainers | khawkins98, sturobsonembl |
| Keywords | fractal, component |
## Links
- npm: https://www.npmjs.com/package/@visual-framework/vf-box
- Homepage: https://stable.visual-framework.dev/
- Issues: https://github.com/visual-framework/vf-core/issues/new
- npm.io page: https://npm.io/package/@visual-framework/vf-box
## Recent versions
- 2.4.0 (latest) — 2021-10-01
- 2.3.3 — 2021-07-29
- 2.3.2 — 2021-07-16
- 2.3.1 — 2021-02-25
- 2.3.0 — 2020-11-27
- 2.2.0 — 2020-10-27
- 2.1.0 — 2020-10-20
- 2.0.2 — 2020-09-09
- 2.0.0 — 2020-09-08
- 1.1.1 — 2020-09-03
- 1.1.0 — 2020-08-28
- 1.0.4 — 2020-04-15
- 1.0.3 — 2020-03-23
- 1.0.2 — 2020-03-20
- 1.0.1 — 2020-02-24
- … 40 more at https://npm.io/package/@visual-framework/vf-box/versions
## README
# Box component
[](https://badge.fury.io/js/%40visual-framework%2Fvf-box)
## About
This component has been deprecated. Please use the vf-card component. A new layout-specific `vf-box` may be made in the future.
## Usage
The `vf-box` layout container can add spacing, a background color, a border, and text colours to an area of content.
A `vf-box` can be used in all layout components (`vf-grid`, `vf-stack`, `embl-grid`) and also inside of `vf-content`.
For now `vf-box` is only designed to accept a heading and text (both have classes). The text node – `vf-box__text` can also accept a link which will inherit the text colour.
### Is Link option
If you require the `vf-box` to link to a page you can do this by:
Using `.njk` and `.yml` for content:
- if you are using `.njk` you only need to add a `box_href` to the data.
Authoring in HTML:
- adding `vf-box--is-link` to the classes being used `...
`.
- adding the link inside of the title ``.
### Design Variants
There are currently two Design variants available. To add the appropriate level of design you can add a component–level class:
- `vf-box--easy`
- `vf-box--normal`
### Themes
**note:** you need a design variant set at the page (todo), container (todo), or component level to make use of the themes available to avoid any potential conflicts with code or unexpected results
The `vf-box` component allows for global and component–level theming so that it is customisable to your needs.
To make use of the component–level theming you will need to add a theme classname to the component.
The theme classnames available are:
- `vf-box-theme--primary`
- `vf-box-theme--secondary`
- `vf-box-theme--tertiary`
- `vf-box-theme--quaternary`
- `vf-box-theme--quinary`
### Accessibility
**Do not** use the themes `vf-box-theme--qauternary` or `vf-box-theme--quinary` with the design variant `vf-box--easy` as they do not conform to WCAG colour contrast ratio specifications.
## Install
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-box` with this command.
```
$ yarn add --dev @visual-framework/vf-box
```
### Sass/CSS
The source files included are written in [Sass](http://sass-lang.com)(`scss`). You can point your Sass `include-path` at your `node_modules` directory and import it like this.
```
@import "@visual-framework/vf-box/index.scss";
```
Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/)
## Help
- [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/troubleshooting/)
- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)
---
_Source: https://npm.io/package/@visual-framework/vf-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._