Info Sections

The information areas are a simple way to organise large amounts of information into chunks. You can also add icons, simple or coloured. For an horizontal alignment use the direction prop. For the title, please use the title prop or the default slot You can see more illustrative examples below:

Free Chat

Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.

<template>
<info-section class="info-hover"
              direction="vertical"
              type="primary"
              icon="now-ui-icons ui-2_chat-round">
    <h4 class="info-title">Free Chat</h4>
    <p class="description">Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
</info-section>
</template>

Show

Collaborate

The moment you use Now UI Kit PRO, you know you’ve never felt anything like it. With a single use, this powerfull UI Kit lets you do more than ever before. Find more...

<template>
<info-section type="primary"
              icon-classes="icon-circle"
              icon="now-ui-icons location_world">
    <h4 class="info-title">Collaborate</h4>
    <p>The moment you use Now UI Kit PRO, you know you’ve never felt anything like it. With a single use, this powerfull UI Kit lets you do more than ever before.
    <a href="#pablo">Find more...</a>
</info-section>
</template>

Show