2 files changed, 19 insertions, 1 deletions
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index 98be99b..5eedaa0 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -14,7 +14,13 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
       {paragraph.annotations.map(annotation => (
         <span
           key={annotation.id}
-          className={annotation.id === currentAnnotation ? 'current' : ''}
+          className={
+            annotation.type === 'pullquote_credit'
+            ? 'pullquote_credit'
+            : annotation.id === currentAnnotation
+            ? 'current'
+            : ''
+          }
           onClick={e => onAnnotationClick(e, paragraph, annotation)}
           dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
         />
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index 53ef19f..10ace9e 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -49,6 +49,18 @@
   opacity: 0.5;
 }
 
+.paragraphs .pullquote {
+  padding-left: 3rem;
+}
+.paragraphs .pullquote_credit {
+  display: block;
+  margin-top: 1rem;
+}
+.paragraphs .pullquote_credit:before {
+  content: '—';
+}
+
+
 /* media image */
 
 .paragraphs .media.image img {