As of January 3rd, 2023 the Working NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Text Controller
The Text Controller Object uses a Dropdown Component to display text controls that are available for the application.
Demonstration
Translate Text
Markup
<div class="o-text-controller bg-scale-1 w-full mx-3" data-js="text-controller" id="aria-c-text-controller"> <div class="o-text-controller__inner"> <div> <div class="text-end"> <button aria-controls="aria-c-text-controller" aria-expanded="false" class="btn btn-primary btn-small" data-dialog="close" data-js="dialog"> <svg aria-hidden="true" class="icon-wnyc-ui"> <use href="#feather-x"></use> </svg> <span>Close</span> <span class="sr-only">and return to site</span> </button> </div> <p class="h4 block w-full m-0 py-2 text-alt">Translate Text</p> <div class="o-text-controller__options"> <div class="o-text-controller__languages"> <div> <ul> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/index"> <span>English</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/es"> <span>Español</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ru"> <span>Русский</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ko"> <span>한국어</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ar"> <span>العربية</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ht"> <span>Kreyol</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/zh-hant"> <span>繁體中文</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/fr"> <span>Français</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/pl"> <span>polski</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/ur"> <span>اردو</span> </a> </li> <li> <a href="https://cityofnewyork.github.io/working-nyc-patterns/demos/bn"> <span>বাংলা</span> </a> </li> </ul> </div> <p> <svg class="icon-logo-google-translate" role="img"> <title>Powered by Google Translate</title> <use href="#logo-google-translate"></use> </svg> </p> </div> </div> </div> </div> </div>