OCDE - Pattern Library v1.13.0

Map page - Dialog 

<div class="dialog dialog-select dialog-is-open l-dialog" id="dialog" tabindex="-1">
    <div class="dialog-x-content">

        <nav class="sidebar sidebar-dialog ">
            <div class="brandvoice brandvoice-dialog">
                <button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
            </div>

            <div class="sidebar-x-options">
                <button class="sidebaroption sidebaroption-is-active" type="button">
                    <span class="sidebaroption-x-title">Child Development or Early Care and Education</span>
                    <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Family and Consumer Sciences, General</span>
                    <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Food Processing and Related Technology</span>
                    <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Gerontology</span>
                    <span class="sidebaroption-x-body">Work with older adults.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Hospitality</span>
                    <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Natural Resources</span>
                    <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Nutrition, Foods, and Culinary Arts</span>
                    <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                </button>
                <button class="sidebaroption" type="button">
                    <span class="sidebaroption-x-title">Public Relations</span>
                    <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
                </button>
            </div>
        </nav>

    </div>
</div>
 
<div class="{{render '@dialog--select'}} {{render '@l-dialog'}}" id="dialog" tabindex="-1">
  <div class="dialog-x-content">


    <nav class="{{render '@sidebar--dialog'}}">
      <div class="{{render '@brandvoice--dialog'}}">
        <button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
      </div>

      <div class="sidebar-x-options">
        <button class="sidebaroption sidebaroption-is-active" type="button">
          <span class="sidebaroption-x-title">Child Development or Early Care and Education</span>
          <span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Family and Consumer Sciences, General</span>
          <span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Food Processing and Related Technology</span>
          <span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Gerontology</span>
          <span class="sidebaroption-x-body">Work with older adults.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Hospitality</span>
          <span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Natural Resources</span>
          <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Nutrition, Foods, and Culinary Arts</span>
          <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </button>
        <button class="sidebaroption" type="button">
          <span class="sidebaroption-x-title">Public Relations</span>
          <span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
        </button>
      </div>
    </nav>


  </div>
</div>
 
{
  "bannericon": "hospitality",
  "bannertitle": "Hospitality, Tourism & Recreation",
  "bannersubtitle": "You like to make people feel at home.",
  "lMapContext": {
    "modifier": "u-hidden-maxdesktop"
  }
}

No notes defined.