diff --git a/_includes/blocks/details.liquid b/_includes/blocks/details.liquid
new file mode 100644
index 0000000..dd398c2
--- /dev/null
+++ b/_includes/blocks/details.liquid
@@ -0,0 +1,7 @@
+{% capture content %}
+<details class="content {% if include.align %}{{ include.align }}{% endif %}" {% if include.open %}open{% endif %}>
+	<summary data-heading="{{ include.level | default: 0 }}">{{ include.title }}</summary>
+	{{ include.content }}
+</details>
+{% endcapture %}
+{% include blocks/_base.liquid type="details" content=content float=include.float align=include.align %}
diff --git a/_sass/_block-details.scss b/_sass/_block-details.scss
new file mode 100644
index 0000000..622e6c7
--- /dev/null
+++ b/_sass/_block-details.scss
@@ -0,0 +1,57 @@
+// --------------------------------------------------------------------------------
+// Details
+// --------------------------------------------------------------------------------
+.block-details {
+	margin: 0;
+	margin-left: -0.75rem;
+	margin-right: -0.75rem;
+	padding: 0;
+}
+
+.block-details > .content {
+	margin: 0;
+	padding: 0.75rem;
+}
+
+.block-details > .content > summary {
+	margin-top: -0.75rem;
+	margin-left: -0.75rem;
+	margin-right: -0.75rem;
+	margin-bottom: 0.75rem;
+}
+
+.block-details > .content > summary[data-heading] {
+	font-variant: small-caps;
+	font-weight: bold;
+	padding: 0.5rem 0.75rem;
+}
+
+.block-details > .content > summary[data-heading="1"] {
+	font-size: 2.0rem;
+	background: $theme-article-heading-h1-background;
+}
+
+.block-details > .content > summary[data-heading="2"] {
+	font-size: 1.8rem;
+	background: $theme-article-heading-h2-background;
+}
+
+.block-details > .content > summary[data-heading="3"] {
+	font-size: 1.6667rem;
+	background: $theme-article-heading-h3-background;
+}
+
+.block-details > .content > summary[data-heading="4"] {
+	font-size: 1.45rem;
+	background: $theme-article-heading-h4-background;
+}
+
+.block-details > .content > summary[data-heading="5"] {
+	font-size: 1.3333rem;
+	background: $theme-article-heading-h5-background;
+}
+
+.block-details > .content > summary[data-heading="6"] {
+	font-size: 1.2rem;
+	background: $theme-article-heading-h6-background;
+}
diff --git a/_sass/_blocks.scss b/_sass/_blocks.scss
index db8d299..97c552c 100644
--- a/_sass/_blocks.scss
+++ b/_sass/_blocks.scss
@@ -120,6 +120,7 @@
 // Specialized Blocks
 // --------------------------------------------------------------------------------
 @import "_block-columns.scss";
+@import "_block-details.scss";
 @import "_block-heading.scss";
 @import "_block-media.scss";
 @import "_block-table.scss";