MIUN - Design Library

LinkTable 

<div class="block link-table enablevue">
    <div class="block-header-table">
        <h3 class="heading-level-3">
            Fristående kurser i datateknik
        </h3>
    </div>
    <div class="link-table-container table-responsive">
        <table>
            <thead>
                <tr>
                    <th>Program</th>
                    <th>Anmälningskod</th>
                    <th>Programkod</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href='https://www.google.com'>Automationsingenjör</a></td>
                    <td>D2151</td>
                    <td>TAUMG</td>
                </tr>
                <tr>
                    <td><a href='https://www.google.com'>Automationsingenjör</a></td>
                    <td>D2151</td>
                    <td>TAUMG</td>
                </tr>
                <tr>
                    <td><a href='https://www.google.com'>Automationsingenjör</a></td>
                    <td>D2151</td>
                    <td>TAUMG</td>
                </tr>
                <tr>
                    <td><a href='https://www.google.com'>Automationsingenjör</a></td>
                    <td>D2151</td>
                    <td><a href='/enlank'>Länken</a></td>
                </tr>
                <tr>
                    <td><a href='https://www.google.com'>Automationsingenjör</a></td>
                    <td>
                        <periodbar height="50" duration="10" start="10"></periodbar>
                    </td>
                    <td>
                        <cartbuttoncomponent text="cartButton" id="" type="" code=""></cartbuttoncomponent>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
 
<div class="block link-table enablevue">
	{{#if title}}
		<div class="block-header-table">
			<h3 class="heading-level-3">
				{{#if title.url}}
					<a href='{{title.url}}'>{{ title.text }}</a>
				{{else}}
					{{title}}
				{{/if}}
			</h3>
		</div>
	{{/if}}
	<div class="link-table-container table-responsive">
		<table>
			<thead>
				<tr>
					{{#each headers}}
						<th>{{ this }}</th>
					{{/each}}
				</tr>
			</thead>
			<tbody>
				{{#each table}}
					<tr>
						{{#each cells}}
							{{#if @first}}
								<td><a href='{{ ../this.url }}'>{{ this }}</a></td>
							{{else}}
								{{#if url}}
									<td><a href='{{ url }}'>{{ text }}</a></td>
								{{else}}
									{{#if cartButton}} 
										<td>{{render '@cartbutton' cartButton}}</td>
									{{else}}
										{{#if periodBar}}
											<td>{{render '@periodbar' periodBar}}</td>
										{{else}}
											<td>{{ this }}</td>
										{{/if}}
									{{/if}}
								{{/if}}
							{{/if}}
						{{/each}}
					</tr>
				{{/each}}
			</tbody>
		</table>
	</div>
</div>
 
{
  "epiDivClass": "col-md-12",
  "title": "Fristående kurser i datateknik",
  "headers": [
    "Program",
    "Anmälningskod",
    "Programkod"
  ],
  "table": [
    {
      "cells": [
        "Automationsingenjör",
        "D2151",
        "TAUMG"
      ],
      "url": "https://www.google.com"
    },
    {
      "cells": [
        "Automationsingenjör",
        "D2151",
        "TAUMG"
      ],
      "url": "https://www.google.com"
    },
    {
      "cells": [
        "Automationsingenjör",
        "D2151",
        "TAUMG"
      ],
      "url": "https://www.google.com"
    },
    {
      "cells": [
        "Automationsingenjör",
        "D2151",
        {
          "url": "/enlank",
          "text": "Länken"
        }
      ],
      "url": "https://www.google.com"
    },
    {
      "cells": [
        "Automationsingenjör",
        {
          "periodBar": {
            "height": 50,
            "duration": 10,
            "start": 10
          }
        },
        {
          "cartButton": {
            "text": "cartButton"
          }
        }
      ],
      "url": "https://www.google.com"
    }
  ]
}
  • Content: 
    .link-table {
    .link-table-container {
        overflow-x: auto;
    }
    margin-bottom: $md-space;

    table {
        width: 100%;
    }

    table td, table th {
        padding: 1em .5em;

        @include media-breakpoint-down(sm) {
            padding: .5em .3em;
            font-size: .9em;

            a {
                font-size: 1em;
            }
        }
    }

    table thead tr {
        background-color: $light-blue;
    }

    table thead th {
        padding: .5em;

        @include media-breakpoint-down(sm) {
            padding: .3em;
        }
    }

    table tbody tr {
        border-bottom: 1px solid $grey-border;
    }

    table td:first-child, table th:first-child {
        @include media-breakpoint-down(sm) {
            padding-left: .5em;
        }
    }
}
  • URL: /components/raw/linktable/LinkTable.scss
  • Filesystem Path: src\components\01-global_components\LinkTable\LinkTable.scss
  • Size: 847 Bytes

There are no notes for this item.