# Topic box

A custom directive that creates graphical boxes (cards) on the root `index.rst` file.

#### WARNING
Do not use the `topic-box` on subordinate `index.rst` files.

## Syntax

```rst
.. topic-box::
   <options>

   <text>
```

## Options

The `topic-box` directive supports the following options:

| Option   | Type   | Required                                                  | Example Value                              | Description                                                                                                                                                                                 |
|----------|--------|-----------------------------------------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `title`  | string | <i class="inline-icon icon-check" aria-hidden="true"></i> | Lorem ipsum                                | Topic box title.                                                                                                                                                                            |
| `class`  | string |                                                           |                                            | Custom CSS class.                                                                                                                                                                           |
| `icon`   | string |                                                           | fa fa-home                                 | A list of CSS classes to render icons, separated by comma or space.                                                                                                                         |
| `image`  | string |                                                           | /_static/img/mascots/scylla-enterprise.svg | Path to the image. The image should be located in the project’s `_static` folder.                                                                                                           |
| `link`   | string |                                                           | getting-started                            | Relative link or external URL for the call to action. Do not use leading and trailing (“/”) symbols to define relative links. (e.g. instead of `/getting-started/`, use `getting-started`). |
| `anchor` | string |                                                           | Getting Started >                          | Text for the call to action.                                                                                                                                                                |

## Usage

### Topic with icon

Using:

```rst
.. topic-box::
    :title: Lorem Ipsum
    :icon: fa fa-github
    :link: #
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

Results in:


            
                <div class="cell topic-box ">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon">
                <i class="fa fa-github"></i>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
                <div class="topic-box_\_anchor">Lorem ipsum</div>
                
            </div>
            </a></div>
            
### Topic with image

Using:

```rst
.. topic-box::
    :title: Lorem Ipsum
    :image: /_static/img/mascots/scylla-enterprise.svg
    :link: #
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

Results in:


            
                <div class="cell topic-box ">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
                <div class="topic-box_\_anchor">Lorem ipsum</div>
                
            </div>
            </a></div>
            
### Topic with external link

Using:

```rst
.. topic-box::
    :title: Lorem Ipsum
    :link: https://scylladb.com
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

Results in:


            
                <div class="cell topic-box ">
                    <a class="card" href="https://scylladb.com" target="_blank">
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
                <div class="topic-box_\_anchor">Lorem ipsum
                 <i class="icon-newtab" aria-hidden="true"></i>
                </div>
                
            </div>
            </a></div>
            
### Topic with horizontal scroll (mobile)

Using:

```default
.. raw:: html

    <div class="topics-grid topics-grid--scrollable grid-container full">

    <div class="grid-x grid-margin-x hs">

.. topic-box::
    :title: Lorem ipsum
    :link: scylla-cloud
    :class: large-4
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem ipsum
    :link: scylla-cloud
    :class: large-4
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem ipsum
    :link: scylla-cloud
    :class: large-4
    :anchor: Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. raw:: html

    </div></div>
```

Results in:

<div class="topics-grid topics-grid--scrollable grid-container full">

<div class="grid-x grid-margin-x hs">
            
                <div class="cell topic-box large-4">
                    <a class="card" href="examples/scylla-cloud.html" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Lorem ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
                <div class="topic-box_\_anchor">Lorem ipsum</div>
                
            </div>
            </a></div>
            
            
                <div class="cell topic-box large-4">
                    <a class="card" href="examples/scylla-cloud.html" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Lorem ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
                <div class="topic-box_\_anchor">Lorem ipsum</div>
                
            </div>
            </a></div>
            
            
                <div class="cell topic-box large-4">
                    <a class="card" href="examples/scylla-cloud.html" >
                
                <div class="topic-box_\_head">
                
                <h3 class="topic-box_\_title">Lorem ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
                <div class="topic-box_\_anchor">Lorem ipsum</div>
                
            </div>
            </a></div>
            </div></div>

### Product topic

Using:

```rst
.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

Results in:


            
                <div class="cell topic-box topic-box--product">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
### Topic grid

Create powerful, multi-device, topic box grids using Foundation’s 12-column grid system.
To make the columns wider or smaller, you can use the option `:class:`.
For example, `:class: large-3` means that the topic box will take 3 out of 12 columns in desktop devices.

For more information, see [The Grid System](https://get.foundation/sites/docs/grid.html).

Using:

```rst
.. raw:: html

    <div class="topics-grid topics-grid--products">

        <h2 class="topics-grid__title">Lorem Ipsum</h2>
        <p class="topics-grid__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <div class="grid-container full">
            <div class="grid-x grid-margin-x">

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. topic-box::
    :title: Lorem Ipsum
    :link: #
    :image: /_static/img/mascots/scylla-enterprise.svg
    :class: topic-box--product,large-3,small-6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.. raw:: html

    </div></div></div>
```

Results in:

<div class="topics-grid topics-grid--products">

    <h2 class="topics-grid_\_title">Lorem Ipsum</h2>
    <p class="topics-grid_\_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <div class="grid-container full">
        <div class="grid-x grid-margin-x">
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            
            
                <div class="cell topic-box topic-box--product large-3 small-6">
                    <a class="card" href="#" >
                
                <div class="topic-box_\_head">
                
            <div class="topic-box_\_icon"">
                <img src="/_static/img/mascots/scylla-enterprise.svg"/>
            </div>
            
                <h3 class="topic-box_\_title">Lorem Ipsum</h3>
                </div>
                <div class="topic-box_\_body">
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


            
            </div>
            </a></div>
            </div></div></div>