Card: Variant: Sections

WIP

Notes
HTML
View
Assets
Info

No notes defined.


        
        <div class="card">
    <div class="card__flag">
        SW305
    </div>

    <div class="card__flex">
        <div class="card__content">
            <h3 class="h5 card__title">
                Theories and Practices for Community Action and Social Change
            </h3>

            <div class="card__section">
                <h4 class="h6  card__sectionTitle">U-M Class #12341 | Section 001</h4>

                <div class="card__flex">
                    <div class="card__meta">

                        <dl class="meta  meta--columns">
                            <div class="meta__item">
                                <dt class="meta__title">Instructor:</dt>
                                <dd class="meta__desc">Anne Placeholder-Name</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <dd class="meta__desc">Residential</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Time:</dt>
                                <dd class="meta__desc">Tuesday / Thursday, 10:00AM - 11:30AM</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Location:</dt>
                                <dd class="meta__desc">Potentially nontrivial amount of words,<br />Maybe over<br />Multiple lines?</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Codes:</dt>
                                <dd class="meta__desc">J X</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Credit Hours:</dt>
                                <dd class="meta__desc">3</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <div class="meta__desc">
                                    <dd>Full time</dd>
                                    <dd>Part time</dd>
                                    <dd>Foundation Year</dd>
                                    <dd>Placement Year</dd>
                                </div>
                            </div>
                        </dl>
                    </div>

                    <div class="card__actions">
                        <a href="#" class="button  button--sm">View Course</a>
                        <a href="#" class="button  button--sm  button--outline-secondary">Syllabus</a>
                        <button class="button  button--sm  button--outline-secondary">Favourite</button>
                    </div>
                </div>
            </div>
            <div class="card__section">
                <h4 class="h6  card__sectionTitle">U-M Class #12342 | Section 002</h4>

                <div class="card__flex">
                    <div class="card__meta">

                        <dl class="meta  meta--columns">
                            <div class="meta__item">
                                <dt class="meta__title">Instructor:</dt>
                                <dd class="meta__desc">Anne Placeholder-Name</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <dd class="meta__desc">Residential</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Time:</dt>
                                <dd class="meta__desc">Tuesday / Thursday, 10:00AM - 11:30AM</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Location:</dt>
                                <dd class="meta__desc">Potentially nontrivial amount of words,<br />Maybe over<br />Multiple lines?</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Codes:</dt>
                                <dd class="meta__desc">J X</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Credit Hours:</dt>
                                <dd class="meta__desc">3</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <div class="meta__desc">
                                    <dd>Full time</dd>
                                    <dd>Part time</dd>
                                    <dd>Foundation Year</dd>
                                    <dd>Placement Year</dd>
                                </div>
                            </div>
                        </dl>
                    </div>

                    <div class="card__actions">
                        <a href="#" class="button  button--sm">View Course</a>
                        <a href="#" class="button  button--sm  button--outline-secondary">Syllabus</a>
                        <button class="button  button--sm  button--outline-secondary">Favourite</button>
                    </div>
                </div>
            </div>
            <div class="card__section">
                <h4 class="h6  card__sectionTitle">U-M Class #12343 | Section 003</h4>

                <div class="card__flex">
                    <div class="card__meta">

                        <dl class="meta  meta--columns">
                            <div class="meta__item">
                                <dt class="meta__title">Instructor:</dt>
                                <dd class="meta__desc">Anne Placeholder-Name</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <dd class="meta__desc">Residential</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Time:</dt>
                                <dd class="meta__desc">Tuesday / Thursday, 10:00AM - 11:30AM</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Location:</dt>
                                <dd class="meta__desc">Potentially nontrivial amount of words,<br />Maybe over<br />Multiple lines?</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Codes:</dt>
                                <dd class="meta__desc">J X</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Credit Hours:</dt>
                                <dd class="meta__desc">3</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <div class="meta__desc">
                                    <dd>Full time</dd>
                                    <dd>Part time</dd>
                                    <dd>Foundation Year</dd>
                                    <dd>Placement Year</dd>
                                </div>
                            </div>
                        </dl>
                    </div>

                    <div class="card__actions">
                        <a href="#" class="button  button--sm">View Course</a>
                        <a href="#" class="button  button--sm  button--outline-secondary">Syllabus</a>
                        <button class="button  button--sm  button--outline-secondary">Favourite</button>
                    </div>
                </div>
            </div>
            <div class="card__section">
                <h4 class="h6  card__sectionTitle">U-M Class #12344 | Section 004</h4>

                <div class="card__flex">
                    <div class="card__meta">

                        <dl class="meta  meta--columns">
                            <div class="meta__item">
                                <dt class="meta__title">Instructor:</dt>
                                <dd class="meta__desc">Anne Placeholder-Name</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <dd class="meta__desc">Residential</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Time:</dt>
                                <dd class="meta__desc">Tuesday / Thursday, 10:00AM - 11:30AM</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Location:</dt>
                                <dd class="meta__desc">Potentially nontrivial amount of words,<br />Maybe over<br />Multiple lines?</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Codes:</dt>
                                <dd class="meta__desc">J X</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Credit Hours:</dt>
                                <dd class="meta__desc">3</dd>
                            </div>

                            <div class="meta__item">
                                <dt class="meta__title">Program Type:</dt>
                                <div class="meta__desc">
                                    <dd>Full time</dd>
                                    <dd>Part time</dd>
                                    <dd>Foundation Year</dd>
                                    <dd>Placement Year</dd>
                                </div>
                            </div>
                        </dl>
                    </div>

                    <div class="card__actions">
                        <a href="#" class="button  button--sm">View Course</a>
                        <a href="#" class="button  button--sm  button--outline-secondary">Syllabus</a>
                        <button class="button  button--sm  button--outline-secondary">Favourite</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        {% set titleElement = titleElement ?: 'h3' %}

