<commit_before>Table of contents
=================

<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

- [Above component](#above-component)
	- [Above: Core](#above-core)
	- [Above: Modifiers](#above-modifiers)
		- [Transitions](#transitions)
		- [Modals](#modals)
		- [Drawers](#drawers)
		- [Customization examples](#customization-examples)
- [Notification component](#notification-component)
	- [Notification: Core](#notification-core)
	- [Notification: Modifiers](#notification-modifiers)
		- [Width and position](#width-and-position)
		- [Transition: slide](#transition-slide)
		- [Transition: fade](#transition-fade)
	- [Scripted Notification](#scripted-notification)

<!-- /TOC -->

# Above component

`above` component's purpose is to display an element above the current page content (imagine a modal dialog box or a drawer type sliding menu).

## Above: Core
<p data-height="320" data-theme-id="0" data-slug-hash="MvENGb" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Core" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/MvENGb/">Reveal Basis - Above - Core</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## Above: Modifiers

### Transitions
<p data-height="320" data-theme-id="0" data-slug-hash="QMqXaJ" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Modifiers - transitions" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/QMqXaJ/">Reveal Basis - Above - Modifiers - transitions</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Modals
<p data-height="320" data-theme-id="0" data-slug-hash="wqrLZQ" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Modifiers - modals" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/wqrLZQ/">Reveal Basis - Above - Modifiers - modals</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Drawers
<p data-height="320" data-theme-id="0" data-slug-hash="KvXOrg" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Modifiers - drawers" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/KvXOrg/">Reveal Basis - Above - Modifiers - drawers</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Customization examples
<p data-height="320" data-theme-id="0" data-slug-hash="gxXpxP" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - themes examples" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/gxXpxP/">Reveal Basis - Above - themes examples</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

# Notification component

`notification`s are alerting components types. A notification can be displayed as a feedback when the website user has performed an operation (eg. successful login).

## Notification: Core
<p data-height="320" data-theme-id="0" data-slug-hash="prajPL" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Core" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/prajPL/">Reveal Basis - Notification - Core</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## Notification: Modifiers

### Width and position
<p data-height="320" data-theme-id="0" data-slug-hash="ZJryjq" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Modifiers - position and width" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/ZJryjq/">Reveal Basis - Notification - Modifiers - position and width</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Transition: slide
<p data-height="320" data-theme-id="0" data-slug-hash="OjQjJO" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Modifiers - Transitions: slide" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/OjQjJO/">Reveal Basis - Notification - Modifiers - Transitions: slide</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Transition: fade
<p data-height="320" data-theme-id="0" data-slug-hash="LjQjry" data-default-tab="html,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Modifiers - Transitions: fade" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/LjQjry/">Reveal Basis - Notification - Modifiers - Transitions: fade</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## Scripted Notification
<p data-height="320" data-theme-id="0" data-slug-hash="qXxpMr" data-default-tab="css,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Scripted" data-preview="true" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/qXxpMr/">Reveal Basis - Notification - Scripted</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<commit_msg>Updated code pen examples (display only pen results)<commit_after>Table of contents
=================

<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

- [Above component](#above-component)
	- [Above: Core](#above-core)
	- [Above: Modifiers](#above-modifiers)
		- [Transitions](#transitions)
		- [Modals](#modals)
		- [Drawers](#drawers)
		- [Customization examples](#customization-examples)
- [Notification component](#notification-component)
	- [Notification: Core](#notification-core)
	- [Notification: Modifiers](#notification-modifiers)
		- [Width and position](#width-and-position)
		- [Transition: slide](#transition-slide)
		- [Transition: fade](#transition-fade)
	- [Scripted Notification](#scripted-notification)

<!-- /TOC -->

# Above component

`above` component's purpose is to display an element above the current page content (imagine a modal dialog box or a drawer type sliding menu).

## Above: Core
<p data-height="320" data-theme-id="0" data-slug-hash="MvENGb" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Core" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/MvENGb/">Reveal Basis - Above - Core</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## Above: Modifiers

### Transitions
<p data-height="320" data-theme-id="0" data-slug-hash="QMqXaJ" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Modifiers - transitions" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/QMqXaJ/">Reveal Basis - Above - Modifiers - transitions</a> by <NAME>ille (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Modals
<p data-height="320" data-theme-id="0" data-slug-hash="wqrLZQ" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Modifiers - modals" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/wqrLZQ/">Reveal Basis - Above - Modifiers - modals</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Drawers
<p data-height="320" data-theme-id="0" data-slug-hash="KvXOrg" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - Modifiers - drawers" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/KvXOrg/">Reveal Basis - Above - Modifiers - drawers</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Customization examples
<p data-height="320" data-theme-id="0" data-slug-hash="gxXpxP" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Above - themes examples" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/gxXpxP/">Reveal Basis - Above - themes examples</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

# Notification component

`notification`s are alerting components types. A notification can be displayed as a feedback when the website user has performed an operation (eg. successful login).

## Notification: Core
<p data-height="320" data-theme-id="0" data-slug-hash="prajPL" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Core" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/prajPL/">Reveal Basis - Notification - Core</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## Notification: Modifiers

### Width and position
<p data-height="320" data-theme-id="0" data-slug-hash="ZJryjq" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Modifiers - position and width" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/ZJryjq/">Reveal Basis - Notification - Modifiers - position and width</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Transition: slide
<p data-height="320" data-theme-id="0" data-slug-hash="OjQjJO" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Modifiers - Transitions: slide" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/OjQjJO/">Reveal Basis - Notification - Modifiers - Transitions: slide</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### Transition: fade
<p data-height="320" data-theme-id="0" data-slug-hash="LjQjry" data-default-tab="result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Modifiers - Transitions: fade" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/LjQjry/">Reveal Basis - Notification - Modifiers - Transitions: fade</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## Scripted Notification
<p data-height="320" data-theme-id="0" data-slug-hash="qXxpMr" data-default-tab="css,result" data-user="sergemazille" data-embed-version="2" data-pen-title="Reveal Basis - Notification - Scripted" data-preview="true" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/sergemazille/pen/qXxpMr/">Reveal Basis - Notification - Scripted</a> by <NAME> (<a href="https://codepen.io/sergemazille">@sergemazille</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

{'fraction_non_alphanumeric': 0.19477451682176092, 'fraction_numerical': 0.007874015748031496, 'mean_word_length': 5.516324626865671, 'pattern_counts': {'":': 0, '<': 227, '<?xml version=': 0, '>': 227, 'https://': 80, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1621298', 'n_tokens_mistral': 4961, 'n_tokens_neox': 4963, 'n_words': 873}