uef-vscode-extension

UEF Snippets for VSCode

A set of User Experience Framework (UEF) Snippets for Visual Studio Code. UEF is the official design system of the Social Security Administration.

Install UEF Snippets

Create a new HTML document and type uef to see all available snippets.

Page Templates

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)

Layouts

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

Components

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

Named Slots

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
uefuk-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