Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/tools/js/CharacterSheet/components/TraitContent/TraitContent.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import {
+  Constants,
+  CharacterTraits,
+} from "@dndbeyond/character-rules-engine/es";
+
+interface Props {
+  traits: CharacterTraits;
+  traitKey: string;
+  label?: string;
+  fallback: string;
+  onClick?: (traitKey: string) => void;
+}
+export default class TraitContent extends React.PureComponent<Props> {
+  static defaultProps = {
+    fallback: "+ Add",
+  };
+
+  handleTraitShow = (evt: React.MouseEvent): void => {
+    const { traitKey, onClick } = this.props;
+
+    if (onClick) {
+      evt.stopPropagation();
+      evt.nativeEvent.stopImmediatePropagation();
+      onClick(traitKey);
+    }
+  };
+
+  render() {
+    const { traits, traitKey, label, fallback } = this.props;
+
+    let traitData = traits[traitKey as Constants.TraitTypeEnum];
+    let hasContent: boolean = !!traitData;
+    let content: string = !!traitData ? traitData : fallback;
+
+    let classNames: Array<string> = ["ct-trait-content"];
+    if (!hasContent) {
+      classNames.push("ct-trait-content--no-content");
+    }
+
+    return (
+      <div className={classNames.join(" ")} onClick={this.handleTraitShow}>
+        {label && <div className="ct-trait-content__heading">{label}</div>}
+        <div className="ct-trait-content__content">{content}</div>
+      </div>
+    );
+  }
+}