Widgets
Toggle inline
Non odio id omnis eius itaque voluptas. explicabo laborum voluptatem suscipit harum provident hic delectus vitae repellat quod error officiis qui ut. nihil est quae et excepturi illum cumque vero sed nobis asperiores quo. maxime nobis et amet dolor ut non quae labore dolorem. quo delectus et accusantium ducimus quos suscipit qui quo
Something or other
Corporis cupiditate quidem suscipit possimus laboriosam id qui autem ut labore. eveniet sed quia ipsam in nostrum distinctio et nisi. praesentium dolorem dolores aut tenetur nam repudiandae cumque deleniti expedita ipsa aut consequatur voluptates earum. tenetur debitis illum velit consequatur placeat aperiam et ratione deleniti tenetur illum qui totam libero. sit similique totam in voluptate
Tabs
Tabs can be disabled by setting UCASDesignFramework.tabs.tabsEnabled to false.
Dolorem vero tempora accusantium dolor cumque maiores et fuga sunt consequatur quaerat quos numquam fugiat. repellendus eos omnis accusantium est consequuntur labore exercitationem veritatis voluptatem ab laborum. quibusdam similique at vitae omnis dolores qui quae qui fugit
Et et est sunt laboriosam cupiditate facere ratione praesentium tempora voluptatem. dolorem tenetur sequi quia nam alias. eum quo adipisci non repellendus id nemo doloremque. iusto molestiae officiis nihil adipisci
Ea et repudiandae non consequatur dignissimos quia nemo ut nobis vel fuga aut rem. error doloremque et id error veritatis molestiae aspernatur enim sed. aliquam corrupti excepturi velit et inventore explicabo harum ad illo debitis ratione cum quas earum
Id doloribus sint voluptate quia rerum nisi enim accusantium. dicta quo laudantium illum dignissimos nostrum et sapiente. iusto officia beatae voluptatem tenetur et. perspiciatis aut atque laudantium impedit non reprehenderit natus illum voluptas voluptatem culpa impedit laudantium impedit
Iure consequuntur libero quam vero est est aliquam laudantium et eos. dicta in quis expedita quae. veniam expedita deserunt eos dolor quis minima sit ipsa voluptatem. perferendis unde quidem sed laboriosam vitae esse perferendis explicabo cupiditate
Voluptatibus perspiciatis dolorum ipsa laborum voluptas autem aut tempore voluptatem quod quo. libero rerum dolore pariatur omnis odit natus dignissimos eius sint. eum odit sint et qui maiores laudantium et voluptatem optio voluptas ea voluptatum. ea omnis qui tempora consequuntur hic optio ullam sunt optio ut ut tenetur ut
Cumque nihil fuga omnis esse asperiores fuga aliquid non consequuntur sed accusantium quos est. ut ut est omnis et corrupti est sapiente est aliquam voluptatem aspernatur ut et accusamus. ut laborum error eaque vitae enim nesciunt accusantium harum adipisci fugiat temporibus at. minus eos error et odit quam qui nihil vitae sit optio nam quasi. quia molestiae deserunt dolorem dolorem qui velit error labore quis soluta debitis tenetur omnis. aut culpa eos sapiente ipsam vel et officia. soluta officia cumque suscipit sint accusantium tempora corrupti odit ut natus repellendus debitis
Quo aperiam architecto hic tempore. provident commodi ab sunt accusantium eius voluptatem odit eveniet voluptatem ipsa delectus molestiae. accusamus repudiandae cum eligendi deleniti tenetur consequuntur incidunt voluptates nesciunt ut. corporis et fugiat sunt aut nihil et voluptatem nulla quae explicabo est qui veniam numquam. et quia sequi voluptatem quaerat eveniet iste nulla quisquam. quisquam labore rerum neque et quas officia odit qui
Facere laboriosam qui ratione ut harum dolorem quam. quae provident amet harum omnis qui. repellendus ipsum consequuntur consequatur accusamus deserunt quasi et numquam deserunt quo. corrupti doloribus et beatae aspernatur eum et voluptas. temporibus et quaerat soluta necessitatibus eum. iusto corrupti aut vero ut corporis ex consectetur totam quisquam a magnam non a
Tempora voluptas non repudiandae eligendi. voluptatem quae aspernatur magni in recusandae enim perferendis quisquam sed id quia magnam. aperiam mollitia est ut quia natus impedit quisquam eaque. itaque ut fugiat cum omnis. ut minus quod totam ab est necessitatibus illum voluptate quia omnis nostrum aperiam sint autem. quod maiores voluptatibus rerum modi ullam voluptas voluptatem quos sed laborum non qui nihil saepe
Reprehenderit quo sint non fugiat a aliquam reprehenderit id delectus numquam enim. est quia non sunt est aut vel. sunt et harum et tempore totam ad qui ut corporis architecto qui. voluptas aliquid rerum possimus necessitatibus dolores quisquam
Totam distinctio quisquam vel vel ullam sed blanditiis sed vitae veniam optio quo. provident accusamus provident quo. consequuntur possimus officiis distinctio reprehenderit doloribus nihil. nobis omnis nihil saepe atque exercitationem eum ut. sunt repellendus et magni eos molestiae id. explicabo molestiae saepe pariatur maxime sint quo. dolores aperiam eaque aut quia iure optio aut aut impedit
Tabs fluid tabs
Ut laudantium eum cupiditate sint aut rerum aut totam beatae architecto laborum. cumque consequatur minus illum cum nobis odio deserunt quae et. qui amet labore laudantium corrupti cumque eum inventore deserunt vel iusto aut quia et inventore. earum ea numquam cumque necessitatibus. et dolor fuga porro suscipit sit similique quia sint sed
Ipsam cum nobis tempora provident. nulla minus aliquam laboriosam culpa harum et a. occaecati quaerat assumenda nemo delectus nam quasi enim soluta. ut ratione aspernatur et omnis esse voluptatibus cum voluptate numquam id voluptatem vero aliquam. explicabo provident possimus tempore ea ut autem maiores in sunt modi aut qui
Et quis est corrupti temporibus accusantium expedita rerum aperiam sed ut. soluta mollitia iusto nostrum omnis optio ad sint et dolorem quasi accusamus veniam molestias. harum qui itaque rerum autem recusandae aliquam corrupti ducimus et eos enim et. rerum officia ut quod adipisci hic et voluptas velit ratione deleniti optio aut. qui odio veritatis eum assumenda aut doloribus aut sed ut cupiditate aspernatur. veritatis deserunt animi ipsum recusandae et totam iusto ducimus. sapiente fugit similique illum et et
Facilis modi sunt vitae inventore sit laudantium minus non dolorum maxime quia facere corrupti nesciunt. quo doloribus sunt ipsam voluptatem nobis esse nemo. minus repudiandae quam velit numquam harum alias et vero nesciunt itaque dolores. incidunt soluta architecto fugiat ad. et iusto ut vel omnis. sint pariatur minus commodi esse voluptatem nobis quo sed quas aliquam commodi nemo deserunt
Repudiandae magnam autem et unde aut omnis nemo consequatur omnis. aut molestiae quae ducimus alias voluptas exercitationem itaque aut tempore. id et laudantium perspiciatis inventore inventore. explicabo error similique consectetur illo
Et impedit beatae placeat quia quo quae occaecati est labore. eos et molestias perspiciatis recusandae voluptates iure fuga est laboriosam molestiae nihil vel quam numquam. voluptatibus accusantium architecto id fugiat. qui architecto inventore illo sint eligendi corrupti voluptatum et non
Et officiis quis placeat. et eligendi rem veritatis sed dolorum provident harum nihil autem cupiditate cumque suscipit. mollitia quo ea et. facere dolore qui praesentium et non optio consequatur expedita quidem delectus quo voluptatum. cupiditate asperiores aperiam facere minus omnis necessitatibus vel saepe ab. provident sint esse quisquam
Qui autem porro vero velit. magni ea deserunt recusandae deleniti vero consequatur est. est quis architecto commodi ad. autem numquam non modi voluptatem. est soluta autem est et esse sed nulla dolores animi et. dolorem voluptatem placeat non atque ut quibusdam exercitationem rem quae esse placeat similique omnis occaecati
Et quaerat molestiae voluptas. quod libero sit voluptatem quam eius laborum in qui. aut consequatur nemo esse et illo
Officiis qui odio nostrum in vel molestiae nihil quia soluta inventore. nihil voluptatem aliquam quia aut quis quae. quis rerum doloremque velit cupiditate ut ratione. aut ipsam aperiam nihil velit tempore facilis animi incidunt quis
Id voluptates alias sed facere laudantium incidunt. et voluptatum ab voluptas. ut sint alias commodi quo rerum sit quia eos sunt velit. voluptatem laboriosam et fugiat laudantium dolorem corrupti recusandae vel dignissimos officia recusandae quam. dolor voluptates autem maxime ut dolorem autem voluptatem sint quia cumque consequuntur maiores nemo
Enim dolor facilis consequatur nesciunt labore quia quia nesciunt sint saepe explicabo doloremque molestiae quia. et eum consequatur maiores magnam quis. libero ut qui ut autem quos cumque placeat in ut. qui et rem et nihil minima sed
Tabs vertical tabs
Vertical tabs can be used for small amounts of inline content.
Adding the tabs-container--fixed-height class makes all the tabs equal-height on initila load and subsequest window resize.
Eum qui nisi nesciunt. maxime perspiciatis itaque praesentium nam consequuntur excepturi sunt voluptas. at fuga atque atque quia ut a quibusdam aliquid accusamus quasi. officia temporibus aspernatur qui accusantium deleniti nostrum. quia illo dicta officia quo laudantium fugiat vel labore. eaque consequatur consequuntur rerum rerum quia perspiciatis assumenda voluptas alias doloribus. ea quasi provident voluptatem qui omnis sit tempore alias ut voluptas
Optio in nemo tempora debitis. illum dolores vel odit. qui alias optio consequatur illum est nobis
Molestias fuga ipsam vero autem eligendi dolorum perspiciatis et iure. dolorem nam atque sunt. sed quo omnis ab accusantium. cupiditate sint et ut quam et ut dolores voluptates rem alias aspernatur vel. iusto dolor praesentium repellat autem voluptatem. eius vel consequuntur tempora atque a et ea placeat quaerat perferendis eum occaecati a voluptatem. rerum eius possimus beatae aut mollitia suscipit
Dolorem ab aut nulla minima voluptas animi vel reprehenderit dolorem. qui saepe saepe numquam consectetur mollitia beatae dolore quasi expedita nemo vitae. minus et enim reiciendis ut. qui aut deleniti molestiae earum tempore officiis accusantium at error voluptatem expedita similique dolores dolorem. atque impedit quisquam beatae soluta ipsam autem consequatur fuga dolore dicta natus. iste tempora neque minus odio deleniti reiciendis temporibus et asperiores. culpa neque qui autem aliquam qui
Eos ullam libero fugiat velit ipsum fugiat sed ut itaque occaecati consequuntur. officia quaerat nemo labore nihil et error magni hic et magnam sunt cum qui. nostrum alias modi laborum omnis exercitationem quaerat et et esse quia et rerum ea nihil. exercitationem fuga et et ab
Vel ut unde deleniti sequi et sapiente facilis architecto ipsum rerum. officia at maxime sunt voluptate hic. nobis et odit aut nihil in et
Et nihil mollitia eaque dolores quia. velit dignissimos ut voluptatem voluptatem rem iure quam error molestias consectetur veritatis. amet atque aut aut atque. error ipsum illum at consequuntur voluptate. eum iusto necessitatibus sit soluta culpa eum qui itaque et dolores quam quae voluptas et
Modi itaque ipsam quia. consequuntur quod eum corrupti porro natus distinctio. velit voluptatem aperiam deleniti aut
Optio qui eveniet reprehenderit sed. est dolorem ipsa numquam voluptas assumenda est aut aut est in. consectetur dolores eaque maiores velit est ullam. et voluptatibus ut iusto culpa et non perferendis voluptatem doloribus iste. et quas expedita repellendus vel autem alias velit. alias ab asperiores fugiat ut voluptatum. cupiditate ut est ut dolor consequuntur incidunt corrupti dolorem
Temporibus nesciunt distinctio tempore quia in odio suscipit dolorem quia sequi quam in. temporibus reprehenderit nam labore ad in laborum eum libero sed. tenetur omnis dolorem dolor consequatur excepturi rerum est ut asperiores ut. ratione dolorum et in labore sit ipsam
Corrupti eligendi ut quis quasi ut minima dolorem. quam vitae id odio iusto dolorum vel necessitatibus iure expedita sint molestias nobis est. ipsa cumque nihil voluptas sapiente consequatur est. est architecto quo velit architecto accusantium commodi vel quia. eius molestias quod quo eum laudantium in accusamus exercitationem minus qui sint esse vel. illo nemo commodi est iure corporis ipsam rem nihil repudiandae explicabo placeat. eos qui eos est voluptates
<div class="tabs tabs-container tabs-container--vertical-tabs tabs-container--fixed-height" data-tabs-container="">
<div class="tabs__tab-container">
<a href="#" data-tab="1" class="tabs__tab tabs__tab--active">Eum voluptatibus</a>
<a href="#" data-tab="2" class="tabs__tab">Sunt et</a>
<a href="#" data-tab="3" class="tabs__tab">Sit enim</a>
<a href="#" data-tab="4" class="tabs__tab">Labore id</a>
<a href="#" data-tab="5" class="tabs__tab">Autem et</a>
</div>
<div data-content="1" class="tabs__content tabs__content--active prose">
<p>Maiores impedit eaque rerum expedita pariatur libero molestiae. nam officia vel quo voluptates aperiam voluptatibus similique explicabo assumenda beatae qui. sed sit culpa ipsam voluptatem consequatur et at consectetur aut. et quidem ipsum voluptatem voluptatem. est quibusdam at consequuntur. rerum magnam excepturi aut</p>
<p>Possimus eos fugiat ea et unde veritatis dolores suscipit commodi aliquam et recusandae velit. voluptatibus magnam est officiis autem neque accusantium ipsum commodi perferendis dolores ratione alias et. fugit in similique quaerat et officia minus. ut assumenda aut iste aut enim a a ipsam repellat consequatur placeat totam. placeat illo qui cumque velit eaque illo. unde est sit illo exercitationem accusantium aperiam sequi sit eveniet. nostrum magnam quae magnam dolor quia eius aut et laboriosam ratione molestiae et</p>
</div>
<div data-content="2" class="tabs__content prose">
<p>Ut ipsum numquam rem culpa a doloremque. inventore rerum necessitatibus omnis atque quia harum qui tempora. minima quas quasi blanditiis dolorum expedita ut molestias. deserunt iure nostrum nihil repellat architecto corrupti. placeat minus maxime et unde asperiores id accusantium dolores aut voluptatum rem consequatur corporis</p>
<p>Est sit nulla ducimus labore cupiditate cumque beatae quia iusto maxime. numquam quia eos est officiis autem aperiam et impedit beatae et quo est corrupti minus. quia ipsam corrupti commodi aut id accusamus consequatur quidem vitae. fugiat consequatur ullam nostrum ea vitae aliquam</p>
</div>
<div data-content="3" class="tabs__content prose">
<p>Libero ipsam animi omnis similique dolores aperiam possimus dignissimos voluptas itaque omnis temporibus consequuntur iure. distinctio reiciendis voluptatem provident voluptas quisquam officia. voluptatem deserunt incidunt error dolorum amet aut rerum ipsam et quia. consequatur est enim eaque distinctio consequatur odit inventore dolor quas. temporibus atque ullam ea sed deserunt quia cumque nihil autem qui aliquid culpa</p>
<p>Aliquam est excepturi corporis cum maiores ab dignissimos voluptas fuga voluptatem magnam. consectetur et architecto cumque aliquam veniam explicabo reiciendis ipsum et est ut. quia at est deleniti velit et facilis esse saepe aut. repellendus veniam eaque deserunt et omnis et atque quis inventore reiciendis aspernatur distinctio nihil. enim veritatis voluptatem non id. exercitationem adipisci beatae asperiores itaque voluptate sit perspiciatis placeat quae ex vel. consequatur tempore porro sequi qui dolorem esse dolores aliquid dolorem</p>
</div>
<div data-content="4" class="tabs__content prose">
<p>Molestias unde sint neque aut. deleniti libero ea sunt non. esse minima et hic dolores delectus eius quis labore occaecati aliquam fugiat quia et. numquam recusandae sunt est impedit qui repellat doloribus. fugit et iste distinctio. id tenetur asperiores nulla rerum sapiente tempora et et est. optio et dolore atque reprehenderit repellendus</p>
<p>Deleniti est aspernatur quae sed molestias odio ut ut eveniet est dicta voluptatibus. reprehenderit est consequatur voluptatem dolores error aperiam quae iure. nisi et asperiores voluptas ipsam minima quidem sunt saepe</p>
</div>
<div data-content="5" class="tabs__content prose">
<p>Dolor perspiciatis corporis similique corrupti corporis corrupti est quae ducimus in mollitia. voluptas quia tempore dolorem placeat consequatur sit velit. commodi reprehenderit dolorem vel dolor saepe quis pariatur ipsam perspiciatis exercitationem enim</p>
<p>Reiciendis maiores nisi id quia quisquam sit rerum aliquam autem accusantium et. facere nihil quod voluptatem vero vel veritatis. qui natus magni corporis unde ut esse. nisi consequuntur animi sapiente suscipit eligendi illo voluptas at occaecati et. et sit suscipit ratione consequuntur consectetur earum temporibus amet voluptatem consectetur ad possimus. dolores dicta ut nam laudantium sunt et dolor recusandae quis sit repellat error expedita dolores</p>
</div>
</div> Standalone tabs
Tabs can be used on their own as a means of secondary navigation.
Normal
Avoid nesting the tabs within a .tabs-container
<div class="tabs__tab-container">
<a href="#" class="tabs__tab tabs__tab--active">Cumque excepturi</a>
<a href="#" class="tabs__tab">Molestias cum</a>
<a href="#" class="tabs__tab">Quia nulla</a>
<a href="#" class="tabs__tab">Laudantium voluptates</a>
<a href="#" class="tabs__tab">Asperiores atque</a>
</div> Admin variant
Simply add the .tabs__tab--admin variant class to individual tab items.
<div class="tabs__tab-container">
<a href="#" class="tabs__tab tabs__tab--admin tabs__tab--active">Est libero</a>
<a href="#" class="tabs__tab tabs__tab--admin">In in</a>
<a href="#" class="tabs__tab tabs__tab--admin">Est nisi</a>
<a href="#" class="tabs__tab tabs__tab--admin">Sint placeat</a>
<a href="#" class="tabs__tab tabs__tab--admin">Repellat repudiandae</a>
</div> 