{"id":773,"date":"2018-05-15T16:45:43","date_gmt":"2018-05-15T16:45:43","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=773"},"modified":"2018-09-26T20:33:50","modified_gmt":"2018-09-26T20:33:50","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/tabs\/usage\/","title":{"rendered":"Tabs usage"},"content":{"rendered":"

Components<\/p>\n

\n\t\tTabs
\n\t<\/h1>\n

\n\t\tTabs help reclaim screen real estate and group sections of information into one page.
\n\t<\/h4>\n

\n\t\tGuidelines
\n\t<\/h2>\n

\n\t\t
\n\t\tText
\n\t\t<\/a>
\n\t<\/h4>\n

Each Tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum. Keep in mind that at mobile widths, the character length of a title will impact the experience. Icons are not permitted in Tab labels.<\/p>\n

\n\t\t
\n\t\tNumber of tabs on horizontal
\n\t\t<\/a>
\n\t<\/h4>\n

A maximum of six tabs may be displayed horizontally. This is to maintain an uncluttered UI.<\/p>\n

\n\t\t
\n\t\tOrder
\n\t\t<\/a>
\n\t<\/h4>\n

When possible, tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.<\/p>\n

\n\t\tVertical Tabs
\n\t<\/h2>\n

\n\t\t
\n\t\tIndividual Account
\n\t\t<\/a>
\n\t<\/h4>\n
    \n
  1. Timeline<\/li>\n
  2. About (includes Custom Fields)<\/li>\n
  3. Addresses<\/li>\n
  4. Data Privacy & Consent<\/li>\n
  5. Household Contacts<\/li>\n
  6. Relationships<\/li>\n
  7. Employment History<\/li>\n
  8. Donations<\/li>\n
  9. Peer-To-Peer Fundraising<\/li>\n
  10. Memberships<\/li>\n
  11. Event Registrations<\/li>\n
  12. Store Orders<\/li>\n
  13. Notes<\/li>\n
  14. Activities<\/li>\n
  15. Workflows<\/li>\n
  16. Sent Emails<\/li>\n
  17. Soft Credits<\/li>\n
  18. Prospects<\/li>\n
  19. Grants<\/li>\n
  20. Solicited Gifts<\/li>\n
  21. Email Series<\/li>\n
  22. Material & Letter Tracking<\/li>\n
  23. MailChimp<\/li>\n
  24. Constant Contact<\/li>\n
  25. Invitations<\/li>\n
  26. CRA Receipts<\/li>\n
  27. Receipts<\/li>\n
  28. Eventbrite<\/li>\n
  29. Volunteer Projects<\/li>\n
  30. Custom Form Responses<\/li>\n
  31. Custom Objects<\/li>\n
  32. Wealth Screening<\/li>\n<\/ol>\n

    \n\t\t
    \n\t\tOrganization Account
    \n\t\t<\/a>
    \n\t<\/h4>\n
      \n
    1. Timeline<\/li>\n
    2. About (includes Custom Fields)<\/li>\n
    3. Contacts<\/li>\n
    4. Data Privacy & Consent<\/li>\n
    5. Relationships<\/li>\n
    6. Donations<\/li>\n
    7. Memberships<\/li>\n
    8. Event Registrations<\/li>\n
    9. Store Orders<\/li>\n
    10. Shipping Addresses<\/li>\n
    11. Notes<\/li>\n
    12. Activities<\/li>\n
    13. Workflows<\/li>\n
    14. Sent Emails<\/li>\n
    15. Soft Credits<\/li>\n
    16. Prospects<\/li>\n
    17. Grants<\/li>\n
    18. Email Series<\/li>\n
    19. Material & Letter Tracking<\/li>\n
    20. MailChimp<\/li>\n
    21. Constant Contact<\/li>\n
    22. Invitations<\/li>\n
    23. CRA Receipts<\/li>\n
    24. Receipts<\/li>\n
    25. Eventbrite<\/li>\n
    26. Custom Form Responses * Shows on Org only if it has been converted from Individual and had responses when it was Individual<\/li>\n
    27. Custom Objects<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      Components Tabs Tabs help reclaim screen real estate and group sections of information into one page. Guidelines Text Each Tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum. Keep in mind that at mobile widths, the character length of a title will impact the experience.…<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":41,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-773","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=773"}],"version-history":[{"count":6,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/773\/revisions"}],"predecessor-version":[{"id":1411,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/773\/revisions\/1411"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}