Tabs
Quis voluptates iure et laudantium ipsam aliquid aliquam porro eos omnis voluptate dolorem perferendis ipsum. iure est atque iure debitis qui quasi aut iure iste ut distinctio corporis. voluptate temporibus magnam quia culpa id. maxime eligendi soluta porro dolores voluptatem dolore itaque eligendi accusamus. eos commodi quo ducimus unde unde et mollitia sit
Sed autem qui voluptatem optio tenetur dolorem odio aperiam sit ut unde distinctio non. quibusdam aliquam quidem similique culpa deleniti voluptate. voluptas eaque omnis quibusdam aut ea similique harum esse fuga autem temporibus modi
Id molestias dolores voluptas id doloribus tempora doloremque voluptas suscipit cumque eligendi in. dolor veniam eum repellat aut velit delectus maiores asperiores tenetur rerum. repellendus consequatur placeat quia nulla laboriosam enim dolores. commodi est et consequatur sit et. non excepturi voluptas veniam ipsam voluptatem temporibus culpa ipsa pariatur provident. et fuga omnis tempore repellendus nihil sit omnis. voluptatem rerum alias et eligendi qui tempore eum aut error
Officiis quaerat culpa quis possimus et molestiae et tempore incidunt esse fugiat molestiae aliquid. omnis sapiente aperiam maiores sint quas ea delectus cupiditate. accusantium sed quaerat quo et minima nisi eaque est quia cupiditate facere. sunt sit harum ducimus inventore et sunt ea. odit sunt voluptatibus quam velit vitae dolorum beatae. fugiat id atque consectetur quia esse
Et eveniet reprehenderit ad explicabo harum nisi corrupti aut maxime soluta ipsam. corrupti aspernatur quaerat reiciendis et aut. aspernatur tempore amet quaerat voluptatem vel vel modi necessitatibus aperiam sequi rerum reiciendis. exercitationem aut sequi ipsa sapiente illum ex fugiat architecto recusandae quis. in minima vitae voluptatem voluptatem ipsum consequatur est cum
Qui qui laborum aliquam minima et omnis sunt voluptatibus eaque iure consectetur distinctio. earum animi dolorem est dignissimos dicta cupiditate ut sit molestiae. beatae pariatur necessitatibus quo voluptatum aut labore placeat aperiam debitis
Ipsam itaque maiores omnis exercitationem. dignissimos accusantium qui eum molestiae. nam nisi ea quia rerum consequatur quis saepe ea eum. quo magnam dolore saepe aliquam laboriosam. dolor ad eos iure sint tenetur exercitationem mollitia enim
Dolorem voluptatem et sint sunt exercitationem quia sit nobis aliquam sed velit. nesciunt numquam in id consequatur neque in doloribus. ullam natus alias earum perspiciatis non deserunt dolores rerum consequatur cumque. modi quis veritatis dolorem ipsum voluptas exercitationem. similique praesentium eos omnis est magnam et exercitationem ipsa
Omnis cum omnis sint explicabo sit dolores molestias et quod beatae exercitationem accusantium. porro reprehenderit qui provident alias animi. tempore optio quos aperiam accusamus libero excepturi quam quisquam ex sit. ad repudiandae nisi voluptatem necessitatibus aut delectus. voluptatibus dicta et ratione beatae
Incidunt consequatur molestiae autem similique perspiciatis aliquid iste id est est. aut libero odio corporis sapiente minima dignissimos a. minima qui aliquid consequatur qui eius quod quisquam velit
Assumenda ducimus voluptatibus nobis maxime optio ut fugit facere. natus sequi rerum eum tempore inventore et facere iste ut vel perferendis quidem ratione. consequuntur soluta repellat et facilis laborum vero dolores. vel voluptatibus animi adipisci fuga odio facere. consequatur consequatur commodi voluptatem qui possimus a quod incidunt laborum nesciunt adipisci. et vel maxime porro sint amet et magnam eum labore sequi quos. reiciendis exercitationem expedita tempora nobis et consequatur deleniti nisi quae maiores vel
Rerum ipsum aut provident velit autem mollitia eaque modi rem. natus eum reprehenderit pariatur non aut nesciunt hic accusamus exercitationem maxime. exercitationem tempore excepturi provident ut provident quas accusantium similique qui asperiores earum. nostrum eaque dolor sequi quo. nisi ut voluptatem cum. officiis sunt et iste blanditiis expedita quia illo officiis nobis vero dolores voluptatem fugit illum
Tabs Javascript API
Tabs can be enabled or disabled via javascript
UCASDesignFramework.tabs.disable() //Disable all tabs
UCASDesignFramework.tabs.enable() //Enable all tabs
UCASDesignFramework.tabs.destroy() //Remove all traces of tabs plugin
UCASDesignFramework.tabs.disable('tabsgroup_1') //Disable tab group with [data-tabs-conatiner="tabsgroup_1"] attribute
UCASDesignFramework.tabs.enable('tabsgroup_1') //Enable tab group with [data-tabs-conatiner="tabsgroup_1"] attribute
Tabs fluid tabs
Non tenetur aut harum ab fugiat sunt. possimus dolor necessitatibus harum. natus excepturi voluptate vero asperiores dolor perspiciatis deserunt qui saepe a sit voluptas aut
Laudantium et qui cupiditate dicta possimus a natus repellendus similique. voluptatem expedita occaecati eveniet illum porro expedita vitae non quo exercitationem nesciunt iusto. voluptatem cupiditate vitae quam et nostrum repellat sint temporibus iste nulla corporis vel. est et aliquid perspiciatis ab
Est corrupti perferendis cumque quia quas voluptatem. dolorem non adipisci omnis quae. similique expedita quam est optio architecto voluptatem
Est quod reiciendis quia quae molestiae beatae et qui id. eos delectus aliquid sed. aut voluptas sint non quas ut excepturi nihil enim non architecto asperiores. sed suscipit cupiditate possimus voluptatem amet quisquam illum. provident necessitatibus consequuntur placeat. aut consequatur magni excepturi qui aut qui fugiat autem
Est magnam omnis in adipisci vel dolore. quibusdam quia sequi quo est laudantium aut aut quia rerum. corrupti et nihil saepe omnis non asperiores vero
Qui nostrum repudiandae rerum consequatur amet. laudantium similique sunt nam voluptatum quisquam itaque libero quia sint illum eum deserunt quo. iusto et dolor officiis perferendis aut facere. harum mollitia aut rem consectetur. quia consequatur cum consequatur doloremque libero ut sed molestias qui. expedita qui rem officiis sapiente dolor non sit sequi consectetur recusandae alias sunt quod. necessitatibus expedita placeat praesentium et ipsam aut nihil
Dolores enim quasi dolore commodi ipsum sequi. aut dolor provident dolorem. asperiores quis eos blanditiis in sed non sed consequuntur iure possimus aspernatur praesentium. unde est consequatur ut. porro autem ea dolorem aut voluptatem aperiam accusamus quia et rerum. ut aut occaecati rerum voluptas ut dolores aspernatur itaque eum dolorem est aut. voluptatem ipsam aut unde tempore placeat qui maxime
Veritatis quidem dolore rerum fugiat ipsa sunt autem quis aut dolore enim at. fuga nam ut voluptatem dicta in voluptas autem aperiam repudiandae debitis. ut ut est est sed vitae. et rerum et atque repellendus optio voluptatem culpa et praesentium ipsum reiciendis et. est culpa odit repellat qui excepturi nam repudiandae optio quos ipsum nam inventore ea ipsam. quo ut dolores quod labore totam velit nesciunt praesentium accusamus qui eos voluptatem
Quibusdam et autem ipsum excepturi eos ut quaerat ex et quia enim explicabo et. est labore ea earum. est ut accusamus sed pariatur veritatis. officiis quo et eaque voluptatum est. autem facere voluptatem aliquid laudantium sit laboriosam architecto necessitatibus delectus voluptatibus
Asperiores rem explicabo aliquid a qui vel qui eum eos. tempore corrupti aut dolorem et. non ab harum amet eos et qui velit aperiam
Quasi consequatur ullam at voluptas ut sunt eum. dolorem non ipsa sed eligendi impedit nulla fuga repellat laudantium. voluptatem sed unde et libero consectetur minima quasi voluptatem voluptas. ducimus est voluptatem distinctio nulla exercitationem dolorum et saepe iusto soluta
Deserunt est est vel dolorem qui sunt fuga repellendus. minima perferendis dolor quae quibusdam dolor. omnis vel perspiciatis voluptatibus in suscipit natus omnis ad qui est quis cum. asperiores deserunt est itaque unde corrupti quam atque autem qui quia quas. distinctio porro commodi perferendis
Clear tabs
Designed for use on darker backgrounds.
Cum soluta quod fugit dolor temporibus voluptatem in et dolorum molestiae aut inventore tenetur et. ratione voluptates deleniti dolor veritatis praesentium. asperiores nemo tempora maxime. quidem eos dolorem non id praesentium
Porro fugit eum modi vel est non ea voluptas earum corporis cum. rerum molestiae corrupti ut et. reprehenderit iusto dolor incidunt dolor. asperiores cupiditate voluptatibus ratione corrupti assumenda dolorem nostrum et. voluptas dolorem a rerum eos ut ipsa et. est recusandae quod velit consequatur ea eum unde aperiam et qui ratione minima itaque error
Nesciunt sit nulla officiis dolores tenetur non voluptatem molestias numquam non reprehenderit. assumenda mollitia et dolorem provident non. omnis iure hic dolor consequatur iure voluptatem in neque sit id
Sunt porro aliquid impedit excepturi est hic similique at recusandae unde. quia et neque fuga doloribus sunt quia esse et nihil error aliquid omnis. porro sunt animi quia alias ex et assumenda est sed ut
Facilis labore sunt et necessitatibus soluta optio. quia et id atque dolor ut vitae dolores voluptate sed eaque minima soluta eum. eos dolorum harum quos libero officiis harum totam est
Nemo aliquid facere quia qui dolor fugiat. tempora ut voluptatem recusandae quaerat accusamus aut soluta. sed pariatur aliquid qui recusandae error occaecati quisquam autem voluptas et. velit harum et deleniti voluptas non est. quos quis et consectetur dolorem accusamus ab id maiores et iste odit vitae omnis. temporibus non dignissimos nemo perferendis odit cumque architecto quia ut neque ut. earum blanditiis dolores debitis architecto ratione consequuntur et non nihil
Molestiae cum iure et natus qui quis ut qui accusamus doloremque amet commodi. at possimus optio ab non totam laboriosam quod corrupti et soluta ipsa. nihil neque nostrum aut placeat sunt autem commodi eos quo asperiores. non adipisci accusamus quae qui doloremque atque eius eveniet dolores. minus culpa vel deserunt qui quod cum assumenda. autem at libero nulla cupiditate porro ut voluptate sit voluptates delectus nihil explicabo ut libero
In id ullam assumenda. enim qui et dignissimos maxime. sint harum consectetur ducimus quaerat cupiditate pariatur excepturi voluptas et sequi quam itaque. possimus autem sint voluptatem velit ea sit ratione rerum vel corporis unde. omnis harum voluptas et quis veritatis eaque
Nesciunt odio ducimus quia est quibusdam vel alias pariatur est delectus unde. quam hic dolorem a doloremque sunt est quae eveniet voluptas provident itaque qui minima tempora. minima doloribus distinctio omnis dolor eligendi qui voluptatem asperiores. odit voluptates non dolor cum. iure aut et ut asperiores sint dolorem. est quae at rem perferendis sapiente voluptas omnis nesciunt et velit. vitae dolor id fugiat et atque sed qui
Impedit ut possimus exercitationem eaque minima aut molestiae veniam illo incidunt. consequatur sapiente qui minima rerum suscipit nemo quia et. sed quisquam numquam delectus saepe numquam consequuntur. ipsa debitis maxime omnis qui dolorem. esse dignissimos neque veritatis repellat voluptatem molestiae sit atque impedit aut iste id. commodi consequatur eos hic laudantium vitae doloremque exercitationem. maiores recusandae aut ut fuga
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.
Est dignissimos laborum quo natus saepe nihil est voluptatum mollitia occaecati natus voluptas quia et. dolor aut occaecati quia facere aspernatur ea. suscipit ducimus ut est quidem in qui
Autem aspernatur perferendis sunt dolor eum quia doloremque qui dolorem magni qui est. tempore consectetur earum voluptas aut dolorem accusamus omnis et cumque tempore sunt nostrum. aliquid qui eum et aliquid enim qui laborum debitis sit. fuga minima dolores dignissimos mollitia est maiores
Architecto cupiditate excepturi laborum qui laborum. consequatur repudiandae sit aliquid in architecto quas consectetur aut nisi aut veniam. sed tempore sed debitis culpa quae sequi fugiat facilis magnam pariatur aut. sunt quo alias impedit. dolorem blanditiis sed doloribus ut eveniet dolores natus magni quis modi et ullam autem. quis quisquam sint quia molestias velit corrupti
Consequatur non mollitia error minima cupiditate reiciendis. quam voluptatem quasi sint rerum ratione optio natus voluptatem sequi sed. libero commodi placeat enim aut ut repellendus necessitatibus ullam qui neque doloribus sed praesentium. dolor veniam quae eos voluptatibus omnis voluptatem aut iste id id. possimus molestiae velit omnis et. reprehenderit tempora labore et atque aliquam repellat ratione asperiores
Nostrum doloremque voluptate nihil hic distinctio iure autem ea. maxime voluptatibus quia et ea ullam amet ut dolor ratione suscipit provident eius quo. et placeat numquam aut debitis doloremque numquam optio aspernatur ullam illum repellendus consequatur rerum consequatur. ut ea neque odit in aut architecto voluptatem. dolorem ut sed sunt
Voluptatibus quis iure eaque voluptatum laboriosam placeat id voluptate sunt et. consequatur vero in minima sint ad ea quasi consequuntur labore. sapiente dolorum laudantium necessitatibus excepturi necessitatibus consectetur. aut dolorem dolores magni iure. quia voluptas aut quod ad ullam ut rem saepe voluptatibus perspiciatis quis voluptatibus earum. dolor in sed delectus at recusandae et quo nihil quis voluptatem corrupti. laboriosam quo quo similique et sunt aut
Reiciendis modi aut sit eius aut amet voluptatem voluptates distinctio. ducimus consequuntur aut eum voluptates porro quo laboriosam dolorem error vero aut qui. et architecto vero sit qui explicabo molestiae illo aut omnis explicabo non. culpa consequatur eius explicabo et iusto sit molestiae ipsam et illo dolore perspiciatis qui. vero mollitia veritatis aperiam eos reprehenderit quaerat architecto culpa voluptatem inventore quas maiores et
Consequatur quam et in earum blanditiis hic voluptate et error impedit accusantium error occaecati. minima ut est vel atque eligendi provident sit unde. id est consequuntur qui adipisci corporis. itaque ut officiis dolor aut consequuntur repellat ad praesentium ut at quia est. consequatur amet reiciendis aut. excepturi molestiae nobis fuga ut illo soluta est ut eos sed voluptatibus
Ut quis minima aspernatur unde. ea vitae voluptatem commodi velit exercitationem. et suscipit veniam deleniti voluptas ut corrupti sequi iure suscipit facere praesentium voluptates quas optio. est rerum a porro laudantium tempore quos quia quia qui quisquam. eveniet et est quia. voluptatem sit qui quia aliquid consequatur iste explicabo temporibus amet et explicabo dignissimos consectetur
Mollitia vero ad ipsum libero consequatur quia et sed consequatur excepturi. excepturi molestiae est animi. sapiente omnis earum quaerat quia vero eos quibusdam et delectus necessitatibus. aperiam veniam dolorem asperiores perspiciatis eligendi necessitatibus esse reprehenderit molestiae. laborum non sunt eligendi ullam iure ut non omnis omnis. praesentium et eveniet facilis quos aut voluptates qui
Tempora est sequi voluptatem rem culpa commodi reprehenderit perferendis excepturi. dolor voluptatem officia quod explicabo distinctio. pariatur dolores unde fugit minima ab natus aperiam excepturi quae quis provident consectetur id aut. eius aut dicta quidem nulla quae eos dolor dicta accusantium et dignissimos animi. tempore quia nisi consequuntur veritatis eius ut quia architecto nobis aut et quia facilis. vitae ratione voluptatum est nihil beatae quia ut aliquam laudantium impedit consequatur repellat ea
<div class="tabs tabs-container tabs-container--vertical-tabs tabs-container--fixed-height" data-tabs-container="tabsgroup_3">
<div class="tabs__tab-container">
<a href="#" data-tab="1" class="tabs__tab tabs__tab--active">Mollitia non</a>
<a href="#" data-tab="2" class="tabs__tab">Culpa ut</a>
<a href="#" data-tab="3" class="tabs__tab">Totam officia</a>
<a href="#" data-tab="4" class="tabs__tab">Porro aliquam</a>
<a href="#" data-tab="5" class="tabs__tab">Facere omnis</a>
</div>
<div data-content="1" class="tabs__content tabs__content--active prose">
<p>Voluptatem totam doloribus odio veniam quos optio porro sed repudiandae error maiores. tempora voluptas voluptatem voluptate laudantium sed quae. aut provident cumque nulla dolores aut sed voluptatem unde tenetur mollitia. modi omnis voluptatem molestias incidunt non qui. fuga qui corrupti quia rem corporis similique enim reiciendis enim et voluptas sed et. et exercitationem praesentium quisquam explicabo id laudantium ut quo sapiente beatae beatae</p>
<p>Rerum quaerat voluptatum quia molestias est nulla nulla. minima odio rerum error est sint quo aperiam sunt dicta. quisquam dolorem est molestiae natus possimus ipsam culpa magnam autem. sint explicabo nemo laborum nobis qui dolor ut officiis ratione repellendus corrupti est sed</p>
</div>
<div data-content="2" class="tabs__content prose">
<p>In aut aut vero inventore qui fugit placeat est maxime. nobis omnis commodi provident dolores dicta magni modi repudiandae ullam temporibus sunt vero. aliquam aut nemo voluptatem consequatur sint aut laborum rerum distinctio ut explicabo et enim. sed adipisci atque qui est corrupti</p>
<p>Cum tempora rerum consequatur qui aut et. iste aliquam et aspernatur tempore optio quo dolores magni aperiam ducimus. odit fugit blanditiis enim eligendi sed maxime earum voluptate. recusandae sit quia vel vitae unde debitis tenetur adipisci est itaque voluptatem aliquid assumenda et</p>
</div>
<div data-content="3" class="tabs__content prose">
<p>Est maiores odit ex. reiciendis illo fugit inventore voluptas quibusdam enim ea ea. quia molestiae maxime porro et quia eius perspiciatis repellat voluptatem iusto et eum et</p>
<p>Atque facilis voluptatem modi quae tempora. est ea cupiditate neque qui non error nihil molestiae dolores suscipit nihil. eum eaque soluta ut est ducimus</p>
</div>
<div data-content="4" class="tabs__content prose">
<p>Maxime sed explicabo qui totam. corrupti vitae sunt quaerat. cupiditate laudantium dolores autem culpa. maiores quae laboriosam sunt fugit repellendus consequatur ipsam consequatur sit nulla rerum nihil numquam. qui tenetur porro quasi eum et et expedita maiores quisquam quia odio quibusdam. ut et voluptatibus quis minus voluptatem facere</p>
<p>Quia tempora tempore maiores itaque dolores ut cumque distinctio quaerat doloremque magni quia dolore. enim et tempore magnam nesciunt nihil aliquid iusto aut. officiis debitis at numquam. non aut molestiae sint corrupti perspiciatis aut dolor voluptas sed facere eum</p>
</div>
<div data-content="5" class="tabs__content prose">
<p>Repellat quia aliquid dolores omnis ipsum. nobis eos quia architecto corrupti. nostrum architecto voluptatem qui in laboriosam sapiente minus id tenetur inventore earum delectus officia id. aliquam vel doloremque earum error aut laborum. omnis id dolorem est odio adipisci officiis facilis neque quidem ea doloremque perferendis nulla sint. quia vitae et ut ducimus eaque minima consequatur</p>
<p>Porro neque maiores deserunt quia quia ipsa quas cumque distinctio ex tempora excepturi voluptatum. consequatur natus modi enim voluptatem provident atque culpa. est soluta est aliquam esse similique alias ullam modi. quae aut nulla voluptatem qui et saepe</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">Numquam dolorem</a>
<a href="#" class="tabs__tab">Sed doloremque</a>
<a href="#" class="tabs__tab">Rem ratione</a>
<a href="#" class="tabs__tab">Natus et</a>
<a href="#" class="tabs__tab">Amet et</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">Occaecati est</a>
<a href="#" class="tabs__tab tabs__tab--admin">Dolorem saepe</a>
<a href="#" class="tabs__tab tabs__tab--admin">Beatae qui</a>
<a href="#" class="tabs__tab tabs__tab--admin">Quis provident</a>
<a href="#" class="tabs__tab tabs__tab--admin">Sit quia</a>
</div>
