Components
Accordions
Accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam velit, tincidunt vel euismod eget, porta ac erat. Nullam at mi sit amet mauris ullamcorper pulvinar id a magna.
Container:
.tw-arn-accordion
Content:
.tw-arn-accordion-content
Accordion title
paragraph 1
paragraph 2
paragraph 3
paragraph 4
paragraph 1
paragraph 2
Container:
.tw-arn-accordion
Content:
.tw-arn-accordion-content
Alerts
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-notification
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-outline-success
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-outline-danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-outline-notification
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vitae harum earum beatae, aliquid architecto fuga iure nulla porro praesentium, qui saepe impedit accusamus tempore nesciunt cum? Debitis, itaque obcaecati!
- .tw-arn-alert
- .tw-arn-alert-outline-warning
On alert content use the 'tw-flex-1' class to fill available space.
Badges
- .tw-arn-badge
- .tw-arn-badge-primary
Checkbox
Container:
.tw-arn-check
Top label:
.tw-arn-check-toplabel
Input:
.tw-arn-check-input
.tw-arn-check-input-md (optional)
.tw-arn-check-input-error (optional)
[data-indeterminate='true/false'] (optional)
Label:
.tw-arn-check-label
Error message
.tw-arn-check-error
Toggle
Container:
.tw-arn-toggle
Input:
.tw-arn-toggle-input
.tw-arn-toggle-input-error (optional)
State text:
.tw-arn-toggle-text
Error message
.tw-arn-toggle-error
Radio buttons
Container:
.tw-arn-radio
Input:
.tw-arn-radio-input
Label:
.tw-arn-radio-text
Error message
.tw-arn-radio-error
Controllers
All Arrow Span:
.tw-arn-arrow-span
Controller:
.tw-arn-container-controller
.tw-arn-arrow-controller
.tw-arn-span-arrow-controller"
.tw-arn-separetor-controller
.po-carousel-indicator
Hover Button:
.tw-arn-close-button-hover
Text Button:
.tw-arn-close-text-button
Carousel Dot:
.tw-arn-carousel-dot-container
.tw-arn-carousel-dot
Controller Audio/Video:
.tw-arn-container-player-controller
.tw-arn-button-player-controlle
Controller Audio/Video:
.tw-arn-container-scrollbar
.tw-arn-scroller-scrollbar
Buttons
Text only
Text with icons
Disabled
Horizontal button group: tw-arn-btn-group-h
Vertical button group: tw-arn-btn-group-v
Dash buttons
Tabs
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
This is some placeholder content the Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
Container:
op-tabs (js required)
.tw-arn-tabs
Tab list:
.tw-arn-tabs-list
[role="tablist"]
Tab button:
.tw-arn-tabs-button
[role="tab"]
[data-tabs-target="#tabPanelSelector"]
Tab underline:
.tw-arn-tabs-underline
[data-tabs-underline]
Tab panel:
.tw-arn-tabs-panel
[role="tabpanel"]
Divider
.tw-arn-divider
Modal
Container:
dialog
.tw-arn-modal
.js-arn-modal
[data-backdrop-close="true/false"]
Modal content:
.tw-arn-modal-content
Modal header:
.tw-arn-modal-header
Modal title:
.tw-arn-modal-title
Modal close button:
.tw-arn-modal-close
.js-arn-modal-close
Modal body:
.tw-arn-modal-body
Trigger modal button:
.js-arn-modal-btn
[data-modal-id="modalToOpen"]
Drawer Panel
render "component.drawer", id: "exampleDrawerPanel", title: "Panel Title", content: text_modal_content
Cursor
Progressbar
Determinate
Indeterminate
Steps
Container
.tw-arn-progressbar
Progress element
span
[data-indeterminated] (for animation)
[style='width: value%'] (display progress)
Tooltips
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-top
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-top-left
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-top-right
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-bottom
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-bottom-left
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-bottom-right
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-left
Title
In oculus quidem exercitus quid ex eo delectu rerum, quem ad id totum.
- .tw-arn-tooltip
- .tw-arn-tooltip-right
HTML content
This is a test paraghraph inside custom html content
- default position
- HTML content
Pagination
Pagination:
.tw-arn-pagination-wrapper
.tw-arn-pagination
.tw-arn-pagination-list-unstyled
.tw-arn-pagination-item
.tw-arn-svg-wrapper-left
.tw-arn-pagination-item-current
.tw-arn-pagination-item-else
.tw-arn-svg-wrapper-right
Favicon
Standard
Apple touch icons
Chrome icons
Windows icons
Logo
Test transpareancy by dragging
Test transpareancy by dragging
Logo box (with margins)
.tw-arn-logo-box
Pictogram mask
.tw-arn-pictogram-mask
Additional CSS Property: --mask-pict: url(SVG_URL);
Form fields
Form Fields (default state)
Form Fields (error state)
Form Fields (validate state)
Form Fields (readonly state)
Search fields
Quantity selector
Range slider
Container
arn-rangeslider (js required)
.tw-arn-slider
Slider input
.tw-arn-slider-thumb
[data-slider-in="min/max"]
('min' for the min input, 'max' for the max input)
Slider track
.tw-arn-slider-track
[data-slider-track]
Slider range
.tw-arn-slider-range
[data-slider-range]
Slider value label
.tw-arn-slider-val-label
[data-slider-lb="min/max"]
('min' for the min input, 'max' for the max input)
Step guides
.tw-arn-slider-steps
[data-step-display]
Limits label
.tw-arn-slider-limits