Primer Demo

This page demonstrates GitHub Primer CSS wrapped in WebComponents

primer-box


This is standard box.

Some Title

A bit of text that shows how the box can look like

Other Title

Another paragraph that fills the box

primer-breadcrumb

HTMLElement github-primer demo

primer-button


Normal Primary Danger Outline

primer-header


This is a mini header with shadow.

primer-flash


Standard
Warning
Error
Success

primer-markdown

Input Markdown Rendered HTML 
<primer-markdown>
    ## About Markdown
    - Markdown can be be inlined in primer-markdown.

    ### Indention
    The first non-empty line defines the indention of 
    the whole paragraph. This behavior can be disabled.
</primer-markdown>
 ## About Markdown - Markdown can be be inlined in primer-markdown. ### Indention The first non-empty line defines the indention of the whole paragraph. This behavior can be disabled.

primer-menu

First Item Second Item Selected Item Another Item

primer-label

Bug Warning Note Okay Feature Approved Chore

primer-state

Purple State Normal State Red State Small and Purple

primer-counter

23 1337

primer-octicon


primer-table

Name Population Latitude Longitude
Trier 114,914 49.7599 6.6442
San Francisco 870,887 37.7600 -122.4301

primer-tabnav

Github Design Team
+
@gronke HTML CSS JavaScript

primer-tooltip


Tooltip North-East Tooltip South-West Tooltip without delay