3 files changed, 67 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/subhead/README.md b/assets/sass/@primer/css/subhead/README.md
new file mode 100644
index 0000000..2f8a8d1
--- /dev/null
+++ b/assets/sass/@primer/css/subhead/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "subhead"
+generated: true
+---
+
+# Primer CSS: `subhead` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/subhead/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/subhead.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/subhead/index.scss b/assets/sass/@primer/css/subhead/index.scss
new file mode 100644
index 0000000..d0ed721
--- /dev/null
+++ b/assets/sass/@primer/css/subhead/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import "../support/index.scss";
+@import "./subhead.scss";
diff --git a/assets/sass/@primer/css/subhead/subhead.scss b/assets/sass/@primer/css/subhead/subhead.scss
new file mode 100644
index 0000000..5ab2629
--- /dev/null
+++ b/assets/sass/@primer/css/subhead/subhead.scss
@@ -0,0 +1,39 @@
+// Subhead styles
+.Subhead {
+  display: flex;
+  padding-bottom: $spacer-2;
+  margin-bottom: $spacer-3;
+  border-bottom: $border;
+  flex-flow: row wrap;
+}
+
+// Modifier class to give a lot of breathing room between sections of content.
+.Subhead--spacious {
+  margin-top: $spacer-6;
+}
+
+// <h2> sized heading with normal font weight
+.Subhead-heading {
+  font-size: $h2-size;
+  font-weight: $font-weight-normal;
+  flex: 1 1 auto;
+}
+
+// Make the text bold and red for dangerous content
+.Subhead-heading--danger {
+  font-weight: $font-weight-bold;
+  color: $text-red;
+}
+
+// One-liner of supporting text
+.Subhead-description {
+  font-size: $body-font-size;
+  color: $text-gray;
+  flex: 1 100%;
+}
+
+// Add 1 or 2 buttons to the right of the heading
+.Subhead-actions {
+  align-self: center;
+  justify-content: flex-end;
+}