Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
<button class="vl-button -red">Button
</button>
<button class="vl-button -light -red">Button
</button>
<button class="vl-button -blue">Button
</button>
<button class="vl-button -light -blue">Button
</button>button.vl-button.-red Button
button.vl-button.-light.-red Button
button.vl-button.-blue Button
button.vl-button.-light.-blue Button<label class="vl-radio">
<input type="radio" name="name"/><span class="vl-radio--mark"></span><span class="vl-radio--label-text">Radio label</span>
</label>label.vl-radio
input(type="radio" name="name")
span.vl-radio--mark
span.vl-radio--label-text Radio label<input class="vl-input" placeholder="Placeholder"/>input.vl-input(placeholder="Placeholder")<div class="vl-label">Label</div>.vl-label Label<a class="vl-link">Link</a><a class="vl-link -color-white">Link</a>a.vl-link Link
a.vl-link.-color-white Link<img class="vl-logo" src="logo.png" alt="image"/>img.vl-logo(src="logo.png" alt="image")<p class="vl-paragraph">Paragraph
</p>p.vl-paragraph Paragraph<textarea class="vl-textarea" rows="5" placeholder="Placeholder"></textarea>textarea.vl-textarea(rows="5" placeholder="Placeholder")<h1 class="vl-title -color-black -font-undefined -weight-undefined">Title
</h1>
<h2 class="vl-title -color-black -font-undefined -weight-undefined">Title
</h2>
<h3 class="vl-title -color-black -font-undefined -weight-undefined">Title
</h3>
<h3 class="vl-title -color-black -font-poppins -weight-undefined">Title
</h3>h1.vl-title.-color-black.-font-undefined.-weight-undefined Title
h2.vl-title.-color-black.-font-undefined.-weight-undefined Title
h3.vl-title.-color-black.-font-undefined.-weight-undefined Title
h3.vl-title.-color-black.-font-poppins.-weight-undefined Title