Kitchen Sink

A quick preview of everything Apigee UI Framework has to offer.

Apigee logo Extension

Apigee

<span class="apigee-logo"><span>Api</span>gee</span>

If the logo webfont can't be loaded it will display "Apigee" with the default font.

The webfont splits the logo into two parts to properly apply colors to each part: api at the characters A and a, and gee at the characters G and g. The characters P, p, I, i, E, e are blank to make the logo properly reproducible when writing "Apigee" with the font.

Write only the whole words "Apigee", "api", or "gee" (case insensitive) when using the webfont, not the individual characters — this makes your document readable when stylesheets/webfonts are disabled or cannot be used (e.g. screenreaders), and indexable by search engines for SEO.

Headings

This is an h1 heading Small text

This is an h2 heading Small text

This is an h3 heading Small text

This is an h4 heading Small text

This is an h5 heading Small text

This is an h6 heading Small text

Tables

table-hover

#	First Name	Tables
1	Michael	Are formatted like this
2	Lucille	Do you like them?
3	Success
4	Info
5	Warning
6	Danger
7	Active

table-striped

#	First Name	Last Name	Username
1	John	Apigeek	@apigeek
2	Jane	Apigeek	@apigeek
3	Apigee	Corporation	@apigee

table-bordered

#	First Name	Last Name	Username
1	John	Apigeek	@apigeek
2	Jane	Apigeek	@apigeek
3	Apigee	Corporation	@apigee

table-condensed

#	First Name	Last Name	Username
1	John	Apigeek	@apigeek
2	Jane	Apigeek	@apigeek
3	Apigee	Corporation	@apigee

table-book Extension

#	First Name	Last Name	Username
1	John	Apigeek	@apigeek
2	Jane	Apigeek	@apigeek
3	Apigee	Corporation	@apigee

Content Formatting

This is a lead paragraph. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

This is an ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

To switch directories, type cd followed by the name of the directory. To edit settings, press ctrl + ,

Use the formula y = mx + b to plot a line.

This text is meant to be treated as sample output from a computer program.

Muted color paragraph. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Warning color paragraph. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Danger color paragraph. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Info color paragraph. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Success color paragraph. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

This is text in a small wrapper. NBD, right? Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Apigee Corporation
10 Almaden Boulevard, 16^th Floor
San Jose, CA 95113
T: +1 (408) 343-7300
F: +1 (408) 343-7301

Full Name
first.last@example.com

Here's what a blockquote looks like in Apigee UI Framework. Nullam quis risus eget urna mollis ornare vel eu leo. Use small to identify the source.

Here's what a reversed blockquote looks like in Apigee UI Framework. Nullam quis risus eget urna mollis ornare vel eu leo. Use small to identify the source.

Normal Unordered List
Can Also Work
- With Nested Children
Adds Bullets to Page

Normal Ordered List
Can Also Work
1. With Nested Children
Adds Bullets to Page

list-glyphicon Extension
Can Also Work
- With Nested Children
No bullet shown by default
Add a glyphicons-* class to the li to show a bullet

// FizzBuzz
var i, output;
for (i = 1; i < 101; i++) {
  output = '';
  if (!(i % 3)) output += 'Fizz';
  if (!(i % 5)) output += 'Buzz';
  console.log(output || i);
}

Images

Buttons

Left Middle

Input Groups

.00

$ .00

Forms

Legend

Email address

Password

File input

Example block-level help text here.

Check me out

Password

Remember me

Navs

Breadcrumbs

Pagination

Navbar

Use the navbar-header-apigee, and navbar-brand-apigee classes on the navbar elements to add the Apigee logo to the navbar.

Don't forget to keep the "Apigee" as text inside the brand to be SEO/screenreader friendly. Hide the "Apigee" text with the text-hide class — using the standard apigee-logo markup works, but is not necessary. If you want to add additional text inside navbar-brand, wrap it in a span and apply the navbar-brand-text class to it for proper padding. Separate "Apigee" and the additional brand text with a zero-width space ().

navbar-default

navbar-brand-apigee-plaque

navbar-inverse

navbar-brand-apigee-plaque

Modals

Dropdowns

Popovers

Labels

H1 Default Primary Success Info Warning Danger

H2 Default Primary Success Info Warning Danger

H3 Default Primary Success Info Warning Danger

H4 Default Primary Success Info Warning Danger

H5 Default Primary Success Info Warning Danger

H6 Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Linked Labels

Default Primary Success Info Warning Danger

Badges

Inbox 42

Inbox Linked

Alerts

Heads up! This alert needs your attention, and can't be dismissed.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, because it's warning you about something.

Heads up! This alert needs your attention, but it's not super important.

Warning!

This is a block style alert.

Tooltips

Progress Bars

60%

Media Object

Media heading

This is the content for your media.

Media heading

This is the content for your media.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Disabled

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Disabled

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.