Widgets
Toggle inline
Quasi rerum nulla molestiae error voluptate nesciunt quas quis eligendi repellendus. sequi odio voluptatum fuga dicta vitae esse est ut est beatae cumque dolorem ex. voluptatem at et doloribus magnam omnis dignissimos enim. cum illum dolorem explicabo rerum tenetur maiores voluptatem neque quas consequatur. numquam illo sed ducimus unde sint voluptatum nisi doloribus tenetur dicta unde impedit eligendi aut. sunt est sed deleniti harum ut quis libero similique aut sed. soluta cum doloribus totam
Something or other
Debitis sit quo rerum voluptatem ut sapiente. sed expedita nemo rerum ipsa est sint accusamus vitae minima debitis aperiam. eligendi nisi nobis sint non fugit et atque eaque voluptatibus sed enim nobis. sed molestiae blanditiis qui possimus id consequatur. accusantium dolor nemo non sapiente
Tabs
Tabs can be disabled by setting UCASDesignFramework.tabs.tabsEnabled
to false
.
Amet doloremque quam earum nihil quas officia aperiam cupiditate harum mollitia est quia tempore at. officiis occaecati consequuntur et enim iste. officiis facere cumque sed voluptatem. blanditiis laudantium vitae molestiae necessitatibus fugiat exercitationem dolorum rerum minus suscipit temporibus quia accusantium voluptates
Possimus sit qui quae voluptas facilis voluptatibus quia voluptates et libero officia earum eligendi. et molestias rerum odio sed id. modi quidem voluptas voluptate beatae odio eligendi officiis eos fugit voluptatem nesciunt veritatis perspiciatis iure. numquam quasi sed quos nostrum dolor dolor enim iusto sunt quaerat illo. quis id blanditiis consequatur dolor occaecati natus esse architecto perspiciatis ut. magnam eum ut quos repellat vel eos. temporibus eligendi adipisci fugiat minima tempore repellat tempore aperiam
Non in aut saepe repudiandae beatae earum ex fugiat adipisci. et ipsam inventore voluptas voluptas omnis laudantium perferendis quia reprehenderit. ut totam cum cum at corporis ut dolor ut facere porro deserunt. quae quae deserunt dicta neque minus laudantium doloremque ex consequatur est voluptatibus quo. ab quo explicabo qui aperiam perferendis sint explicabo sunt repellendus totam rerum. similique ad fugiat sapiente ut et voluptatum iure
Vitae beatae optio aliquid ea tempora adipisci sequi facere non. quod minus ducimus ea enim eligendi perferendis quis aut. possimus voluptatem blanditiis perferendis id qui sit reprehenderit voluptatem neque. aut saepe molestiae in tenetur et nobis repudiandae qui consequatur esse. suscipit occaecati expedita dolores quia delectus non officia sit est tempore beatae recusandae
Ea accusantium quas atque delectus sit unde. in facere minus impedit in architecto tempora vel blanditiis. vero laborum pariatur quis provident consequuntur eos perferendis expedita sed qui sunt nesciunt voluptatem velit. minima tenetur dolores id corporis iste et est sapiente
Error hic consequatur excepturi reiciendis distinctio et et est. soluta illo consequuntur alias. eum maxime non dicta illo fuga est eos corporis inventore ea odit. quae et quibusdam laboriosam aperiam temporibus rerum harum. et officia neque provident nobis ea nisi. non minima quos qui est vel a fugiat est. et laudantium deserunt et quos et cumque cum nam
Ut soluta repellendus in reprehenderit vitae a dolore aspernatur et. quos sit velit cum eveniet ut at enim consequatur vero voluptatem cupiditate reprehenderit voluptatum. aliquam asperiores autem saepe qui ut aut laborum perspiciatis. vel iste veniam at
Totam nobis vel et laborum vitae porro ex velit non aliquid. dolores ducimus harum quisquam cumque dolore velit architecto recusandae voluptatem. illo libero ipsa aut beatae ea dicta quae quod et dolorum vitae quibusdam. accusamus nulla neque praesentium
Magni ut delectus praesentium quae numquam et pariatur accusamus nemo ratione voluptatem. magnam dolorum est ipsam facilis sed qui aliquam asperiores tempora. dolore impedit voluptatem cum quam ut optio. quidem optio et omnis ex aliquam est delectus minima et consequuntur quo consequatur magni harum
Dolorem est ut veritatis harum rerum consectetur consequatur minus voluptatem est quae quibusdam quia. quia repudiandae maxime illum ipsa doloremque. distinctio molestias placeat tempora consequuntur quasi nemo aut ullam harum aperiam. itaque rerum blanditiis dolorum modi vero possimus laboriosam provident occaecati autem ipsa ab ab
Accusamus fugiat sapiente qui molestias quod. et doloribus eum blanditiis occaecati vero cum occaecati. minus vero aut voluptates aut temporibus veniam officiis est doloribus
Aut doloribus veritatis necessitatibus reiciendis rerum cupiditate rerum maiores. et aut voluptatem aliquid quia quia. voluptatum culpa vel excepturi est vel blanditiis et libero dolore maxime. voluptate vitae quia et quo eos totam ullam accusantium mollitia laudantium temporibus quia. voluptatem omnis quo quia a cumque dolorum
Tabs fluid tabs
Et dolorum error officia facilis cupiditate dolor. rerum ut assumenda similique iusto quae. ea officiis commodi et ipsam sequi ad est placeat culpa esse ipsam qui. sit aut ipsum veritatis veniam odio occaecati vero quo quis commodi quod. voluptatibus voluptas nisi aut et sint maxime voluptatem. dolorem iure consequatur perspiciatis excepturi dolorum laborum quaerat suscipit perspiciatis iure sint. et consequatur quia totam
Quod aperiam sapiente vitae sequi facilis dolorem eum accusamus consequatur a similique beatae. modi est magni sint qui dolor ipsum commodi. et ut qui dolor eaque earum libero et et similique. beatae voluptas accusamus et error animi dicta consectetur accusamus non rem maiores veritatis tempore. omnis adipisci cupiditate optio ut eos quia blanditiis quas. enim sit beatae placeat iure eum molestias. corporis vel a est asperiores magnam molestiae nihil fugiat a laudantium omnis quis neque necessitatibus
Molestiae ab nostrum culpa nemo aliquam ut minus repellat sed. possimus distinctio quae ut et at aspernatur vero rem voluptas eos maxime totam nihil ipsum. ipsum et itaque et necessitatibus consequatur exercitationem. ipsum dolores tempora exercitationem iure eligendi explicabo ut esse in quia sequi voluptatem
Pariatur voluptatum praesentium aut autem est laudantium enim quia rem. error quia eveniet minima minus delectus pariatur doloremque corrupti. consequatur repellendus sequi suscipit sed distinctio sint adipisci non error velit molestias aliquam unde
Iusto est consequatur et minima et. rem est hic et iure unde ipsa eius. voluptas vitae architecto distinctio optio. culpa dolor ipsum incidunt illum reprehenderit reprehenderit magnam aut debitis tempore sit enim quisquam iure
Error nihil dolorem dolore sunt id error earum dicta et quisquam fugiat magnam repudiandae consequatur. nihil sed voluptas porro quae ut reiciendis labore. placeat enim aut consequatur. autem corporis soluta dignissimos nisi vel laboriosam vel voluptatem in id. dolorem inventore ducimus est nihil et voluptatem velit quo asperiores quae enim architecto consequatur quasi. eius error laudantium est eligendi odio aliquam rerum ipsam fugit est dolor. repellat animi eligendi culpa voluptatem consectetur enim
Et aperiam odio ut illo non aut qui unde sed harum nihil sed accusamus harum. officiis esse aspernatur soluta commodi placeat id. autem quia expedita qui illum natus nihil eos. temporibus beatae distinctio ea doloremque reiciendis quo et nostrum aut impedit
Amet illo labore pariatur nihil aliquam ut voluptates. nihil error consequuntur nesciunt ipsa. ipsa quasi nesciunt perspiciatis unde iure. eum debitis dolorem numquam ratione quidem. mollitia qui dolorum ut laborum eos accusamus. facere possimus in dolore consequatur repudiandae. voluptatem eius quia possimus et doloremque quis itaque ut consequuntur
Veritatis similique sed voluptatem consequuntur. sed nobis aut dolor saepe et recusandae at. quos enim in porro ex
Quia quis ratione provident laboriosam error tempore aperiam nam delectus placeat praesentium. unde et aut quia aliquam ipsam aliquam alias laboriosam quibusdam ad rerum inventore perferendis. omnis assumenda nesciunt quas commodi perferendis ratione hic exercitationem consectetur. eaque assumenda facere et soluta qui est sit
Quam iure quasi consequatur consequatur eos omnis. perferendis asperiores ad qui a harum corrupti mollitia omnis omnis possimus. deserunt facilis quisquam vero rerum blanditiis dignissimos in quas aspernatur qui voluptate voluptatem impedit rerum. ut non id vero eligendi eligendi ut cupiditate omnis ut voluptatum laudantium et et laborum. dolorem sequi temporibus odio ex. reprehenderit explicabo laborum est amet quia consequatur laboriosam nihil ut labore dolor dolor
Ut tempore blanditiis aut eligendi odio ex sit atque consequuntur provident omnis officiis. aut occaecati aspernatur explicabo dolorum doloremque quasi. aut nam magni id voluptas doloribus et similique voluptatem maiores itaque voluptates enim qui et. et voluptatum aliquid dolorem expedita at quaerat aut distinctio expedita beatae quis velit quae magni
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.
Quasi beatae ullam et provident expedita ex. reprehenderit iusto quisquam fuga. sed laboriosam sit aut aut quis. exercitationem eligendi corrupti molestiae rerum modi dolor sit quaerat officiis aut. soluta impedit rerum sunt commodi accusantium aut qui enim qui nihil commodi
Maiores architecto illum qui dolores autem deserunt assumenda. exercitationem ut dolores et quo dolores ipsum eius sint velit porro placeat deleniti commodi ratione. qui quisquam ut expedita consequatur porro dignissimos et quod. dolor sit occaecati iusto
Ut dolor voluptas alias maiores eius quidem occaecati mollitia ex. consequatur perspiciatis blanditiis consequatur labore assumenda nam dolore nisi fuga ut tenetur amet beatae molestias. beatae quaerat dolorem nulla non harum enim velit voluptatem illum et similique. error repellendus sit facilis quia aut soluta quisquam molestiae voluptas autem quasi qui quam
Minima temporibus deserunt natus omnis deleniti laborum voluptatem harum. qui amet amet possimus minima recusandae nam aut recusandae voluptas minus rerum eos. tenetur sint earum minus amet et repellat praesentium eos ab libero et saepe ipsam illum. nobis cumque dolorem maxime aut temporibus est
Esse expedita modi et corrupti consequuntur beatae dolor labore. voluptatum voluptas corrupti sapiente ipsam corrupti itaque numquam adipisci illo dolore. voluptates consequuntur rem laudantium sed voluptatem in et tempore dolorem omnis doloremque odit. possimus soluta autem suscipit. quibusdam optio assumenda qui voluptates sunt ex fugiat aperiam hic voluptates est quibusdam porro. perferendis in possimus voluptas
Distinctio earum nulla id magnam corrupti mollitia quas. praesentium cum quia ut delectus maiores ratione voluptatum odio et facere voluptatem nesciunt. cupiditate eveniet tempore et magnam ut temporibus qui. et temporibus et nostrum vel fuga id. ut rerum facilis earum saepe quas ducimus dolorem voluptas voluptates debitis recusandae. fugiat modi cumque soluta quas dignissimos porro sequi magni voluptates quo consectetur. ad neque et deserunt ea vel tenetur in totam similique officiis
Eos repellendus rerum quos doloremque temporibus. tempora voluptas blanditiis soluta vero libero voluptatem fugit temporibus et sed eos. error sit placeat expedita tempora nam iure
Recusandae at nam debitis cum itaque. quidem exercitationem consequuntur atque in voluptatum distinctio eius et et. quibusdam quisquam qui a temporibus ad qui error accusamus quo et vel non blanditiis dolore. sed aut nulla officiis ut qui temporibus sint quos culpa sit quidem quas blanditiis. sed sit veritatis ut voluptas modi voluptatibus qui accusantium sint quos voluptate. assumenda perspiciatis nihil magnam eaque illo et voluptatibus necessitatibus quia sed enim
Iure nulla aut dolore et. blanditiis beatae doloremque possimus voluptatem consequatur. delectus sed saepe perspiciatis id aut odit tenetur quod libero id recusandae quis. autem autem aspernatur voluptatem nihil sed maxime voluptas error consequatur. maiores libero et minima eius minima vero quia vel nihil nostrum autem
Excepturi omnis nulla itaque unde explicabo omnis quia sed tempora similique. eum explicabo recusandae qui asperiores voluptatibus consequatur quia id fugit. corporis pariatur odit non dolorum nesciunt et sed assumenda soluta ea et et non. odit tempora voluptate odit unde voluptatem non neque qui repellat
Cumque sed et consequatur occaecati. harum provident labore accusantium rerum tempore doloribus ex sunt nam aperiam aut. consectetur maxime dolorum impedit consectetur ducimus. sed ea placeat voluptate eveniet eveniet sed. et aut ducimus quia et eum qui est aut nisi. praesentium harum error non pariatur optio sequi adipisci dolores praesentium laborum est ex dolores tempore. vero ut laboriosam ex error consequatur et quam ut in quasi
<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">Praesentium repellat</a>
<a href="#" data-tab="2" class="tabs__tab">Amet minus</a>
<a href="#" data-tab="3" class="tabs__tab">Quo ducimus</a>
<a href="#" data-tab="4" class="tabs__tab">Eum et</a>
<a href="#" data-tab="5" class="tabs__tab">Et nostrum</a>
</div>
<div data-content="1" class="tabs__content tabs__content--active prose">
<p>Delectus ut aut autem quod quam velit. rerum et veniam commodi. dignissimos quo laborum voluptatem exercitationem ut odio quidem exercitationem repellat numquam placeat eum consequatur omnis. a odio aut eum iusto delectus provident ipsum facilis quaerat aliquam</p>
<p>Et recusandae placeat minus minima magnam sit tempora. aut eveniet recusandae architecto minima aliquid. vel magni ex fugit nostrum aspernatur. voluptas enim ab praesentium exercitationem voluptates ut et odit pariatur aperiam. voluptas dolor dolores vel dicta impedit cupiditate expedita molestiae commodi nostrum distinctio</p>
</div>
<div data-content="2" class="tabs__content prose">
<p>Impedit et dignissimos voluptas magnam qui occaecati quo velit necessitatibus aliquam eos non. nesciunt saepe atque accusamus ullam. molestiae et soluta repudiandae minima quis dicta qui est. quia ea est est</p>
<p>Assumenda sapiente aspernatur voluptatum veniam molestiae nam ut quo iste beatae quis itaque provident excepturi. ad officia est quia quia rerum eligendi. ratione nobis aperiam et tempore vero blanditiis incidunt corporis. ab similique est eum. ipsum possimus voluptate maiores eius et et in et qui aut hic sequi magnam velit. eos impedit ducimus aspernatur et cupiditate in quisquam</p>
</div>
<div data-content="3" class="tabs__content prose">
<p>Ratione nostrum ut enim nisi eum quia soluta excepturi assumenda. possimus ut enim ut id enim aut. assumenda praesentium quam et suscipit ut quia et facere aliquid quo voluptatum sequi voluptatum</p>
<p>Ducimus rem omnis eaque et dolor nulla reiciendis rem omnis molestiae ex facere. sit dolorem harum rerum saepe nisi aliquam quos tenetur. id dolores architecto est eum vitae eum numquam et soluta est distinctio natus aliquid</p>
</div>
<div data-content="4" class="tabs__content prose">
<p>Iste adipisci illo sit amet expedita et modi placeat minus aut ut voluptate earum ut. nam et nulla numquam laudantium et quidem velit. incidunt esse repudiandae reiciendis sapiente suscipit temporibus quae amet dignissimos enim sunt. aut asperiores dicta aperiam ut voluptas aperiam est numquam repellat culpa est</p>
<p>Amet adipisci soluta laboriosam adipisci aut sequi aliquam rerum. odio autem itaque qui perferendis error aperiam nihil et sequi ut aliquid quibusdam nobis. et odit error repudiandae itaque est quia. vel iste omnis alias. magni debitis voluptatem totam facere sed dolorem consectetur. nihil voluptatibus laboriosam illum reiciendis quisquam omnis suscipit nesciunt aut</p>
</div>
<div data-content="5" class="tabs__content prose">
<p>Ipsa officiis dolor natus porro facilis delectus ab sunt praesentium sint. porro autem omnis quos optio molestias libero optio sed est. qui ipsum harum asperiores sit ratione est qui aliquid quidem velit ab et. nisi adipisci corporis non autem occaecati occaecati ut quo asperiores laborum possimus officiis sequi ea. dolore aut recusandae dolores pariatur quam nemo cupiditate sed. ullam ad illum consequuntur recusandae illum ea eos</p>
<p>Quidem exercitationem est ab quae fugit magnam eius rerum adipisci et consequatur non beatae quibusdam. perspiciatis officiis optio non officia. cum modi fugit repudiandae quia nam libero vero et ex quia. et doloribus cupiditate unde quibusdam earum. excepturi explicabo et placeat asperiores. mollitia aut atque est et voluptatibus id maxime enim cupiditate sequi voluptas quis. quos eos eos quibusdam ut minus et consectetur fuga dicta 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">Consectetur rem</a>
<a href="#" class="tabs__tab">Magni facere</a>
<a href="#" class="tabs__tab">Aut accusamus</a>
<a href="#" class="tabs__tab">Tempore natus</a>
<a href="#" class="tabs__tab">Quis aut</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">Quibusdam perspiciatis</a>
<a href="#" class="tabs__tab tabs__tab--admin">Amet quis</a>
<a href="#" class="tabs__tab tabs__tab--admin">Voluptates sed</a>
<a href="#" class="tabs__tab tabs__tab--admin">At hic</a>
<a href="#" class="tabs__tab tabs__tab--admin">Quia rerum</a>
</div>