= {title}
:title:       Blog Panel
:description: In this tutorial, we will learn how to implement a design that look like a blog panel
:doctitle:    Example for Asciidoc-Bootstrap - {title}


== Blog Panel Design

[role="lead"]
A blog panel design is an advanced layout with two columns.

Example of Asciidoc document. See source text
footnote:[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/examples/demo3.asciidoc].

In this design, we used :

* `css-signature` attribute to customize only the blog page colors (background)
* `role` attribute to customize css rules

We used additional css rules added by file +blog2.css+ to give such design.
[source,css]
----
include::blog2.css[]
----

== Result with flatly theme

Invoke the following command:
[source,bash]
----
$ asciidoc
  -b bootstrap
  -f /path/to/examples/demo3.conf
  -o blog2-sample.html
  /path/to/examples/demo3.asciidoc
----

And here are the final result that you should get.

image::images/screenshots/blog2-sample.png[link="blog2-sample.html",title="My Blog panel with flatly theme",role="thumbnail",options="align,responsive"]

== About options @to generate documents@

We reused and group all common attributes to generate documents in a standard asciidoc configuration file called `demo3.conf`.
..........................
[attributes]
linkcss
tocmmenu
numbered
lang=en
jumbotron
jumbotron-fullwidth
totop
theme=flatly
stylesheet=blog2.css
css-signature=blog
iconsfont=font-awesome
footer!
footer-fullwidth
..........................

include::gendocfile.asciidoc[]