School of Social Work

Table: With Icons

No notes defined.

<div class="overflow-x" style="">
    <table class="table--responsive-titles">
        <thead>
            <tr>
                <th>Placeholder Title</th>
                <th>Column Two Title</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 001</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2020
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 002</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2021
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 003</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2022
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 004</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2023
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 005</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2024
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 006</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2025
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 007</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2026
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 008</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2027
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
            <tr>
                <td data-title="Placeholder Title">
                    <a href="" class="link--plain">
                        <i class="icon  icon--margin-after" aria-label="(PDF)"><img src="../../img/icon-pdf.png" alt="" /></i>
                        Research item index 009</a>
                </td>
                <td data-title="Column Two Title">
                    <a href="" class="link--plain">
                        Social Work Annual Calendar 2028
                        <i class="icon  icon--margin-before"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13.5488 2.78125H9.02133V0.28125H17.7713V9.03125H15.2713V4.59375L9.12883 10.7362L7.36133 8.96875L13.5488 2.78125Z" fill="#FFCB05" />
                                <path d="M7.72656 2.71875H0.226562V17.7188H15.2266V10.2188H12.7266V15.2188H2.72656V5.21875H7.72656V2.71875Z" fill="#FFCB05" />
                            </svg>
                        </i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="overflow-x" style="">
	<table class="table--responsive-titles">
		<thead>
		<tr>
			<th>Placeholder Title</th>
			<th>Column Two Title</th>
		</tr>
		</thead>

		<tbody>
		{% for i in 1..9 %}
			<tr>
				<td data-title="Placeholder Title">
					<a href="" class="link--plain">
						<i class="icon  icon--margin-after" aria-label="(PDF)"><img src="{{ '/img/icon-pdf.png' | path }}" alt=""/></i>
						Research item index 00{{ i }}</a>
				</td>
				<td data-title="Column Two Title">
					<a href="" class="link--plain">
						Social Work Annual Calendar 202{{ i - 1 }}
						<i class="icon  icon--margin-before">{% include '@icon--external' %}</i>
					</a>
				</td>
			</tr>
		{% endfor %}
		</tbody>
	</table>
</div>
  • Content: 
    /*
** See also: '@mixin base-elements' in '__vars/_typography'
** which defines base styles
*/

.overflow-x {
	// see _utils
}

$table-responsive-titles-breakpoint: 40rem;

[class^="table--responsive-titles"] {
	// give a <td> a data-title attribute to display
	// its column heading at small widths

	@media (max-width: $table-responsive-titles-breakpoint) {
		thead, th {
			display: none;
		}

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

		td {
			display: block;
			padding-top: $spacing-xs;
			padding-bottom: $spacing-xs;

			&[data-title]::before {
				content: attr(data-title) ': ';
				font-weight: bold;
				padding-right: 0.35em;
			}

			&:first-child {
				padding-top: $spacing-md;
			}

			&:last-child {
				padding-bottom: $spacing-md;
			}
		}
	}
}

.table--plain {
	tr {
		background: none;
		border: none;
	}

	td {
		padding-top: $spacing-xs;
		padding-bottom: $spacing-xs;
	}
}
  • URL: /components/raw/table/_tables.scss
  • Filesystem Path: web/themes/custom/um-ssw/components/table/_tables.scss
  • Size: 912 Bytes