- Primitives
- o-colors
- o-fonts
- o-grid
- o-loading
- o-typography
- o-visual-effects
- Components
- o-ads
- o-aside-panel
- o-banner
- o-buttons
- o-comments
- o-comment-ui
- o-cookie-message
- o-footer
- o-footer-services
- o-forms
- o-ft-affiliate-ribbon
- o-gallery
- o-header
- o-header-services
- o-hierarchical-nav
- o-labels
- o-layout
- o-load
- o-message
- o-overlay
- o-quote
- o-share
- o-squishy-list
- o-subs-card
- o-syntax-highlight
- o-table
- o-tabs
- o-teaser
- o-teaser-collection
- o-tooltip
- o-tracking
- o-video
- Layouts
- o-techdocs
- Utilities
- o-ads-embed
- o-assets
- o-autoinit
- o-comment-count
- o-date
- o-dom
- o-element-visibility
- o-errors
- o-expander
- o-fetch-jsonp
- o-fonts-assets
- o-hoverable
- o-icons
- o-layers
- o-normalise
- o-toggle
- o-utils
- o-viewport
- Imagesets
- fticons
- headshot-images
- logo-images
- origami-brand-images
- origami-flag-images
- origami-specialist-title-logos
- social-images
- Services
- origami-bower-registry
- origami-build-service
- origami-image-service
- origami-navigation-service
- origami-registry-ui
- origami-repo-data
- polyfill-service
- polyfill-service-serverless
- Uncategorised
- eslint-config-origami-component
- express-web-service
- ftheadshots
- ft-origami
- get-github-public-organisation-repositories
- get-origami-repos
- github-label-sync
- grafana-tools
- node-health-check
- o-chat
- origami-build-tools
- origami-image-set-tools
- origami-navigation-data
- origami-react
- origami-repo-data-client-node
- origami-service
- origami-service-makefile
- release-log
- source-param-middleware
- streamcat
- svg-tint-stream
Buttontabs
<ul data-o-component="o-tabs" class="o-tabs o-tabs--buttontabs" role="tablist">
<li role="tab"><a href="#tabContent1">Tab 1</a></li>
<li role="tab"><a href="#tabContent2">Tab 2</a></li>
<li role="tab" aria-selected="true"><a href="#tabContent3">Tab 3</a></li>
</ul>
<div id="tabContent1" class="o-tabs__tabpanel">
<h3>Tab content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent2" class="o-tabs__tabpanel">
<h3>Tab content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent3" class="o-tabs__tabpanel">
<h3>Tab content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>Buttontabs Big
<ul data-o-component="o-tabs" class="o-tabs o-tabs--big o-tabs--buttontabs" role="tablist">
<li role="tab"><a href="#tabContent1">Tab 1</a></li>
<li role="tab"><a href="#tabContent2">Tab 2</a></li>
<li role="tab" aria-selected="true"><a href="#tabContent3">Tab 3</a></li>
</ul>
<div id="tabContent1" class="o-tabs__tabpanel">
<h3>Tab content 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent2" class="o-tabs__tabpanel">
<h3>Tab content 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>
<div id="tabContent3" class="o-tabs__tabpanel">
<h3>Tab content 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, ipsum.</p>
</div>| Bower Dependencies | |
|---|---|
| o-colors | ^4.0.2 |
| o-buttons | ^5.11.8 |
| o-dom | ^2.0.3 |
| o-brand | >=2.2.0 <4 |
GitHub Repository
Quickstart
Build Service
Add the following to your
<script> and <link> tags.
o-tabs@^4.1.2
For more information see the Origami build service.
Manual Build Process
Run the following command in the root directory of your project, to add this dependency to your bower.json file:
bower install --save "o-tabs"@"^4.1.2"
For more information see the Origami build process.