> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/design-system/style-library/how-it-works/elements.md).

# Elements

{% hint style="warning" %}
The directory at `/src/styles/elements` may look sparse at the moment, but rest assured we will be looking to add to this section of the Design System as we move forward with Elentra JS 2.0.
{% endhint %}

## \_elements.scss

The last thing that `app.scss` does is load in `_elements.scss`, which then imports the other SCSS partials which reside in styles/elements. Currently there is only one, `anchor.scss`.

These partials will in most cases pertain to HTML elements, and exist to define additional variables that are specific to the element in question, often making use of existing Elentra JS Design System variables.

A good example of this would be a proposed `_input.scss`. The most common text-based inputs are `textarea` and `input[type="text"]`, but in most cases, the appearance of these inputs (border and border radius, focus state, etc.) should be consistent. What `_input.scss` would do is define new variables based on the **Elentra JS Design System** variables that are most appropriate: 

{% code title="\_input.scss (Example)" %}

```css
:root {

    /* --- Input: --- */
    --ejs-element-input-border--weight:  var(--ejs-border-width---d);
    --ejs-element-input-border--radius:  var(--ejs-border-radius---d);

}

/* --- Input: --- */
$ejs-element-input-border--weight:    var(--ejs-element-input-border--weight);
$ejs-element-input-border--radius:    var(--ejs-element-input-border--radius);
```

{% endcode %}

With these in place, any new components that need to be custom built that include a text-based input field can utilize these mapped variables. The primary benefit of this process is that now, if it is decided at a later date that the appearance of all text based inputs must change, we can modify these rules in `_input.scss`, and it will cascade to all of those inputs, without the need to modify the root variables,`--ejs-border-width---d` or `--ejs-border-radius---d`, which may cause unintended visual changes elsewhere.