access-nyc-patterns/src/components/text-controller/text-controller.slm

User Interface Patterns for Benefits Access

/
/ Text Controller
/

div class='c-text-controller' data-sketch-symbol=symbol data-sketch-symbol-instance=instance

  button type='button' class='c-text-controller__toggle mb-1 btn-link' data-js='toggle' aria-controls='aria-c-text-controller__options' aria-expanded='false'
    svg class='icon icon-ui-settings'
      use xlink:href='#icon-ui-settings'

    span class='c-text-controller__title-full' Translate & Adjust Text
    span class='c-text-controller__title-short' Translate Text

  div#aria-c-text-controller__options class='c-text-controller__options hidden' aria-hidden='true'

    div class='c-text-controller__languages'
      div class='wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-list-horizontal'
        ul
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' English
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-es wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' Español
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ru wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' Русский
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ko wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' 한국어
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ar wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' العربية
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ht wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' Kreyol
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-zh-hant wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' 繁體中文
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-fr wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' Français
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-pl wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' polski
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ur wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' اردو
          li class='wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-bn wpml-ls-last-item wpml-ls-item-legacy-list-horizontal'
            a href='#' class='wpml-ls-link'
              span class='wpml-ls-native' বাংলা

    div class='c-text-controller__sizer'
      span class='c-text-controller__sizer-text' Adjust text size
      button class='c-text-controller__sizer-btn btn-text js-text-larger'
        svg class='icon icon-ui-plus-circle'
          use xlink:href='#icon-ui-plus-circle'
        div class='sr-only' Larger
      button class='c-text-controller__sizer-btn btn-text js-text-smaller'
        svg class='icon icon-ui-minus-circle'
          use xlink:href='#icon-ui-minus-circle'
        div class='sr-only' Smaller