How to use tabbed feature of Markdown in this hugo site?

[devopstoday11]

Hi @tfsojon @tfsumon If I want to write content (text, image, gif, animation, or anything) in a tabbed structure like the reference below, how do I do that on this website?

Below link is only reference to the tabbed layout:- https://docs.docker.com/get-started/02_our_app/#build-the-apps-image https://demo.gethugothemes.com/docbox/ -- this reference is from your templates. Go to "getting started > requirements" to see the tabbed structure.

This is the same request raised on the docs site - https://github.com/intelops/external-docs/issues/55

In this template, "Tab" was mentioned - https://demo.gethugothemes.com/godocs/site/style-1/basic-startup/elements/ Does it work on both of our main website & docs sites? @tfsojon @tfsomrat @tfsumon

[devopstoday11]

[devopstoday11]

@tfsojon @tfsomrat what is the name of the current website Font?

And, what is the name of the Font used in this template? https://demo.gethugothemes.com/hargo/

[tfsojon]

Docbox used - https://fonts.google.com/specimen/IBM+Plex+Mono Hargo used - https://fonts.google.com/specimen/Quicksand

[tfsumon]

Hello @devopstoday11!

I've included the required files to make tabs work on both websites. Now, you can use tabs by adding the following short code into your markdown file.

{{< tabs "demo-tab" >}}

{{< tab "first" >}}
First Tab
{{< /tab >}}

{{< tab "second" >}}
Second Tab
{{< /tab >}}

{{< tab "third" >}}
Third Tab
{{< /tab >}}

{{< /tabs >}}

[devopstoday11]

@tfsumon @tfsojon I like this page - https://demo.gethugothemes.com/docbox/ Getting Started > Requirements

Is it possible to write content in a similar style to that "Requirements" page in docbox template, in our main website & doc sites as well, in any page we want? If yes, how? @tfsumon @tfsojon @tfsomrat

[devopstoday11]

@tfsojon @tfsumon , I need information on the above query. Is it possible to write the content in similar format as docbox template Requirements page in our current docs site and website? I'm not asking about look & feel. I am asking about the layout the content was presented and how different markdown syntax were used.

[tfsumon]

Hi @devopstoday11!

Yes, it's possible, but it will require incorporating those layouts into both our documentation site and website. Please confirm if you would like us to implement this specific layout on your website. Are you referring to the layout shown in the following image?

[devopstoday11]

@tfsumon , yes, please work on providing the facility to add that kind of layouts as well. I should be able to use those layouts wherever I want on different pages.

And also the call to action thing. If all those are available in our website & docs site theme, I will be able to use those layouts and call to action thing wherever I want on different pages. Before adding "call to action" thing, please check once if exactly same type of call-to-action thing is available already in our current sites; if available then no need to add call to action thing again.

[tfsumon]

Hello @devopstoday11!

I've incorporated those layouts into both sites. You can review these layouts in your local development environment using the following URLs:

• Docsite: http://localhost:1313/1.0.1/docbox-layouts/
• Website: http://localhost:1313/learning-center/docbox-layouts/

The content file paths are as follows:

• Docsite: /content/1.0.1/docbox-layouts/
• Website: /content/english/learning-center/docbox-layouts/

[devopstoday11]

checked and merged @tfsumon , thank you.