A set of User Experience Framework (UEF) Snippets for Visual Studio Code. UEF is the official design system of the Social Security Administration.
Create a new HTML document and type uef to see all available snippets.
Use these (or roll your own) after setting up the basic UEF 3 page with !!uef
| Trigger | Description |
|---|---|
| !!uef | Start a new UEF 3 page from a blank document |
| uef-page-business-1 | Business Page Template #1 |
| uef-page-business-2 | Business Page Template #2 |
| uef-page-public-1 | Public Page Template #1 |
| uef-page-public-2 | Public Page Template #2 (for more than 3-5 menu items) |
| Trigger | Description |
|---|---|
| uef-layout-1-col-fullwidth | 1 Column Layout |
| uef-layout-1-col-centered | 1 Column Centered Layout |
| uef-layout-1-col-stacked | 1 Column Stacked Layout |
| uef-layout-1-row-separated | 1 Row Separated Layout |
| uef-layout-2-col-even-split | 2 Column Even Split Layout |
| uef-layout-2-col-left-sidebar | 2 Column Left Sidebar Layout |
| uef-layout-2-col-right-sidebar | 2 Column Right Sidebar Layout |
| uef-layout-3-col | 3 Column Layout |
| uef-layout-3-col-dual-sidebar | 3 Column Dual Sidebar Layout |
| uef-layout-4-col | 4 Column Layout |
| uef-layout-5-col | 5 Column Layout |
| Trigger | Description |
|---|---|
| uef-accordion | Accordion |
| uef-accordion-item | Add an accordion item |
| uef-address | Address (US) |
| uef-address-intl | Address (International) |
| uef-alert | Alert (Info, Warning, Danger, Success) |
| uef-avatar | Avatar |
| uef-back-to-top | Back to Top |
| uef-bank-info | Bank Information |
| uef-banner | Federal government website banner |
| uef-button | Insert a Button |
| uef-button-group | Button Group |
| uef-card | Basic Card |
| uef-card-with-title | Card with more options |
| uef-checkbox | Checkbox |
| uef-checklist | Checklist |
| uef-checklist-other | Checklist with ‘Other’ option |
| uef-combobox | Combobox (dropdown with filter) |
| uef-combobox-item | Combobox Item |
| uef-compound | Compound |
| uef-confirmation-number | Confirmation Number |
| uef-container | Generic Container |
| uef-country | Country (Current) |
| uef-country-historical | Country (Historical) – useful for place of birth |
| uef-currency | Currency ($,£,€) |
| uef-date-md | Date (Month & Day dropdowns) |
| uef-date-mdy | Date (Month, Day, Year – month dropdown, day textbox, year dropdown) |
| uef-date-mdy-dropdowns | Date (Month, Day, Year – all dropdowns) |
| uef-date-my | Date (Month, Year – month dropdown, year textbox) |
| uef-date-picker | Date Picker |
| uef-dialog | Dialog |
| uef-drawer | Drawer |
| uef-droplist | Drop List |
| uef-droplist-item | Add a Drop List item |
| uef-ein | Employee Information Number (EIN) |
| uef-email | Email Address |
| uef-email-confirmation | Email Address with Confirmation |
| uef-error-summary | Error Summary |
| uef-figure | Figure |
| uef-file-input | File Input (upload a file) |
| uef-flex | FlexBox layout |
| uef-flex-item | Add FlexBox item |
| uef-footer-identifier | Federal Footer Identifier |
| uef-footer-slim | Slim version of Federal Footer |
| uef-footer-medium | Medium version of Federal Footer |
| uef-footer-big | Big version of Federal Footer |
| uef-form | Form wrapper |
| uef-gender | Gender (Male, Female, Non-Binary) |
| uef-grid | CSS Grid layout |
| uef-grid-3col | 3-column layout grid |
| uef-grid-3col-template | 3-column layout grid using a template |
| uef-grid-fluid | Fluid layout grid |
| uef-grid-item | Grid layout item |
| uef-header-business | Header (Business) |
| uef-header-public | Header (Public) |
| uef-help | Help dialog |
| uef-hero | Hero (call to arms) |
| uef-icon | Icon |
| uef-indicator | Indicator |
| uef-link | Insert hyperlink |
| uef-link-download | Download link |
| uef-link-email | Email link |
| uef-link-excel | Excel link |
| uef-link-external | External site link |
| uef-link-print | Print page link |
| uef-link-pdf | PDF link |
| uef-link-powerpoint | PowerPoint link |
| uef-link-video | Video link |
| uef-link-word | Link to Microsoft Word file |
| uef-link-zip | Link to compressed Zip file |
| uef-media | Media element (image) |
| uef-mega-menu | Mega Menu |
| uef-menu | Menu |
| uef-multi-select | Multi-Select |
| uef-name-default | Name (Title dropdown, First/Middle/Last text boxes, Suffix dropdown) |
| uef-name-f-l | Name (First/Last text boxes) |
| uef-name-f-m-l-s | Name (First/Middle/Last/Suffix text boxes) |
| uef-name-f-m-l-s-dropdown | Name (First/Middle/Last text boxes, Suffix dropdown) |
| uef-name-f-mi-l-s | Name (First/Middle Initial/Last/Suffix text boxes) |
| uef-name-f-mi-l-s-text | Name (First/Middle Initial/Last/Suffix text boxes) |
| uef-name-t-f-m-l-s | Name (Title dropdown, First/Middle/Last/Suffix text boxes) |
| uef-name-t-f-mi-l-s | Name (Title dropdown, First/Middle Initial/Last text boxes, Suffix dropdown) |
| uef-name-t-f-mi-l-s-textbox | Name (Title dropdown, First/Middle Initial/Last/Suffix text boxes) |
| uef-nav-menu | Navigation menu |
| uef-optional-info | Optional Info |
| uef-page-timeout-warning | Page Timeout Warning |
| uef-paged-timed-out | Page Timed Out |
| uef-pagination | Pagination control |
| uef-password | Password |
| uef-percent | Percent textbox |
| uef-phone | U.S. Phone Number (10-digit number, extension, type dropdown) |
| uef-phone-intl | International Phone Number (country code and number, extension, type dropdown) |
| uef-phone-simple | Simple U.S. Phone Number (Area Code + Number) |
| uef-pill | Pill (Badge) |
| uef-place | Place of an event |
| uef-popover | Popover |
| uef-progress | Progress |
| uef-radiolist | Radio List |
| uef-radiolist-other | Radio List with ‘Other’ option |
| uef-radiolist-series | Radio List Series (compact) |
| uef-reentry-number | Reentry Number |
| uef-required-info | Required Info |
| uef-section | Section |
| uef-show-hide | Show/Hide |
| uef-site-alert | Site Alert (Info, Warning, Danger, Success) |
| uef-skipnav | Skip Navigation control |
| uef-ssn | Social Security Number (SSN) |
| uef-state | State |
| uef-subnav | Sub-Navigation |
| uef-subnav-groups | Sub-Navigation with Groups |
| uef-subnav-groups-nested | Sub-Navigation with Nested Groups |
| uef-subnav-icons | Sub-Navigation with icons |
| uef-subnav-item | Add a Sub-Navigation item |
| uef-summary-accordion | Summary (Accordion) |
| uef-summary-receipt | Summary (Receipt) |
| uef-summary-review | Summary (Review) |
| uef-switch | Switch (toggle) |
| uef-table | Table |
| uef-table-1col | 1-Column Table |
| uef-table-2col | 2-Column Table |
| uef-table-3col | 3-Column Table |
| uef-table-4col | 4-Column Table |
| uef-table-5col | 5-Column Table |
| uef-table-6col | 6-Column Table |
| uef-table-7col | 7-Column Table |
| uef-table-8col | 8-Column Table |
| uef-tabs | Tabs |
| uef-tag | Tag |
| uef-textarea | Textarea |
| uef-textbox | Textbox |
| uef-textbox-icon | Textbox with embedded icon |
| uef-time | Time selection with dropdowns |
| uef-timezone | Time Zone |
| uef-toggle-group | Toggle Group |
| uef-tooltip | Tooltip |
| uef-typography | Typography |
| uef-video | Media element (video) |
| uef-visually-hidden | Visually hidden text |
| uef-yesno | Yes/No |
| uef-zipcode | Zip Code |
| uef-zipcode-plus-4 | Zip Code plus 4-digit extension |
| Trigger | Description |
|---|---|
| uef-alert-slot-header | Alert Header Slot |
| uef-alert-slot-footer | Alert Footer Slot |
| uef-avatar-slot-overlay | Avatar Overlay Slot |
| uef-card-slot-body | Card Body Slot |
| uef-card-slot-header | Card Header Slot |
| uef-card-slot-footer | Card Footer Slot |
| uef-combobox-slot-no-results | Combobox No Results Slot |
| uef-container-slot-background | Container Background Slot |
| uef-datalist | Datalist |
| uef-datalist-item | Datalist Item |
| uef-datalist-slot-no-results | Datalist No Results Slot |
| uef-dialog-slot-body | Dialog Body Slot |
| uef-dialog-slot-footer | Dialog Footer Slot |
| uef-dialog-slot-header | Dialog Header Slot |
| uef-figure-slot-caption | Figure Caption Slot |
| uef-footer-slot-nav | Footer Nav Slot |
| uef-identifier-slot | Identifier Slot |
| uef-input-slot-help | Input Help Slot |
| uef-input-slot-instructions | Input Instructions Slot |
| uef-input-slot-label | Input Label Slot |
| uef-input-slot-support-info | Input Support Info Slot |
| uef-input-slot-overlay | Input Overlay Slot |
| uef-menu-slot-control | Menu Control Slot |
| uef-multi-select-slot-dialog-body | Multi-Select Dialog Body Slot |
| uef-multi-select-slot-no-results | Multi-Select No Results Found Slot |
| uef-popover-slot-content | Popover Content Slot |
| uef-popover-slot-title | Popover Title Slot |
| uef-read-only | Read-Only |
| uef-table-slot-caption | Table Caption Slot |
| uef-table-slot-controls-top | Table Controls Top Slot |
| uef-table-slot-controls-bottom | Table Controls Bottom Slot |
| uef-table-slot-support-info | Table Support Info Slot |
| uef-tooltip-slot-content | Tooltip Content Slot |
package.json and that you have the Extension Manifest fields filled out correctly.vsce package from the command lineYou can only publish extensions using Azure Personal Access Tokens. You need to create at least one in order to publish an extension. Then, you’ll need to create a Publisher, if you haven’t already.
For more detailed instructions on setting up a Personal Access Token and Publisher, see Publishing Extensions.
vsce publish from the command line (you must have a Personal Access Token set up with the vsce tool)Your extension will be published to the marketplace if you have everything set up correctly.
For more information, see Publishing Extensions.