diff --git a/pagetop/src/base/component/heading.rs b/pagetop/src/base/component/heading.rs
new file mode 100644
index 00000000..5023e611
--- /dev/null
+++ b/pagetop/src/base/component/heading.rs
@@ -0,0 +1,186 @@
+use crate::prelude::*;
+
+pub const HEADING_COMPONENT: &str = "pagetop::component::heading";
+
+pub enum HeadingType {
+    H1(String),
+    H2(String),
+    H3(String),
+    H4(String),
+    H5(String),
+    H6(String),
+}
+
+pub enum HeadingDisplay {
+    XxLarge,
+    Large,
+    Normal,
+    Medium,
+    Small,
+    XxSmall,
+}
+
+pub struct Heading {
+    renderable: fn() -> bool,
+    weight    : isize,
+    heading   : HeadingType,
+    display   : HeadingDisplay,
+    id        : OptIden,
+    classes   : Classes,
+    template  : String,
+}
+
+impl ComponentTrait for Heading {
+    fn new() -> Self {
+        Heading {
+            renderable: render_always,
+            weight    : 0,
+            heading   : HeadingType::H1("".to_owned()),
+            display   : HeadingDisplay::Normal,
+            id        : OptIden::new(),
+            classes   : Classes::new(),
+            template  : "default".to_owned(),
+        }
+    }
+
+    fn handler(&self) -> &'static str {
+        HEADING_COMPONENT
+    }
+
+    fn is_renderable(&self) -> bool {
+        (self.renderable)()
+    }
+
+    fn weight(&self) -> isize {
+        self.weight
+    }
+
+    fn default_render(&self, _: &mut Assets) -> Markup {
+        html! { @match &self.heading() {
+            HeadingType::H1(text) => h1 id=[self.id()] class=[self.classes()] { (text) },
+            HeadingType::H2(text) => h2 id=[self.id()] class=[self.classes()] { (text) },
+            HeadingType::H3(text) => h3 id=[self.id()] class=[self.classes()] { (text) },
+            HeadingType::H4(text) => h4 id=[self.id()] class=[self.classes()] { (text) },
+            HeadingType::H5(text) => h5 id=[self.id()] class=[self.classes()] { (text) },
+            HeadingType::H6(text) => h6 id=[self.id()] class=[self.classes()] { (text) },
+        }}
+    }
+
+    fn as_ref_any(&self) -> &dyn AnyComponent {
+        self
+    }
+
+    fn as_mut_any(&mut self) -> &mut dyn AnyComponent {
+        self
+    }
+}
+
+impl Heading {
+    pub fn with(heading: HeadingType) -> Self {
+        Heading::new().with_heading(heading)
+    }
+
+    // Heading BUILDER.
+
+    pub fn with_renderable(mut self, renderable: fn() -> bool) -> Self {
+        self.alter_renderable(renderable);
+        self
+    }
+
+    pub fn with_weight(mut self, weight: isize) -> Self {
+        self.alter_weight(weight);
+        self
+    }
+
+    pub fn with_heading(mut self, heading: HeadingType) -> Self {
+        self.alter_heading(heading);
+        self
+    }
+
+    pub fn with_display(mut self, display: HeadingDisplay) -> Self {
+        self.alter_display(display);
+        self
+    }
+
+    pub fn with_id(mut self, id: &str) -> Self {
+        self.alter_id(id);
+        self
+    }
+
+    pub fn with_classes(mut self, classes: &str, op: ClassesOp) -> Self {
+        self.alter_classes(classes, op);
+        self
+    }
+
+    pub fn using_template(mut self, template: &str) -> Self {
+        self.alter_template(template);
+        self
+    }
+
+    // Heading ALTER.
+
+    pub fn alter_renderable(&mut self, renderable: fn() -> bool) -> &mut Self {
+        self.renderable = renderable;
+        self
+    }
+
+    pub fn alter_weight(&mut self, weight: isize) -> &mut Self {
+        self.weight = weight;
+        self
+    }
+
+    pub fn alter_heading(&mut self, heading: HeadingType) -> &mut Self {
+        self.heading = heading;
+        self
+    }
+
+    pub fn alter_display(&mut self, display: HeadingDisplay) -> &mut Self {
+        self.display = display;
+        self.classes.alter(match &self.display() {
+            HeadingDisplay::XxLarge    => "display-2",
+            HeadingDisplay::Large      => "display-3",
+            HeadingDisplay::Normal     => "",
+            HeadingDisplay::Medium     => "display-4",
+            HeadingDisplay::Small      => "display-5",
+            HeadingDisplay::XxSmall    => "display-6",
+        }, ClassesOp::SetDefault);
+        self
+    }
+
+    pub fn alter_id(&mut self, id: &str) -> &mut Self {
+        self.id.with_value(id);
+        self
+    }
+
+    pub fn alter_classes(&mut self, classes: &str, op: ClassesOp) -> &mut Self {
+        self.classes.alter(classes, op);
+        self
+    }
+
+    pub fn alter_template(&mut self, template: &str) -> &mut Self {
+        self.template = template.to_owned();
+        self
+    }
+
+    // Paragraph GETTERS.
+
+    pub fn heading(&self) -> &HeadingType {
+        &self.heading
+    }
+
+    pub fn display(&self) -> &HeadingDisplay {
+        &self.display
+    }
+
+    pub fn id(&self) -> &Option<String> {
+        self.id.option()
+    }
+
+    pub fn classes(&self) -> &Option<String> {
+        self.classes.option()
+    }
+
+    pub fn template(&self) -> &str {
+        self.template.as_str()
+    }
+}
diff --git a/pagetop/src/base/component/mod.rs b/pagetop/src/base/component/mod.rs
index 14759dc8..986ba6f5 100644
--- a/pagetop/src/base/component/mod.rs
+++ b/pagetop/src/base/component/mod.rs
@@ -9,6 +9,14 @@ mod chunck;
 pub use chunck::{
     CHUNCK_COMPONENT, Chunck
 };
