diff --git a/elm-package.json b/elm-package.json
index 65a2988c..a52498b4 100644
--- a/elm-package.json
+++ b/elm-package.json
@@ -7,8 +7,8 @@
         "src"
     ],
     "exposed-modules": [
-        "Nri.Ui.AssetPath",
         "Nri.Ui.Alert.V1",
+        "Nri.Ui.AssetPath",
         "Nri.Ui.BannerAlert.V1",
         "Nri.Ui.Button.V1",
         "Nri.Ui.Checkbox.V1",
@@ -19,6 +19,7 @@
         "Nri.Ui.Palette.V1",
         "Nri.Ui.Styles.V1",
         "Nri.Ui.Tabs.V1",
+        "Nri.Ui.Text.Quiz.V1",
         "Nri.Ui.Text.V1",
         "Nri.Ui.TextArea.V1",
         "Nri.Ui.TextInput.V1"
diff --git a/src/Nri/Ui/Text/Quiz/V1.elm b/src/Nri/Ui/Text/Quiz/V1.elm
new file mode 100644
index 00000000..d06b44cf
--- /dev/null
+++ b/src/Nri/Ui/Text/Quiz/V1.elm
@@ -0,0 +1,67 @@
+module Nri.Ui.Text.Quiz.V1
+    exposing
+        ( footnote
+        , styles
+        )
+
+{-| Text types for quizzes:
+
+@docs footnote
+
+@docs styles
+
+-}
+
+import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import Html exposing (..)
+import Nri.Colors exposing (..)
+import Nri.Fonts exposing (quizFont)
+import Nri.Ui.Styles.V1
+
+
+{-| This is a little note or footnote.
+-}
+footnote : List (Html msg) -> Html msg
+footnote content =
+    p [ class footnoteClasses ] content
+
+
+footnoteClasses : List CssClasses
+footnoteClasses =
+    [ Footnote ]
+
+
+namespace : String
+namespace =
+    "Nri-Ui-Text-Quiz-"
+
+
+type CssClasses
+    = Footnote
+
+
+{-| -}
+styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
+styles =
+    Nri.Ui.Styles.V1.styles namespace
+        [ Css.Foreign.class Footnote
+            [ makeQuizFont (px 13) gray45
+            , lineHeight (px 18)
+            , fontWeight (int 400)
+            , margin4 (px 5) (px 0) (px 0) (px 0)
+            ]
+        ]
+
+
+makeQuizFont : Css.FontSize a -> Css.ColorValue b -> Style
+makeQuizFont size fontColor =
+    Css.batch
+        [ quizFont
+        , fontSize size
+        , color fontColor
+        ]
+
+
+{ class } =
+    styles
diff --git a/styleguide-app/Examples/Text/Quiz.elm b/styleguide-app/Examples/Text/Quiz.elm
new file mode 100644
index 00000000..787a9c7a
--- /dev/null
+++ b/styleguide-app/Examples/Text/Quiz.elm
@@ -0,0 +1,28 @@
+module Examples.Text.Quiz exposing (example)
+
+{- \
+   @docs example
+-}
+
+import Html
+import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
+import Nri.Ui.Text.Quiz.V1 as TextQuiz
+
+
+{-| -}
+example : ModuleExample msg
+example =
+    { filename = "Nri.Ui.Text.Quiz.V1.elm"
+    , category = TextQuiz
+    , content =
+        let
+            longerBody =
+                """Be on the lookout for a new and improved assignment
+                    creation form! Soon, you'll be able to easily see a summary
+                    of the content you're assigning, as well as an estimate for
+                    how long the assignment will take.
+                """
+        in
+        [ TextQuiz.footnote [ Html.text <| "This is a footnote. " ++ longerBody ]
+        ]
+    }
diff --git a/styleguide-app/ModuleExample.elm b/styleguide-app/ModuleExample.elm
index 65e72ae5..72f33f97 100644
--- a/styleguide-app/ModuleExample.elm
+++ b/styleguide-app/ModuleExample.elm
@@ -10,7 +10,9 @@ module ModuleExample
         )
 
 import Css exposing (..)
