tsai
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Budibase is an open-source low-code platform for creating internal apps in minutes. Supports PostgreSQL, MySQL, MSSQL, MongoDB, Rest API, Docker, K8s 🚀
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8030 Commits
2 Branches
842 Tags
313 MiB
 
 
 
 
 
 
Tree: f9914a3ba4
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f9914a3ba4'
${ noResults }
budibase/packages/standard-components/node_modules/@spectrum-css/tabs/metadata/tabs.yml

466 lines
22 KiB
Raw Blame History

name: Tabs
SpectrumSiteSlug: https://spectrum.adobe.com/page/tabs/
sections:
- name: Migration Guide
description: |
### Change workflow icon size to medium
If you use a workflow icon with tab items, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
examples:
- id: tabs
name: Basic tabs
status: Verified
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
- id: tabs-icon
name: Tabs with icons
status: Verified
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
- id: tabs-quiet
name: Quiet
status: Verified
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
- id: tabs-quiet-icon
name: Quiet tabs with icons
status: Verified
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
- id: tabs-compact
name: Compact
description: 'Compact tabs should never be used without the quiet variation. Please use [Quiet Compact Tabs instead](#quiet-compact).'
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
- id: tabs-quiet-compact-icon
name: Compact tabs with icons and text
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
- id: tabs-quiet-compact-icon
name: Compact tabs with icons
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>
- id: tabs-quiet-compact
name: Compact (quiet)
status: Verified
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
- id: tabs-quiet-compact
name: Compact tabs with icons and text (quiet)
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
- id: tabs-quiet-compact
name: Compact tabs with icons only (quiet)
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>
- id: tabs-vertical
name: Vertical tabs
markup: |
<div class="spectrum-Tabs spectrum-Tabs--vertical">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="height: 46px; top: 0px;"></div>
</div>
- id: tabs-vertical
name: Vertical tabs with icon and text
markup: |
<div class="spectrum-Tabs spectrum-Tabs--vertical">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="height: 46px; top: 0px;"></div>
</div>
- id: tabs-compact-vertical
name: Compact vertical tabs
markup: |
<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="height: 32px; top: 0px;"></div>
</div>
- id: tabs-compact-vertical
name: Compact vertical tabs with icon and text
markup: |
<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
<use xlink:href="#spectrum-icon-18-Filter" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
<use xlink:href="#spectrum-icon-18-Comment" />
</svg>
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="height: 32px; top: 0px;"></div>
</div>
- id: tabs
name: Basic tabs with overflow
status: Verified
markup: |
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
<button class="spectrum-Picker spectrum-Picker--quiet" aria-haspopup="true">
<span class="spectrum-Picker-label">Tab 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
<div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
<button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
<span class="spectrum-Picker-label">Tab 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
<div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-popover--quiet is-open" style="margin-left: -5px; margin-top: -9px;">
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tab 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tab 2</span>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tab 3</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">Tab 4</span>
</li>
</ul>
</div>
<div class="dummy-spacing"></div>
- id: tabs-compact
name: Compact tabs with overflow
status: Verified
markup: |
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
<button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
<span class="spectrum-Picker-label">Tab 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
<div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
<button class="spectrum-Picker spectrum-Picker--quiet is-open" aria-haspopup="true">
<span class="spectrum-Picker-label">Tab 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
<div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<br>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-popover--quiet is-open" style="margin-left: -5px; margin-top: -9px;">
<ul class="spectrum-Menu" role="listbox">
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tab 1</span>
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tab 2</span>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tab 3</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">Tab 4</span>
</li>
</ul>
</div>
<div class="dummy-spacing"></div>
- id: tabs
name: Tabs with anchors
status: Verified
markup: |
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
<a href="#1" class="spectrum-Tabs-item is-selected">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</a>
<a href="#2" class="spectrum-Tabs-item">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</a>
<a href="#3" class="spectrum-Tabs-item">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</a>
<a href="#4" class="spectrum-Tabs-item">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</a>
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>