+mod heading;
+pub use heading::{
+    HEADING_COMPONENT, Heading, HeadingDisplay, HeadingType
+};
+mod paragraph;
+pub use paragraph::{
+    PARAGRAPH_COMPONENT, Paragraph, ParagraphDisplay
+};
 mod block;
 pub use block::{
     BLOCK_COMPONENT, Block
diff --git a/pagetop/src/base/component/paragraph.rs b/pagetop/src/base/component/paragraph.rs
new file mode 100644
index 00000000..1cf7c01b
--- /dev/null
+++ b/pagetop/src/base/component/paragraph.rs
@@ -0,0 +1,177 @@
+use crate::prelude::*;
+
+pub const PARAGRAPH_COMPONENT: &str = "pagetop::component::paragraph";
+
+pub enum ParagraphDisplay {
+    XxLarge,
+    Large,
+    MediumPlus,
+    Normal,
+    Medium,
+    Small,
+    XxSmall,
+}
+
+pub struct Paragraph {
+    renderable: fn() -> bool,
+    weight    : isize,
+    html      : Markup,
+    display   : ParagraphDisplay,
+    id        : OptIden,
+    classes   : Classes,
+    template  : String,
+}
+
+impl ComponentTrait for Paragraph {
+    fn new() -> Self {
+        Paragraph {
+            renderable: render_always,
+            weight    : 0,
+            html      : html! {},
+            display   : ParagraphDisplay::Normal,
+            id        : OptIden::new(),
+            classes   : Classes::new(),
+            template  : "default".to_owned(),
+        }
+    }
+
+    fn handler(&self) -> &'static str {
+        PARAGRAPH_COMPONENT
+    }
+
+    fn is_renderable(&self) -> bool {
+        (self.renderable)()
+    }
+
+    fn weight(&self) -> isize {
+        self.weight
+    }
+
+    fn default_render(&self, _: &mut Assets) -> Markup {
+        html! {
+            p id=[self.id()] class=[self.classes()] { (*self.html()) }
+        }
+    }
+
+    fn as_ref_any(&self) -> &dyn AnyComponent {
+        self
+    }
+
+    fn as_mut_any(&mut self) -> &mut dyn AnyComponent {
+        self
+    }
+}
+
+impl Paragraph {
+    pub fn with(html: Markup) -> Self {
+        Paragraph::new().with_html(html)
+    }
+
+    // Paragraph BUILDER.
+
+    pub fn with_renderable(mut self, renderable: fn() -> bool) -> Self {
+        self.alter_renderable(renderable);
+        self
+    }
+
+    pub fn with_weight(mut self, weight: isize) -> Self {
+        self.alter_weight(weight);
+        self
+    }
+
+    pub fn with_html(mut self, html: Markup) -> Self {
+        self.alter_html(html);
+        self
+    }
+
+    pub fn with_display(mut self, display: ParagraphDisplay) -> Self {
+        self.alter_display(display);
+        self
+    }
+
+    pub fn with_id(mut self, id: &str) -> Self {
+        self.alter_id(id);
+        self
+    }
+
+    pub fn with_classes(mut self, classes: &str, op: ClassesOp) -> Self {
+        self.alter_classes(classes, op);
+        self
+    }
+
+    pub fn using_template(mut self, template: &str) -> Self {
+        self.alter_template(template);
+        self
+    }
+
+    // Paragraph ALTER.
+
+    pub fn alter_renderable(&mut self, renderable: fn() -> bool) -> &mut Self {
+        self.renderable = renderable;
+        self
+    }
+
+    pub fn alter_weight(&mut self, weight: isize) -> &mut Self {
+        self.weight = weight;
+        self
+    }
+
+    pub fn alter_html(&mut self, html: Markup) -> &mut Self {
+        self.html = html;
+        self
+    }
+
+    pub fn alter_display(&mut self, display: ParagraphDisplay) -> &mut Self {
+        self.display = display;
+        self.classes.alter(
+            match &self.display() {
+                ParagraphDisplay::XxLarge    => "fs-1",
+                ParagraphDisplay::Large      => "fs-2",
+                ParagraphDisplay::MediumPlus => "fs-3",
+                ParagraphDisplay::Normal     => "",
+                ParagraphDisplay::Medium     => "fs-4",
+                ParagraphDisplay::Small      => "fs-5",
+                ParagraphDisplay::XxSmall    => "fs-6",
+            },
+            ClassesOp::SetDefault
+        );
+        self
+    }
+
+    pub fn alter_id(&mut self, id: &str) -> &mut Self {
+        self.id.with_value(id);
+        self
+    }
+
+    pub fn alter_classes(&mut self, classes: &str, op: ClassesOp) -> &mut Self {
+        self.classes.alter(classes, op);
+        self
+    }
+
+    pub fn alter_template(&mut self, template: &str) -> &mut Self {
+        self.template = template.to_owned();
+        self
+    }
+
+    // Paragraph GETTERS.
+
+    pub fn html(&self) -> &Markup {
+        &self.html
+    }
+
+    pub fn display(&self) -> &ParagraphDisplay {
+        &self.display
+    }
+
+    pub fn id(&self) -> &Option<String> {
+        self.id.option()
+    }
+
+    pub fn classes(&self) -> &Option<String> {
+        self.classes.option()
+    }
+
+    pub fn template(&self) -> &str {
+        self.template.as_str()
+    }
+}
diff --git a/pagetop/src/base/module/demopage/mod.rs b/pagetop/src/base/module/demopage/mod.rs
index 34fb8ba1..41c398c0 100644
--- a/pagetop/src/base/module/demopage/mod.rs
+++ b/pagetop/src/base/module/demopage/mod.rs
@@ -41,22 +41,24 @@ fn hello_world() -> Container {
         .add(grid::Row::new()
             .add_column(grid::Column::new()
                 .add(Chunck::with(html! {
-                    div class="section-title" {
+                    div class="area-title" {
                         (t("welcome_to", &args![
                             "app" => SETTINGS.app.name.as_str()
                         ]))
                     }
-                    h1 class="h1-large" {
-                        (l("page_title"))
-                    }
-                    p class="p-large" {
-                        (e("welcome_intro", &args![
-                            "app" => format!(
-                                "<strong>{}</strong>",
-                                &SETTINGS.app.name
-                            )
-                        ]))
-                    }
+                }))
+                .add(Heading::with(HeadingType::H1(
+                    l("page_title"))
+                ).with_display(HeadingDisplay::Large))
+                .add(Paragraph::with(html! {
+                    (e("welcome_intro", &args![
+                        "app" => format!(
+                            "<strong>{}</strong>",
+                            &SETTINGS.app.name
+                        )
+                    ]))
+                }).with_display(ParagraphDisplay::Large))
+                .add(Chunck::with(html! {
                     p {
                         (e("welcome_pagetop", &args![
                             "pagetop" => "<a href=\"https://pagetop-rs\">PageTop</a>"
diff --git a/pagetop/src/base/theme/bulmix/mod.rs b/pagetop/src/base/theme/bulmix/mod.rs
index e047b214..7bdb0890 100644
--- a/pagetop/src/base/theme/bulmix/mod.rs
+++ b/pagetop/src/base/theme/bulmix/mod.rs
@@ -36,6 +36,35 @@ impl ThemeTrait for Bulmix {
         _assets: &mut Assets
     ) {
         match component.handler() {
+            HEADING_COMPONENT => {
+                let h = component_mut::<Heading>(component);
+                h.alter_classes(
+                    concat_string!("title ", match h.display() {
+                        HeadingDisplay::XxLarge    => "is-1",
+                        HeadingDisplay::Large      => "is-2",
+                        HeadingDisplay::Normal     => "",
+                        HeadingDisplay::Medium     => "is-3",
+                        HeadingDisplay::Small      => "is-4",
+                        HeadingDisplay::XxSmall    => "is-5",
+                    }).as_str(),
+                    ClassesOp::SetDefault
+                );
+            },
+            PARAGRAPH_COMPONENT => {
+                let p = component_mut::<Paragraph>(component);
+                p.alter_classes(
+                    match p.display() {
+                        ParagraphDisplay::XxLarge    => "is-size-2",
+                        ParagraphDisplay::Large      => "is-size-3",
+                        ParagraphDisplay::MediumPlus => "is-size-4",
+                        ParagraphDisplay::Normal     => "",
+                        ParagraphDisplay::Medium     => "is-size-5",
+                        ParagraphDisplay::Small      => "is-size-6",
+                        ParagraphDisplay::XxSmall    => "is-size-7",
+                    },
+                    ClassesOp::SetDefault
+                );
+            },
             grid::ROW_COMPONENT => {
                 let row = component_mut::<grid::Row>(component);
                 row.alter_classes("columns", ClassesOp::SetDefault);