UHasselt Component Library

Table Block 

<div class="uhasselt-container">
    <div class="table-block">
        <h1 class="heading ">
            The quick brown fox jumps over the lazy dog
        </h1>
        <div class='paragraph '>
            <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
        </div>

        <div class="table-wrapper">
            <div class="table-responsive">
                <table>
                    <tr>
                        <td><a href="www.google.nl">Row 1 Col 1</a></td>
                        <td>Row 1 Col 2</td>
                        <td>Row 1 Col 3</td>
                    </tr>
                    <tr>
                        <td>Row 2 Col 1</td>
                        <td>Row 2 Col 2</td>
                        <td>Row 2 Col 3</td>
                    </tr>
                    <tr>
                        <td>Row 3 Col 1</td>
                        <td>Row 3 Col 2</td>
                        <td>Row 3 Col 3</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="table-wrapper">
            <div class="table-responsive">
                <table>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                    <tr>
                        <td><a href="www.google.nl">Row 1 Col 1</a></td>
                        <td>Row 1 Col 2</td>
                        <td>Row 1 Col 3</td>
                    </tr>
                    <tr>
                        <td>Row 2 Col 1</td>
                        <td>Row 2 Col 2</td>
                        <td>Row 2 Col 3</td>
                    </tr>
                    <tr>
                        <td>Row 3 Col 1</td>
                        <td>Row 3 Col 2</td>
                        <td>Row 3 Col 3</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class='paragraph '>
            <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
        </div>

        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">This is what a link looks like</span>

        </a>

    </div>
</div>
 
<div class="uhasselt-container">
    <div class="table-block">
        {{render '@heading'}}
        {{render '@paragraph'}}
        {{render '@table'}}
        {{render '@table--table-with-header-row'}}
        {{render '@paragraph'}}
        {{render '@link'}}
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .table-block {
    @apply mb-16;

    .heading,
    .table-wrapper,
    .paragraph {
        @apply mb-6;
    }

    a {
        @apply text-red underline;
    }
}
  • URL: /components/raw/table-block/table-block.css
  • Filesystem Path: src\components\04-organisms\table-block\table-block.css
  • Size: 177 Bytes

No notes defined.