Captions: We need to add individual captions under each tab image. When a caption is placed inside a tab, there is a missing 1rem top padding above the caption.
Background Display: The white background observed is the tab container itself, not a background on the image. As a result, anything inside the tab will display on that white background.
While we could build a custom solution to remove the white background, the current implementation is functioning as intended, aside from the missing 1rem top padding.
Possible solution
(@alisonjoseph mentioned -)
To address these issues, we need to enhance the Gatsby tabs component. A potential solution could involve creating a new tab type, such as <Tab type="image">, allowing us to style this variant differently to remove the background and adjust padding as needed.
Detailed description
There are a couple of issues identified:
While we could build a custom solution to remove the white background, the current implementation is functioning as intended, aside from the missing 1rem top padding.
Possible solution
(@alisonjoseph mentioned -) To address these issues, we need to enhance the Gatsby tabs component. A potential solution could involve creating a new tab type, such as
<Tab type="image">, allowing us to style this variant differently to remove the background and adjust padding as needed.Additional information