---
title: "Overview"
page-title: "Fundamentals Controls"
order: 1
---
# Overview

The Fundamentals product contains various using interface controls that may be used in your applications.

## Avatar

![Screenshot](../images/avatar.png)

[Avatar](avatar.md) controls are used to represent people or objects.  They can render a full-size image, a centered glyph, a person's initials, or text.

## Avatar Group

![Screenshot](../images/avatar-group.png)

[Avatar Group](avatar-group.md) renders multiple [Avatar](avatar.md) controls.

## Badge

![Screenshot](../images/badge-multi.png)

[Badge](badge.md) provides contextual information for other elements or can be used stand-alone.

## Card

![Screenshot](../images/card.png)

[Card](card.md) controls are typically used to present visually grouped information for a single subject.

## Circular Progressbar

![Screenshot](../images/circular-progressbar.png)

[CircularProgressBar](circular-progressbar.md) displays a ranged progress value using fluent animations.  It is similar to a native linear `ProgressBar`, except that it renders the progress in a ring shape.

## Info Bar

![Screenshot](../images/info-bar-action.png)

[Info Bar](info-bar.md) can be used to display essential information to a user without disrupting the user flow.

## Segmented Bar

![Screenshot](../images/segmented-bar.png)

[Segmented Bar](segmented-bar.md) allows a user to select a single item with support for fluent animations when changing selection.

## Settings Controls

![Screenshot](../images/settings-examples.png)

The [SettingsCard](settings-card.md), [SettingsExpander](settings-expander.md), and [SettingsGroup](settings-group.md) controls are used together to organize and present configurable settings.

## Progress Spinners

![Screenshot](../images/ring-spinner-examples.png)

[Progress Spinners](progress-spinners.md) are used when some form of processing is occurring to tell the end user that something is happening.
