UCLA Component Library

Component Documentation Template 2

Component Name

Component quick description

Introduction sentence 1 about component (optional). Introduction sentence 2 about component (optional).

Usage

Usability Guidance

  • List Item 1
  • List Item 2

Further Reading (optional)

Link optional Link optional

Accessibility Requirements

  • List Item 1
  • List Item 2

Further Reading

Link needed (Mozilla) Link needed (W3)

Sub-component 1

Introduction sentence 1 about sub-component 1 (optional). Introduction sentence 2 about sub-component 1 (optional).

Do’s and Don’ts

Do’s

  • List Item 1
  • List Item 2

Don’ts

  • List Item 1
  • List Item 2

Anatomy

![Anatomy Image](File Path to Anatomy Image)

Text about anatomy

States

![States Image](File Path to States Image)

Text about states

Specs

![Specs Image](File Path to Specs Image)

Text about specs

Code

Text about code

Code

Sub-component 2

Introduction sentence 1 about sub-component 2 (optional). Introduction sentence 2 about sub-component 2 (optional).

Do’s and Don’ts

Do’s

  • List Item 1
  • List Item 2

Don’ts

  • List Item 1
  • List Item 2

Anatomy

![Anatomy Image](File Path to Anatomy Image)

Text about anatomy

States

![States Image](File Path to States Image)

Text about states

Specs

![Specs Image](File Path to Specs Image)

Text about specs

Code

Text about code

Code

Sub-component 3

Introduction sentence 1 about sub-component 3 (optional). Introduction sentence 2 about sub-component 3 (optional).

Do’s and Don’ts

Do’s

  • List Item 1
  • List Item 2

Don’ts

  • List Item 1
  • List Item 2

Anatomy

![Anatomy Image](File Path to Anatomy Image)

Text about anatomy

States

![States Image](File Path to States Image)

Text about states

Specs

![Specs Image](File Path to Specs Image)

Text about specs

Code

Text about code

Code

Note:

  1. To make more specific styling edits to images in documentation, please use the “img” HTML tag instead of the markdown’s image syntax (i.e <img class="classToBeEditedInStyleSheet" title="Title" src="/build/1.0.0-beta.8/docs/img/RestOfFilePath"/>)