# Elements inside article content with different style

**URL:** <https://discourse.gohugo.io/t/elements-inside-article-content-with-different-style/30712>\
**Category:** support\
**Created:** [January 18, 2021, 8:11am UTC](https://discourse.gohugo.io/t/elements-inside-article-content-with-different-style/30712 "2021-01-18T08:11:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parisian](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@Parisian](https://discourse.gohugo.io/u/Parisian)\
**Post date:** [January 18, 2021, 8:11am UTC](https://discourse.gohugo.io/t/elements-inside-article-content-with-different-style/30712/1 "2021-01-18T08:11:38Z")

</div>

Hello,  
I don’t have big issues in creating pages / homepage etc with layouts but I got one in everything related to a blog article with content in a .md file.

What I want to achieve :

- Blog article with a main content area using Grid
- Add when needed some elements that come inside this content but do not respect this main content grid.

See illustration :

1 = main content that I write in my .md file. I call it in single.html with `{{ .Content }}`  
2 = an elements positioned at the top of the article (exemple : social media icons). This I achieved in single.html and works fine.  
3 = a title for a pagraphe but that is starting at col 1 and not inside the main content container. Problem.  
4 = an image with full screen width. Problem.  
5 = an element like an image that goes into the container. This no problem.

It’s not an issue with css (tailwind in my case) as I got it working fine in single.html but my problem come when I want to make this working with content file.

What is the best way with Hugo to achieve the points 3 and 4? My main issue (and maybe because I’m missing something here) is that I want to style content that is already in .content. When I Code it in html there is no problem.

 ![grid](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/7/7dd026f5f77346e8ad58bb86c4c028e40c328200.jpeg)

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [January 18, 2021, 8:34am UTC](https://discourse.gohugo.io/t/elements-inside-article-content-with-different-style/30712/2 "2021-01-18T08:34:44Z")

</div>

Show the working code of the HTML page you did and we might be able to wrap our heads around it. I guess it’s doable with shortcodes or even just inline.

Hint:

```auto
## heading ## {#id .className attrName=attrValue class="class1 class2"}

```

results in

```auto
<h2 heading id="id" class="className class1 class2" attrName="attrValue">heading</h2>
```