Purpose
This document outlines the allowed HTML tags and CSS properties within the application to ensure consistent, secure, and compliant usage.
1. Allowed Tags
Tags with action="validate" are allowed. Here are the approved categories and their attributes:
1.1 Structural Tags
<div>: General block container.<span>: General inline container.
1.2 Text Formatting Tags
<p>,<h1>–<h6>,<b>,<i>,<u>,<strong>,<em>,<small>,<sub>,<sup>,<blockquote>,<code>.
1.3 List Tags
<ul>,<ol>,<li>.
1.4 Table Tags
<table>,<thead>,<tbody>,<tfoot>,<tr>,<th>,<td>.
1.5 Image Tags
<img>:Allowed attributes:
src,alt,width,height.
1.6 Anchor Tags
<a>:Allowed attributes:
href,target="_blank".
1.7 Interactive Tags
<details>: Creates a collapsible section.<summary>: Defines a summary or title for the collapsible content.
2. Additional Components
2.1 Section Divider
Description: Used for visually separating content with a secondary title.
HTML:
<div class="cp_secondaryTitle">
// Section Title Goes Here //
</div>
2.2 Separator
Description: A styled horizontal line for separating sections visually.
HTML:
<hr style="height: 3px; background-color: #f5f8f9; margin-top: 40px; margin-bottom: 40px;"/>
2.3 Textarea
Description: A text input area for multi-line content.
HTML:
<div class="row" style="margin-top: 15px;">
<div class="col-sm-12">
<label for="cp_">Enter your text:</label>
<textarea class="form-control" name="REPLACE" id="REPLACE" rows="3" style="width: 100%;"></textarea>
</div>
</div>
2.4 Text Input
Description: A single-line text input field.
HTML:
<div class="row" style="margin-top: 15px;">
<div class="col-sm-12">
<label for="cp_">Enter text:</label>
<input type="text" name="REPLACE" id="REPLACE" class="form-control" style="width: 100%;"/>
</div>
</div>
2.5 Date Input
Description: A date picker field for date inputs.
HTML:
<div class="row" style="margin-top: 15px;">
<div class="col-sm-12">
<label for="cp_">Select a date:</label>
<input type="date" name="REPLACE" id="REPLACE" class="form-control" placeholder="dd/mm/yyyy"/>
</div>
</div>
2.6 Checkbox
Description: A group of checkboxes for multiple selections.
HTML:
<div class="row" style="margin-top: 15px;">
<div class="col-sm-12">
<p>Choose options:</p>
</div>
<div class="col-sm-12">
<div class="form-check col-xs-12 pull-left">
<input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE1" value="Option1"/>
<label class="col-xs-10 pull-right" for="REPLACE1">Option 1</label>
</div>
<div class="form-check col-xs-12 pull-left">
<input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE2" value="Option2"/>
<label class="col-xs-10 pull-right" for="REPLACE2">Option 2</label>
</div>
</div>
</div>
2.7 Radio Buttons
Description: A group of radio buttons for single selection.
HTML:
<div class="row" style="margin-top: 15px;">
<div class="col-sm-12">
<p>Choose one:</p>
</div>
<div class="col-sm-12">
<div class="form-check">
<input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="Yes" value="Yes">
<label class="form-check-label col-xs-10" for="Yes">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="No" value="No">
<label class="form-check-label col-xs-10" for="No">No</label>
</div>
</div>
</div>
2.8 Professional Lock Sections
Description: Content restricted for professional users.
HTML:
<fieldset class="pro-only">
// Restricted content goes here //
</fieldset>
2.9 Collapsible Sections
Basic
Description: A section that can be expanded or collapsed.
HTML:
<details>
<summary>
<div class="row collapsable-section-title-container cp_secondaryTitle">
<div class="col-sm-12">
<h1>Clickable Title for the Section</h1>
</div>
<span class="icon details-closed"></span>
</div>
</summary>
<p>This is the content of the collapsible section.</p>
</details>
Professional Lock
Description: Collapsible section within a restricted area.
HTML:
<fieldset class="pro-only">
<details>
<summary>
<div class="row collapsable-section-title-container cp_secondaryTitle">
<div class="col-sm-12">
<h1>Clickable Title for the Section</h1>
</div>
<span class="icon details-closed"></span>
</div>
</summary>
<p>This is restricted collapsible content.</p>
</details>
</fieldset>