1
render(Primer::Beta::Counter.new(count: 1_000))
render(Primer::Beta::Counter.new(count: 1_000))
No notes provided.
No params configured.
/* Counter */.Counter { display: inline-block; min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */ padding: 0 var(--base-size-6); font-size: var(--text-body-size-small); font-weight: var(--base-text-weight-medium); /* stylelint-disable-next-line primer/typography */ line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */ color: var(--fgColor-default); text-align: center; background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted)); border: var(--borderWidth-thin) solid var(--counter-borderColor); /* stylelint-disable-next-line primer/borders */ border-radius: 2em;}.Counter:empty { display: none; }/* Is this selector used? could not find any use of it */.Counter .octicon { vertical-align: text-top; opacity: 0.8; }.Counter--primary { color: var(--fgColor-onEmphasis); background-color: var(--bgColor-neutral-emphasis);}.Counter--secondary { color: var(--fgColor-muted); background-color: var(--bgColor-neutral-muted);}
<lookbook-embed app="http://primer-view-components-preview-3246.eastus.azurecontainer.io/view-components/lookbook/" preview="Primer::Beta::CounterPreview" scenario="default"></lookbook-embed>