added untracked files

app/components/cards/public-activity-card-small.hbs

@@ -0,0 +1,28 @@
+<div
+  itemscope
+  itemtype='https://schema.org/Event'
+  class='card-body p-0'
+  {{action action}}
+>
+  <div class='d-flex' data-test-public-activity-card>
+    <div
+      class='col-3 date-holder p-3'
+      itemprop='startDate'
+      content={{moment-format activity.startTime}}
+    >
+      <span class='day-of-month'>
+        {{moment-format activity.startTime 'DD'}}
+      </span>
+      <b class='month-abbrev'> {{moment-format activity.startTime 'MMM'}}</b>
+      <b class='time'> {{moment-format activity.startTime 'HH:mm'}}</b>
+    </div>
+    <div class='col-9 public-card-image p-3' style={{style}}>
+      <h4 itemprop='name' class='card-title'>{{activity.title}}</h4>
+      <span itemprop='location' itemscope itemtype='https://schema.org/Place'>
+        <i class='text-light' itemprop='name address'>{{activity.location}}</i>
+      </span>
+      <meta itemprop='description' content={{activity.description}} />
+      <meta itemprop='image' content={{activity.coverPhotoUrlOrDefault}} />
+    </div>
+  </div>
+</div>

app/components/cards/public-activity-card-small.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+const PublicActivityCardSmall = Component.extend({
+  classNames: ['card', 'public-activity-card-small', 'border-0', 'p-0'],
+  style: computed('activity.coverPhotoUrl', function () {
+    if (this.activity.coverPhotoUrl) {
+      return htmlSafe(`background-image: url(${this.activity.coverPhotoUrl})`);
+    }
+    return htmlSafe(
+      'background: center/cover url(/images/fallback/public_coverphoto_default.png), rgb(0 0 0 / 12%);'
+    );
+  }),
+});
+
+PublicActivityCardSmall.reopenClass({
+  positionalParams: ['activity'],
+});
+
+export default PublicActivityCardSmall;

app/components/cards/public-article-card.hbs

@@ -0,0 +1,65 @@
+<LinkTo @route='articles.article' @model={{article.id}}>
+  <article
+    class={{if useMaxHeight 'd-flex'}}
+    itemscope
+    itemtype='https://schema.org/Article'
+  >
+    <div class='card border-0'>
+      <div
+        class='card-header card-header--overlay'
+        data-test-public-article-card
+      >
+        <div class='embed-responsive embed-responsive-16x9'>
+          <img
+            itemprop='image'
+            class='card-img-rounded'
+            src={{article.coverPhotoUrlOrDefault}}
+          />
+        </div>
+        <div class='card-title-bar gradient-overlay-rounded d-flex'>
+          <div class='card-titles col ps-0'>
+            <h5 itemprop='name headline'>
+              {{#if article.pinned}}<FaIcon @icon='thumbtack' />{{/if}}
+              {{article.title}}
+            </h5>
+            {{#if article.group}}
+              <LinkTo
+                @route='groups.group'
+                @model={{article.group.id}}
+                class='link-to card-subtitle-link'
+              >
+                <h5
+                  class='card-subtitle d-none d-sm-block'
+                  itemprop='author'
+                  itemscope
+                  itemtype='https://schema.org/Person'
+                >
+                  <span itemprop='name'>{{article.authorName}}</span>
+                </h5>
+              </LinkTo>
+            {{else}}
+              <LinkTo
+                @route='users.user'
+                @model={{article.author.id}}
+                class='link-to card-subtitle-link'
+              >
+                <h5
+                  class='card-subtitle d-none d-sm-block'
+                  itemprop='author'
+                  itemscope
+                  itemtype='https://schema.org/Person'
+                >
+                  <span itemprop='name'>{{article.authorName}}</span>
+                </h5>
+              </LinkTo>
+            {{/if}}
+          </div>
+          <span class='card-subtitle align-self-end'>
+            <FaIcon @icon='comments' />
+            {{article.amountOfComments}}
+          </span>
+        </div>
+      </div>
+    </div>
+  </article>
+</LinkTo>

app/components/cards/public-article-card.js

@@ -0,0 +1,13 @@
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+
+const ArticleCardComponent = Component.extend({
+  session: service('session'),
+  article: null,
+});
+
+ArticleCardComponent.reopenClass({
+  positionalParams: ['article'],
+});
+
+export default ArticleCardComponent;

app/styles/components/cards/public-activity-card-small.scss

@@ -0,0 +1,63 @@
+// allowed total height - the height of bottom-margins of top two activity cards
+// and that all divided by 3, for 3 article cards
+$public-activity-card-height: calc(($public-activity-and-photo-holders-height - 2rem) / 3);
+
+.public-activity-card-small {
+  margin-bottom: 1rem;
+  box-shadow: none;
+  background-color: $white;
+  cursor: pointer;
+  // subtract bottom-margin
+  height: $public-activity-card-height;
+  overflow: hidden;
+  color: $white;
+
+  .public-card-image {
+    transition: background-color 0.3s ease-in-out;
+    background-color: $gray-700;
+    background-position: center;
+    background-size: cover;
+    height: $public-activity-card-height;
+    background-blend-mode: overlay;
+  }
+
+  .activity-card-title {
+    transition: color 0.3s ease-in-out;
+    margin-top: 8px;
+    color: $white;
+    font-size: 0.8rem;
+    font-style: normal;
+  }
+
+  &:hover {
+    .public-card-image {
+      background-color: $gray-900;
+    }
+
+    .card-title {
+      color: $brand-primary-dark;
+    }
+  }
+
+  .date-holder {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    vertical-align: middle;
+    text-align: center;
+    color: $black;
+
+    .day-of-month {
+      font-size: 2rem;
+      font-weight: 700;
+    }
+
+    .month-abbrev {
+      margin-top: -15px;
+    }
+
+    .time {
+      color: $gray-600;
+    }
+  }
+}