<div class="card">
	<div class="card__flag">
		SW305
	</div>

	<div class="card__flex">
		<div class="card__content">
			<{{ titleElement }} class="h5 card__title">
			{% if link %}
				<a href="" class="pointyLink  link--stretched-before">
			{% endif %}
			{{ title ?: random([placeholderTitle, placeholderTitle2, placeholderTitle3, placeholderTitle4]) }}
			{% if link %}
				</a>
			{% endif %}
		  </{{ titleElement }}>

			{% if description %}
				<div class="card__description">
					{{ description }}
				</div>
			{% endif %}

			{% for i in 1..4 %}
				<div class="card__section">
					<h4 class="h6  card__sectionTitle">U-M Class #1234{{ i }} | Section 00{{ i }}</h4>

					<div class="card__flex">
						<div class="card__meta">
{#							{% include '@meta--columns' %}#}

							<dl class="meta  meta--columns">
								<div class="meta__item">
									<dt class="meta__title">Instructor:</dt>
									<dd class="meta__desc">Anne Placeholder-Name</dd>
								</div>

								<div class="meta__item">
									<dt class="meta__title">Program Type:</dt>
									<dd class="meta__desc">Residential</dd>
								</div>

								<div class="meta__item">
									<dt class="meta__title">Time:</dt>
									<dd class="meta__desc">Tuesday / Thursday, 10:00AM - 11:30AM</dd>
								</div>

								<div class="meta__item">
									<dt class="meta__title">Location:</dt>
									<dd class="meta__desc">Potentially nontrivial amount of words,<br/>Maybe over<br/>Multiple lines?</dd>
								</div>

								<div class="meta__item">
									<dt class="meta__title">Codes:</dt>
									<dd class="meta__desc">J X</dd>
								</div>

								<div class="meta__item">
									<dt class="meta__title">Credit Hours:</dt>
									<dd class="meta__desc">3</dd>
								</div>

								<div class="meta__item">
									<dt class="meta__title">Program Type:</dt>
									<div class="meta__desc">
										<dd>Full time</dd>
										<dd>Part time</dd>
										<dd>Foundation Year</dd>
										<dd>Placement Year</dd>
									</div>
								</div>
							</dl>
						</div>

						<div class="card__actions">
							<a href="#" class="button  button--sm">View Course</a>
							<a href="#" class="button  button--sm  button--outline-secondary">Syllabus</a>
							<button class="button  button--sm  button--outline-secondary">Favourite</button>
						</div>
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
</div>

File:

Content:


                                .card {
	$card__internal-spacing: $spacing-xs;
	$card__internal-padding: calc($spacing-2xs + $spacing-multiplier);
	--accent: #{$secondary};
	--accent-contrast: #{choose-contrast-color-prefer-white($secondary)};

	position: relative;
	margin-bottom: $spacing-xl;
	@include typescale('sm');
	border-left: $border-accent-width solid;
	border-image:
		linear-gradient(
				to bottom,
				var(--accent) 50%,
				rgba(white, 0)
		) 1 100%;

	&__flag {
		display: inline-block;
		margin-bottom: calc($spacing-2xs + math.div($spacing-multiplier, 4));
		background: var(--accent);
		color: var(--accent-contrast);
		padding: $spacing-4xs $spacing-sm $spacing-4xs $card__internal-padding;

		> * {
			margin: 0;
		}
	}

	&__flex {
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		column-gap: $spacing-sm;
		padding-top: calc($spacing-2xs + math.div($spacing-multiplier, 4));
	}

	&__figure {
		flex: 3 99 17.5%;
		margin: 0 0 $card__internal-padding;
		padding: 0 0 0 $card__internal-padding;

		img {
			border-bottom-right-radius: $border-radius-lg;
			aspect-ratio: 2 / 1;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		&--uncropped {
			img {
				width: auto;
				height: auto;
				max-height: 90vh;
				margin-left: auto;
				margin-right: auto;
				aspect-ratio: auto;
			}
		}

		&--shadow {
			img {
				box-shadow: 0 0 $border-accent-width rgba($grey--borders, 0.75);
			}
		}

		&--icon {
			.card__figureFrame {
				padding: calc(5% + #{$spacing-lg}) 5%;
				border-bottom-right-radius: $border-radius-lg;
			}
		}
	}

	&__figureFrame {
		background: linear-gradient(to bottom, $offwhite, rgba(white, 0));
		padding: 5%;
		box-sizing: border-box;
		text-align: center;

		img, svg {
			max-width: 100%;
			box-sizing: border-box;
			margin: auto;
		}

		.icon {
			font-size: 5em;

			svg, path {
				fill: var(--svg-fill, $neutral--primary);
			}
		}

		&--primary {
			--svg-fill: white;
			background: linear-gradient(to bottom, $primary, lighten($primary, 15%));
		}

		&--secondary {
			--svg-fill: white;
			background: linear-gradient(to bottom, $secondary, lighten($secondary, 15%));
		}

		&--tertiary {
			--svg-fill: white;
			background: linear-gradient(to bottom, $tertiary, lighten($tertiary, 15%));
		}

		&--neutral {
			--svg-fill: white;
			background: linear-gradient(to bottom, $neutral--primary, lighten($neutral--primary, 15%));
		}
	}

	&__img {
		&--bordered {
			border: $border-accent-width solid $offwhite;
		}

		&--no-radius {
			border-radius: 0 !important;
		}
	}

	&__imageGrid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2.5%;
		aspect-ratio: 2 / 1;

		img {
			aspect-ratio: auto;
			width: auto;
			height: auto;
		}
	}

	&__imgPlaceholder {
		background: $offwhite;
		border-bottom-right-radius: $border-radius-lg;
	}

	&__videoShort {
		@include video-container('portrait');
		border-bottom-right-radius: $border-radius-lg;
	}

	&__icon {
		flex: 1 99 1em;
		margin: 0 0 $card__internal-padding;
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		justify-content: center;
		text-align: center;

		.icon {
			font-size: 1.5em;
			background: $neutral--primary;
			border-radius: 100%;
			padding: 0.35em;

			svg, path {
				fill: var(--svg-fill, white);
			}

			&--bg-primary {
				background: $primary;
			}

			&--bg-secondary {
				background: $secondary;
			}

			&--bg-tertiary {
				background: $tertiary;
			}
		}
	}

	&__content {
		flex: 99 1 30rem;
		padding: 0 $card__internal-padding $card__internal-padding;
	}

	&__title {
		margin: 0 0 $card__internal-spacing;
		font-weight: bold;

		&--light {
			font-weight: normal;
		}
	}

	&__description,
	:where(p) {
		margin-bottom: $card__internal-spacing;
	}

	&__quote {
		margin: 0 0 $spacing-md;
		@include typescale('md');
	}

	&__section {
		.card__flex {
			flex-direction: row;
			column-gap: $grid-gutter-large;
		}

		&Title {
			margin: $spacing-lg 0 $spacing-sm;
			padding: $spacing-xs 0;
			border-top: 1px solid $grey--borders;
			border-bottom: 1px solid $grey--borders;
			border-image:
				linear-gradient(
						to right,
						#{$grey--borders},
						rgba(white, 0)
				) 1;
		}
	}

	&__meta {
		flex: 99 1 30rem;
		align-self: flex-start;
		margin-top: $spacing-sm;
		margin-bottom: $card__internal-spacing;
		@include typescale('xs');
		color: var(--text-color, $grey--mid-dark);

		a {
			color: $grey--mid-dark;
		}

		> *:where(p, ul, dl) {
			margin-bottom: $spacing-sm;
		}

		> *:last-child {
			margin-bottom: 0;
		}
	}

	&__actions {
		flex: 1 1 10rem;
		margin-top: $spacing-md;
	}

	.pointyLink {
		color: var(--text-color, black);

		&:hover,
		&:focus {
			color: var(--link-hover-color, $tertiary);
		}
	}

	[class*='link--stretched'] {
		&:focus {
			outline: none;

			&::before {
				outline: 0.15em solid rgba($grey, 0.75);
				outline-offset: $card__internal-spacing;
			}
		}
	}

	a:where(:not([class*='link--stretched']):not([class*='button'])) {
		position: relative;
		z-index: 1;
		color: var(--text-color, auto);
	}

	// Layout Variants

	&--has-small-figure {
		.card__content {
			flex: 10 1 18rem;
		}

		.card__figure {
			flex: 3 99 30%;
		}
	}

	&--has-small-content {
		.card__content {
			flex: 5 1 10rem;
		}

		.card__figure {
			flex: 3 99 30%;
		}
	}

	&--publication {
		> .card__flex {
			flex-direction: row;
			column-gap: $card__internal-spacing;
		}

		//.card__content {
		//	flex: 99 1 18rem;
		//}
	}

	// Theme Variants

	&--tertiary {
		--accent: #{$tertiary};
		--accent-contrast: #{choose-contrast-color-prefer-white($tertiary)};
	}

	&--bg-gradient-grey {
		border-color: transparent;
		border-image: none;
		background: linear-gradient(to bottom, $grey--lightest, transparent);
		padding-top: $spacing-xs;

		.card__flag {
			display: block;
			width: fit-content;
			margin-top: -#{$spacing-xs};
			margin-left: -#{$border-accent-width};
			padding-left: calc($spacing-xs + $spacing-multiplier);
		}
	}
}

URL: /components/raw/card/_card.scss
Filesystem Path: web/themes/custom/um-ssw/components/card/_card.scss
Size: 6 KB

Handle: @card--sections
Variants (19): Default , Variant: Multi-Image , Variant: No Flag , Variant: Simple , Variant: Simple w/ Meta , Variant: Sections , Variant: Testimonial , Variant: Publication , Variant: Newsletter Publication , Variant: Video Short , Variant: Person w/ Meta (Tertiary) , Theme: Tertiary , Variant: Icon , Variant: Large Icon , Background: Grey Gradient , Demo: Grid , Demo: People Grid , Demo: Shorts Grid , Demo: Icon Variants
Preview:
- With layout
- Component only
Filesystem Path: web/themes/custom/um-ssw/components/card/card--sections.twig
References (1): @meta--columns