# CMS React: Blog Templates

**URL:** <https://community.hubspot.com/t/cms-react-blog-templates/129141>\
**Category:** CMS Development\
**Created:** [April 2, 2025, 5:31pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141 "2025-04-02T17:31:14Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![nickdeckerdevs1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nickdeckerdevs1/32/5198_2.png) [@nickdeckerdevs1](https://community.hubspot.com/u/nickdeckerdevs1)\
**Post date:** [April 15, 2025, 5:34pm UTC](https://community.hubspot.com/t/cms-react-blog-templates/129141/5 "2025-04-15T17:34:53Z")

</div>

Okay -- so what you look to be needing is a [react/js partial](https://github.hubspot.com/cms-react/reference/js-partials.html)

You would create this Blog.jsx partial and build out your component there, this is super basic

```lia-code-sample
{% extends "./layouts/base.hubl.html" %}

{% block header %}
 {% module "header_js_module"
 path="@projects/app/src/components/modules/Header" %}
{% endblock header %}

{% block body %}
 {% js_partial "blog_partial"
 path="@projects/project-folder/js-package/components/partials/Blog.jsx"
 %}
{% endblock body %}

{% block footer %}
 {% module "footer_js_module"
 path="@projects/app/src/components/modules/Footer" 
 %}
{% endblock footer %}

```

You could use graphql to bring in the blog data, or you could pass the data to your partial -- this is a bit more thought out and better example:

[Example blog listing component from the elevate theme](https://github.com/HubSpot/cms-elevate-theme-public/tree/9ccb83038fe0d681484fe0b50f1c4d7fb25e3016/src/unified-theme/components/modules/BlogListing)

---

_[View the full topic](https://community.hubspot.com/t/cms-react-blog-templates/129141)._