-import Css.Namespace
+import Css.Foreign exposing (Snippet)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
+import DEPRECATED.Css.Namespace
 import Html exposing (Html, img)
 import Html.Attributes
 import Html.CssHelpers
@@ -44,6 +46,7 @@ type Category
     | NotesToDeveloper
     | Colors
     | Text
+    | TextQuiz
     | DynamicSymbols
     | Pages
     | QuestionTypes
@@ -87,6 +90,9 @@ categoryFromString string =
         "Text" ->
             Ok Text
 
+        "TextQuiz" ->
+            Ok TextQuiz
+
         "DynamicSymbols" ->
             Ok DynamicSymbols
 
@@ -136,6 +142,9 @@ categoryForDisplay category =
         Text ->
             "Text"
 
+        TextQuiz ->
+            "TextQuiz"
+
         DynamicSymbols ->
             "Dynamic Symbols"
 
@@ -174,22 +183,22 @@ type Classes
     | ModuleBody
 
 
-viewStyles : List Css.Snippet
+viewStyles : List Snippet
 viewStyles =
-    [ Css.class ModuleHeader
+    [ Css.Foreign.class ModuleHeader
         [ display block
         , backgroundColor glacier
         , padding (px 20)
         , marginTop (px 20)
         ]
-    , Css.class ModuleImporting
+    , Css.Foreign.class ModuleImporting
         [ display block
         , padding (px 20)
         , margin2 (px 20) zero
         ]
-    , Css.class ModuleBody
+    , Css.Foreign.class ModuleBody
         [ padding2 (px 20) zero ]
-    , Css.class ModuleName
+    , Css.Foreign.class ModuleName
         [ color gray20
         , fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ]
         , fontSize (px 20)
@@ -197,12 +206,12 @@ viewStyles =
     ]
 
 
-styles : Css.Stylesheet
+styles : Stylesheet
 styles =
     List.concat
         [ viewStyles
         ]
-        |> (Css.stylesheet << Css.Namespace.namespace "Page-StyleGuide-ModuleExample-")
+        |> (stylesheet << DEPRECATED.Css.Namespace.namespace "Page-StyleGuide-ModuleExample-")
 
 
 { id, class, classList } =
diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm
index 5a378af6..4c9fd6d1 100644
--- a/styleguide-app/NriModules.elm
+++ b/styleguide-app/NriModules.elm
@@ -1,11 +1,14 @@
 module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, styles, subscriptions, update)
 
 import Css exposing (..)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Examples.Text as TextExample
+import Examples.Text.Quiz as TextQuizExample
 import Html exposing (Html, img)
 import Html.Attributes exposing (..)
 import ModuleExample exposing (Category(..), ModuleExample)
 import Navigation
+import Nri.Ui.Text.Quiz.V1 as TextQuiz
 import Nri.Ui.Text.V1 as Text
 import String.Extra
 
@@ -59,6 +62,7 @@ container width children =
 nriThemedModules : ModuleStates -> List (ModuleExample Msg)
 nriThemedModules model =
     [ TextExample.example
+    , TextQuizExample.example
     ]
 
 
@@ -84,4 +88,5 @@ styles =
           [ ModuleExample.styles
           ]
         , (Text.styles |> .css) ()
+        , (TextQuiz.styles |> .css) ()
         ]
diff --git a/styleguide-app/View.elm b/styleguide-app/View.elm
index d9a7c560..9ef565cb 100644
--- a/styleguide-app/View.elm
+++ b/styleguide-app/View.elm
@@ -1,7 +1,9 @@
 module View exposing (view)
 
 import Css exposing (..)
-import Css.Namespace
+import Css.Foreign exposing (Snippet)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
+import DEPRECATED.Css.Namespace
 import Html exposing (Html, img)
 import Html.Attributes exposing (..)
 import Html.CssHelpers
@@ -113,6 +115,7 @@ navigation route =
                 :: List.map
                     navLink
                     [ Text
+                    , TextQuiz
                     , Colors
                     , Layout
                     , Inputs
@@ -139,44 +142,44 @@ type Classes
     | NavLink
 
 
-layoutFixer : List Css.Snippet
+layoutFixer : List Snippet
 layoutFixer =
     -- TODO: remove when universal header seizes power
-    [ Css.selector "#header-menu"
+    [ Css.Foreign.selector "#header-menu"
         [ Css.property "float" "none"
         ]
-    , Css.selector "#page-container"
+    , Css.Foreign.selector "#page-container"
         [ maxWidth (px 1400)
         ]
-    , Css.selector ".anonymous .log-in-button"
+    , Css.Foreign.selector ".anonymous .log-in-button"
         [ Css.property "float" "none"
         , right zero
         , top zero
         ]
-    , Css.selector ".l-inline-blocks"
+    , Css.Foreign.selector ".l-inline-blocks"
         [ textAlign right
         ]
-    , Css.everything
+    , Css.Foreign.everything
         [ Fonts.baseFont
         ]
     ]
 
 
-styles : Css.Stylesheet
+styles : Stylesheet
 styles =
-    (Css.stylesheet << Css.Namespace.namespace "Page-StyleGuide-") <|
+    (stylesheet << DEPRECATED.Css.Namespace.namespace "Page-StyleGuide-") <|
         List.concat
-            [ [ Css.class Section
+            [ [ Css.Foreign.class Section
                     [ margin2 (px 40) zero
                     ]
-              , Css.class StyleGuideLayout
+              , Css.Foreign.class StyleGuideLayout
                     [ displayFlex
                     , alignItems flexStart
                     ]
-              , Css.class StyleGuideContent
+              , Css.Foreign.class StyleGuideContent
                     [ flexGrow (int 1)
                     ]
-              , Css.class CategoryMenu
+              , Css.Foreign.class CategoryMenu
                     [ flexBasis (px 300)
                     , backgroundColor Colors.gray92
                     , marginRight (px 40)
@@ -185,20 +188,20 @@ styles =
                     , top (px 150)
                     , flexShrink zero
                     ]
-              , Css.class CategoryLinks
+              , Css.Foreign.class CategoryLinks
                     [ margin4 zero zero (px 40) zero
-                    , Css.children
-                        [ Css.selector "li"
+                    , Css.Foreign.children
+                        [ Css.Foreign.selector "li"
                             [ margin2 (px 10) zero
                             ]
                         ]
                     ]
-              , Css.class NavLink
+              , Css.Foreign.class NavLink
                     [ backgroundColor transparent
                     , borderStyle none
                     , color Colors.azure
                     ]
-              , Css.class ActiveCategory
+              , Css.Foreign.class ActiveCategory
                     [ color Colors.navy
                     ]
               ]
@@ -214,7 +217,7 @@ attachElmCssStyles : Html msg
 attachElmCssStyles =
     Html.CssHelpers.style <|
         .css <|
-            Css.compile <|
+            compile <|
                 List.concat
                     [ [ styles ]
                     , NriModules.styles
diff --git a/styleguide-app/elm-package.json b/styleguide-app/elm-package.json
index 7c9c82b5..1f1dcb5d 100644
--- a/styleguide-app/elm-package.json
+++ b/styleguide-app/elm-package.json
@@ -9,7 +9,7 @@
     ],
     "exposed-modules": [],
     "dependencies": {
-        "NoRedInk/nri-elm-css": "5.0.0 <= v <= 5.0.0",
+        "NoRedInk/nri-elm-css": "5.0.0 <= v < 6.0.0",
         "NoRedInk/view-extra": "2.0.0 <= v < 3.0.0",
         "elm-community/string-extra": "1.4.0 <= v < 2.0.0",
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
@@ -18,6 +18,7 @@
         "evancz/url-parser": "2.0.1 <= v < 3.0.0",
         "pablohirafuji/elm-markdown": "2.0.4 <= v < 3.0.0",
         "rtfeldman/elm-css": "11.2.0 <= v < 12.0.0",
+        "rtfeldman/elm-css": "13.1.1 <= v < 14.0.0",
         "rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0",
         "rtfeldman/elm-css-util": "1.0.2 <= v < 2.0.0",
         "tesk9/accessible-html": "3.0.0 <= v < 4.0.0",