Child semantics

When using a component, child elements follow the semantic pattern of that component. For example, .avatar accepts <img>, <picture>, text content, an empty .badge for status dots, and can be a <button> or <a>. No child classes like .avatar-img are needed.