Atomic Design: should a wrapper be an atom if it's not reusable?

Question

In our company we are using Atomic Design for our design system (made with React and with Styled Components as our styling solution), in order to break down our UI into atoms, molecules and organisms

I have a doubt regarding when an atom should be classified as an atom or if it should be inside its parent domain.

You can see an example of this type of composition in this Material UI Card example (which does not use atomic design, but you can get the idea anyway).

So, imagine the following example, you have a Card Atom (since it's only a wrapper that returns a styled HTML tag with children):

const Card = ({children}) => <StyledWrapper>{children}</StyledWrapper>

There are also defined some children to go along with the Card, such as CardHeader, CardBody and CardFooter, all of them optional styled wrappers and they are passed as children if necessary.

So, which would be the right approach in this example?

• CardHeader, CardBody and CardFooter should be classified as atoms, outside the Card domain (meaning it's folder)

-- atoms
  -- Card
  -- CardHeader
  -- CardBody
  -- CardFooter

• CardHeader, CardBody and CardFooter should be placed inside the Card domain since they are not reusable (meaning they are designed to be used only with the Card atom), and should be exported there alongside Card, so the only atom in this example would be Card

-- atoms
  -- Card
    -- CardHeader
    -- CardBody
    -- CardFooter

Answer 1

Simple answer: The Latter.

-- atoms
  -- Card
    -- CardHeader
    -- CardBody
    -- CardFooter

As you said, CardHeader, CardBody are not reusable outside of Card domain. Therefore, it will not make sense to put these sub-components on the same level as a Card. Pro Tip: You can encapsulate these sub-components so they are exported under Card. E.g. Card.Header, Card.Body etc to make things more obvious.

Another point that may help you: in my projects, I do not assume Card to be an atom, but a molecule. Atoms are the building blocks. A Card is a collection of smaller building blocks like Text, Images and Buttons. Hence, it makes more sense as a molecule.