Phoenix Reisen Styleguide
Examples
Default styling
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--horizontal-bordered
A horizontal bordered table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--vertical-bordered
A vertical bordered table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--horizontal-striped
A horizontal striped table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
.table--vertical-striped
A vertical striped table
Column Name Column Name Column Name
Column Content Column Content Column Content
Column Content Column Content Column Content
Column Content Column Content Column Content
Markup
<table class="[modifier class]">
    <thead>
        <tr>
            <th>Column Name</th>
            <th>Column Name</th>
            <th>Column Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
        <tr>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
        <tr>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>
Source: src/components/_table.scss, line 1
Examples
Default styling
Column Name Column Name
Column Content Column Content
.table__row--success
A row that visualizes an success (status)
Column Name Column Name
Column Content Column Content
.table__row--info
A row that visualizes a info
Column Name Column Name
Column Content Column Content
.table__row--warning
A row that visualizes a warning
Column Name Column Name
Column Content Column Content
.table__row--error
A row that visualizes an error (status)
Column Name Column Name
Column Content Column Content
Markup
<table>
    <thead>
        <tr>
            <th>Column Name</th>
            <th>Column Name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="[modifier class]">
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>
Source: src/components/_table.scss, line 77
Examples
Default styling
Column Name Column Name
Column Content Column Content
.table__cell--success
A cell that visualizes an success (status)
Column Name Column Name
Column Content Column Content
.table__cell--info
A cell that visualizes a info
Column Name Column Name
Column Content Column Content
.table__cell--error
A cell that visualizes an error
Column Name Column Name
Column Content Column Content
.table__cell--warning
A cell that visualizes a warning
Column Name Column Name
Column Content Column Content
Markup
<table>
    <thead>
        <tr>
            <th>Column Name</th>
            <th>Column Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="[modifier class]">Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>
Source: src/components/_table.scss, line 151