P
CUI v1.20.1177
Section headers display the name of their section, supporting information, and any UI elements (buttons, checkboxes, etc), needed for action in their section.
<link rel="stylesheet" href="~/PCUIAssets/PCUI/Elements/Buttons/css/Buttons.min.css" />
<link href="~/PCUIAssets/PCUI/Components/HeaderSection/css/HeaderSection.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/Checkboxes/css/Checkboxes.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/Badge/css/Badge.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/Vue/Plugins/vue-multiselect.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/TextFields/css/TextFields.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/Vue/Plugins/validators.min.js"></script>
<script src="~/PCUIAssets/Vue/Plugins/vuelidate.min.js"></script>
<script src="~/PCUIAssets/Vue/Plugins/VueTheMask.umd.min.js"></script>
<script src="~/PCUIAssets/Vue/Plugins/vue-multiselect.min.js"></script>
<script src="~/PCUIAssets/PCUI/Elements/TextFields/js/TextFields.js"></script>
<section class="headers-section">
<div class="headers-section-center-panel">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)<label class="headers-additional-text">Additional text here</label></h1>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel">
<div class="headers-section-default-text no-margin">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
<div class="additional-text">
<label class="headers-label-optional">LABEL (OPTIONAL) <label class="headers-label-subtext">SUBTEXT GOES HERE</label></label>
</div>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel">
<div class="headers-section-default-text no-margin">
<h1 class="truncate-string">Section name with a y to show descenders ;)<label class="headers-additional-text">Additional text here</label></h1>
<div class="additional-text">
<label class="headers-label-optional">LABEL (OPTIONAL) <label class="headers-label-subtext">SUBTEXT GOES HERE</label></label>
</div>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-left-panel">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text no-margin">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
<div class="additional-text truncate-string">
<label class="headers-label-optional">LABEL (OPTIONAL) <label class="headers-label-subtext">SUBTEXT GOES HERE</label></label>
</div>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-left-panel">
<div class="checkbox-main-container">
<div class="ui checked checkbox checkbox-primary">
<input type="checkbox" checked="">
<label class="checkbox-label-primary"></label>
</div>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text no-margin">
<h1 class="truncate-string">Section name with a y to show descenders ;)<label class="headers-additional-text">Additional text here</label></h1>
<div class="additional-text truncate-string">
<label class="headers-label-optional">LABEL (OPTIONAL) <label class="headers-label-subtext">SUBTEXT GOES HERE</label></label>
</div>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div class="buttons">
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-solid-success" class="ui button button-solid success-btn">Success</button>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
<div class="additional-text truncate-string">
<label class="headers-label-optional">LABEL (OPTIONAL) <label class="headers-label-subtext">SUBTEXT GOES HERE</label></label>
</div>
</div>
</div>
<div class="headers-section-right-panel">
<div class="buttons">
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-solid-success" class="ui button button-solid success-btn">Success</button>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1> </div>
</div>
<div class="headers-section-right-panel width-auto">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel width-auto">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-chevron-left"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)<label class="headers-additional-text">Additional text here</label></h1>
</div>
</div>
<div class="headers-section-right-panel width-auto">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div class="buttons">
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-solid-success" class="ui button button-solid success-btn">Success</button>
</div>
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div class="buttons">
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-default" class="ui button button-default">Default size</button>
<button id="button-solid-success" class="ui button button-solid success-btn">Success</button>
</div>
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-chevron-left"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel width-auto">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-check-circle"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-cloud-download-alt"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-ellipsis-h"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-arrow-left"></i>
</a>
</div>
</div>
<div class="headers-section-right-panel">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-check-circle"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-cloud-download-alt"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-ellipsis-h"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel search-box truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel search-box">
<div class="headers-section-search-box">
<input type="text" name="name" value="Search" />
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div id="no-label-text-fields">
<pcui_text_field v-model="noLabelUsingDropdown"
layout="no-label"
placeholder=""
type="dropdown"
v-bind:options="noLabelDropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="-- Select one --">
</pcui_text_field>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-left-panel">
<div class="headers-section-badge">
<label class="badge-info">10/10 Info style</label>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel width-auto">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0)">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>
<section class="headers-section">
<div class="headers-section-left-panel">
<div class="headers-section-badge">
<label class="badge-info">10/10 Info style</label>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)<label class="headers-additional-text">Additional text here</label></h1>
</div>
</div>
<div class="headers-section-right-panel width-auto">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>
<section class="headers-section secondary-style">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
</section>
<section class="headers-section secondary-style">
<div class="headers-section-left-panel">
<div class="headers-section-icon left-icon">
<i class="fas fa-pencil-alt"></i>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>
<section class="headers-section secondary-style">
<div class="headers-section-left-panel">
<div class="headers-section-icon left-icon">
<i class="fas fa-pencil-alt"></i>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-check-circle"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-cloud-download-alt"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-ellipsis-h"></i>
</a>
</div>
</div>
</section>
<section class="headers-section secondary-style">
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-arrow-left"></i>
</a>
</div>
</div>
<div class="headers-section-right-panel">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-check-circle"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-cloud-download-alt"></i>
</a>
<a href="javascript:void(0);">
<i class="fas fa-ellipsis-h"></i>
</a>
</div>
</div>
</section>
<section class="headers-section secondary-style">
<div class="headers-section-left-panel">
<div class="headers-section-icon left-icon">
<i class="fas fa-pencil-alt"></i>
</div>
</div>
<div class="headers-section-center-panel truncate-string">
<div class="headers-section-default-text">
<h1 class="truncate-string">Section name with a y to show descenders ;)</h1>
</div>
</div>
<div class="headers-section-right-panel">
<div class="headers-section-icon icon-buttons">
<a href="javascript:void(0);">
<i class="fas fa-save"></i>
</a>
<a href="javascript:void(0);">
<i class="ion-android-close"></i>
</a>
</div>
</div>
</section>