# CircleCrop
Circle Crop panel: a perfect circle bleeding off **three** sides, holding text or imagery.
```jsx
<CircleCrop side="left" fill="navy" background="white" style={{height:280}}>
  <div><b>Call the Midwife</b><br/>Tonight 8/7C</div>
</CircleCrop>
<CircleCrop side="left" src="photo.jpg" background="gradient" style={{height:280}} />
```
Rules (Style Guide v3 pp.56–62): perfect circle only; bleed 3 sides, centered on its edge; solid fills PBS Blue/Navy/Medium/White, or Primary Gradient (`fill="gradient"`, or `"gradient-overlay"` at 80% over an image via `backgroundSrc`); don't pair PBS Blue or Light Blue circle with a gradient background; text stays inside the circle's chord; no cascading text.