Enrich styleguide with new features, rules and changes

The styleguide for usage of visual elements has not been updated for a long time. In the course of this story it should be adapted to the current standards and rules. In addition, heavy violations were rectified directly.

scm-ui/ui-components/src/CardColumnSmall.tsx

@@ -51,10 +51,6 @@ const ContentRight = styled.div`
   align-items: start;
 `;
 
-const CenteredItems = styled.div`
-  align-items: center;
-`;
-
 const StyledLink = styled(Link)`
   color: inherit;
   :hover {
@@ -75,10 +71,10 @@ const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, f
       <div className="media">
         {renderAvatar}
         <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
-          <CenteredItems className="is-flex">
+          <div className="is-flex is-align-items-center">
             <ContentLeft>{contentLeft}</ContentLeft>
             <ContentRight>{contentRight}</ContentRight>
-          </CenteredItems>
+          </div>
           {renderFooter}
         </FlexFullHeight>
       </div>