IconBox & Chip
IconBox
Section titled “IconBox”Square icon container with color accent. Used inside cards and feature sections.
Variants
Section titled “Variants” outlined (default)
<ac-iconbox variant="blue">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
</ac-iconbox>
<ac-iconbox variant="orange">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
</ac-iconbox>
<ac-iconbox variant="green">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
</ac-iconbox>
<ac-iconbox variant="danger">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
</ac-iconbox>Soft & Filled
Section titled “Soft & Filled” soft
<ac-iconbox variant="blue" style-variant="soft">...</ac-iconbox>
<ac-iconbox variant="orange" style-variant="soft">...</ac-iconbox>Compact inline tag for categories, filters, or attributes.
Variants
Section titled “Variants”<ac-chip>Default</ac-chip>
<ac-chip class="ac-chip--primary">Primary</ac-chip>
<ac-chip class="ac-chip--success">Success</ac-chip>
<ac-chip class="ac-chip--warning">Warning</ac-chip>
<ac-chip class="ac-chip--danger">Danger</ac-chip>Removable
Section titled “Removable”<ac-chip>
React
<button class="ac-chip__remove" aria-label="Remove React">✕</button>
</ac-chip>
<ac-chip class="ac-chip--primary">
TypeScript
<button class="ac-chip__remove" aria-label="Remove TypeScript">✕</button>
</ac-chip>