1. Home
  2. /
  3. Foundation
  4. /
  5. Tabs Example

Tabs Example - Foundation Typing CST Test

Loading…

Tabs Example — Foundation Code

Demonstrates a tabbed interface using Foundation Tabs component.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
	<title>Foundation Tabs</title>
</head>
<body>
	<div class="grid-container">
		<ul class="tabs" data-tabs id="example-tabs">
		<li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
		<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
		<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
		</ul>
		<div class="tabs-content" data-tabs-content="example-tabs">
		<div class="tabs-panel is-active" id="panel1"><p>Content for Tab 1</p></div>
		<div class="tabs-panel" id="panel2"><p>Content for Tab 2</p></div>
		<div class="tabs-panel" id="panel3"><p>Content for Tab 3</p></div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
	<script>
		$(document).foundation();
	</script>
</body>
</html>

Foundation Language Guide

Foundation is a responsive front-end framework that provides a mobile-first grid system, prebuilt UI components, and flexible styling utilities. It is designed to speed up development while maintaining accessibility and consistency.

Primary Use Cases

  • ▸Responsive web apps
  • ▸Corporate websites
  • ▸Prototyping and MVPs
  • ▸Design systems and UI kits
  • ▸Accessible front-end development

Notable Features

  • ▸Mobile-first responsive grid
  • ▸Prebuilt UI components (buttons, forms, modals)
  • ▸Sass-based customization
  • ▸Accessibility-ready components
  • ▸Built-in JavaScript plugins

Origin & Creator

Created by ZURB in 2011 as a professional-grade front-end framework for rapid prototyping and production-ready websites.

Industrial Note

Foundation is ideal for teams needing accessible, responsive, and enterprise-ready front-end frameworks, especially in complex web applications and rapid prototyping environments.

More Foundation Typing Exercises

Foundation Counter ExampleFoundation Callout ExampleFoundation Top Bar ExampleFoundation Card ExampleFoundation Accordion ExampleFoundation Reveal Modal ExampleFoundation Form ExampleFoundation Table Example

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher