Add new components like flex-group and flex-inline.

assets/sass/components/cards/_cards.scss

@@ -0,0 +1,36 @@
+// Cards
+//
+// A simple cards style.
+
+.cards,
+%cards {
+  @extend %flex-group;
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+}
+
+.card,
+%card {
+  @include padding(.5);
+  border: 1px solid var(--color-border);
+
+  &--highlight {
+    border-color: var(--color-highlight);
+  }
+
+  &--inverted {
+    @extend %link-inverted;
+    background: var(--color-border);
+    color: var(--color-text-bg);
+  }
+
+  > * {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

assets/sass/components/disabled/_disabled.scss

@@ -0,0 +1,14 @@
+.disabled,
+%disabled {
+  // Re-set default cursor for disabled elements.
+  cursor: default;
+  color: var(--color-button-disabled);
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    color: var(--color-button-disabled);
+    text-decoration: none;
+  }
+}

assets/sass/components/flex-group/_flex-group.scss

@@ -0,0 +1,31 @@
+.flex-group,
+%flex-group {
+  $gap: 1;
+  @include gap($gap);
+  display: flex;
+  flex-wrap: wrap;
+
+  & > * {
+    flex: 1;
+  }
+
+  &--2 > * {
+    @include flex(2, $gap);
+  }
+
+  &--3 > * {
+    @include flex(3, $gap);
+  }
+
+  &--4 > * {
+    @include flex(4, $gap);
+  }
+
+  &--5 > * {
+    @include flex(5, $gap);
+  }
+
+  &--6 > * {
+    @include flex(6, $gap);
+  }
+}

assets/sass/components/flex-inline/_flex-inline.scss

@@ -0,0 +1,18 @@
+.flex-inline,
+%flex-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  padding: 0;
+  text-align: left;
+
+  @include rtl() {
+    flex-direction: row-reverse;
+    text-align: right;
+  }
+
+  &__item,
+  li {
+    list-style: none;
+  }
+}

assets/sass/components/stretch/_stretch.scss

@@ -0,0 +1,12 @@
+// Stretch content to the page edge.
+//
+// Requeried: Set max-page-width to a larger value than max-content-width.
+
+.stretch,
+%stretch {
+  width: 100%;
+
+  .main & {
+    max-width: none;
+  }
+}