Use a 'Section' for showing 'attached to'.

src/components/AttachedToComponent.js

@@ -1,5 +1,6 @@
 import { Component, $$, domHelpers } from 'substance'
 import getLabel from './_getLabel'
+import Section from './Section'
 
 export default class AttachedToComponent extends Component {
   constructor (...args) {
@@ -20,7 +21,7 @@ export default class AttachedToComponent extends Component {
   render () {
     const { document, nodeId } = this.props
     const relationships = Array.from(this._relationshipIndex.get(nodeId))
-    const el = $$('div', { class: 'sc-attached-to' })
+    const el = $$(Section, { class: 'sc-attached-to', label: 'Attached to', hideIfEmpty: true })
     if (relationships.length > 0) {
       const items = relationships.map(targetId => {
         // ATTENTION: this assumes that we have ony Figure panels where files are attached to
@@ -31,7 +32,6 @@ export default class AttachedToComponent extends Component {
       if (items.length > 1) {
         items.sort((a, b) => a.label.localeCompare(b.label))
       }
-      el.append($$('span', { class: 'se-label' }, 'Attached to: '))
       for (const item of items) {
         el.append(
           $$('button', { class: 'se-panel-link' }, item.label).on('click', (e) => {

src/components/Section.js

@@ -1,12 +1,8 @@
 import { Component, $$ } from 'substance'
 
-// NOTE: I have a feeling the section component is misplaced in some areas currently
-// e.g. using it as a panel label ("A") or in the table of contents "Additional Information"
-// I suggest to flatten things, and use Heading in 
-
 export default class Section extends Component {
   render () {
-    const { name, label, children } = this.props
+    const { name, label, children, hideIfEmpty } = this.props
     const el = $$('div', { class: 'sc-section' })
     if (name) {
       el.addClass(`sm-${name}`)
@@ -18,6 +14,9 @@ export default class Section extends Component {
     if (children && children.length > 0) {
       el.append(children)
     }
+    if (hideIfEmpty && children.length === 0) {
+      el.addClass('sm-hidden')
+    }
     return el
   }
 }

styles/_file.scss

@@ -1,3 +1,7 @@
 .sc-file {
   @include card-style;
+
+  .sc-attached-to {
+    margin-top: var(--default-spacing);
+  }
 }

styles/_resource.scss

@@ -1,3 +1,7 @@
 .sc-resource {
   @include card-style;
+
+  .sc-attached-to {
+    margin-top: var(--default-spacing);
+  }
 }

styles/_section.scss

@@ -1,4 +1,8 @@
 .sc-section > .se-section-label {
   @include ts-small-interface;
   color: var(--quiet-text-color);
-}
+}
+
+.sc-section.sm-hidden {
+  display: none;
+}