How to get a feed on a Landing Page

[HelgaHH]

I've been trying to come up with the proper wording for what I'm trying to build, but I guess the best word for this is a 'feed block'. In other words, I am trying to build a page where we regularly post information about the new features of our software. It should be easy to add a new box with text that contains information about each new features, but instead of having to remove older ones, the page would sort of grow so that by clicking a button "see more" at the bottom, you're able to see features that were added before.

 

Basically, I want it to look like the image above. It should be easy to edit it on the Marketing Hub side instead of having to go to the design manager's side. Also, I want the older features still be shown on the page. Only the 6 recent ones are shown. None of these blocks would direct to a page unless we were to include some links in the text.  Is there a module for this purpose or what other solution would there be. I'm not a developer myself but I can write HTML/CSS code and I am somewhat familiar with working on HubSpot's design manager.

[Kevin-C · Accepted solution]

Hey @HelgaHH 

If you've got access to the HubDB it, along with a custom module or hubl template might be the perfect answer.

Below I've put together some starter code that'll get you about 75% of the way to what you're looking for:

{% set queryparam = "limit=6&orderBy=date_time" %} {# the max number of rows to pull from the DB ordered by date_time column #}
{% set table = hubdb_table_rows(YOURTABLEID, queryparam) %}
		
<section class="feed"><!-- Start feed section -->
		
{% if table == [] %}
    <article class="fc">
      <header>
        <h3 class="fc__time">Something went wrong</h3>
	<h2 class="fc__title">Sorry, no listings found for that Search. Try changing your filter and search again.</h2>
	</header>
      </article>
{% else %}
    {% for row in table %}
    <article class="fc">
      <header>
        <h3 class="fc__time">{{ row.date_time|datetimeformat('%B %e, %Y') }}</h3>
        <h2 class="fc__title">{{ row.title }}</h2>
      </header>
      <section class="fc__body">
        {{ row.copy }}
      </section>
    </article>
  {% endfor %}
{% endif %}
			
</section><!-- end feed section -->

And some simple CSS:

.feed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  background: #D6D5D3;
}
			
.fc h2,
.fc h3,
.fc p {
  margin: unset;
  padding: unset;
}
			
.fc {
  flex: 0 1 33%;
  padding: 1em;
  font-family: sans-serif;
  box-sizing: border-box;
}

Set up the HubDB like so: