gogo

Content-block

component text generic

Definition


The content block is useful to show information in a structured way. It is divided in a header, a body and a footer.
The title is mandatory. The body is also mandatory and allows to include any component or text. The footer is optional and usually is filled with a button, but allows to include any component as well.

c-content-block

Handlebars

Aparthotel Briz beach

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Loading...

The content block component can also display a subtitle. Example as follows:

Handlebars

Content block with a subtitle

This is a nice subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Loading...

Size modifiers


c-content-block > c-content-block--small

The small modifier has smaller title and body font sizes, and is used to display complementary information.

Handlebars

Aparthotel Briz beach

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Loading...

c-content-block > c-content-block--small

Example with no header / footer. Structure not rendered when these components are empty.

Handlebars

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Loading...

c-content-block > c-content-block--large

The large modifier has bigger title and body font sizes, and is used to display more important information that is important to emphasise.

Handlebars

Aparthotel Briz beach

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolore dolorem dolores esse facere fugiat illo in labore laudantium mollitia nulla porro, quae ratione reiciendis similique unde veritatis vitae, voluptatibus.

Loading...