<section class="landing-page-links landing-page-links-weave">
<h2 id="this-is-the-heading" class="landing-page-links-heading">This is the heading</h2>
<div class="landing-page-links-inner">
<div class="landing-page-links-items">
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-398.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Applying</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/_56A0980.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Joint honours</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-142.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Example of a long title that wraps</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-292.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Fees and finance</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-390.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Course search</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-398.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Applying</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/_56A0980.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Joint honours</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-142.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Example of a long title that wraps</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-292.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Fees and finance</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
<div class="landing-page-links-item">
<a href="#" class="landing-page-links-item-a">
<img src="../../images/landing-page-links-demo/UG19Prosp-Keyvis-390.jpg" alt="" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">Course search</div>
<div class="landing-page-links-item-text">
<p>Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.</p>
</div>
</div>
</a>
</div>
</div>
<div class="landing-page-links-pattern-background"></div>
</div>
</section>
<section class="landing-page-links{% if pattern %} landing-page-links-{{ pattern }}{% endif %}">
{% if heading %}
<h2 id="{% if id %}{{ id }}{% else %}{{ heading | lower | replace({ ' ' : '-' }) }}{% endif %}" class="landing-page-links-heading">{{ heading }}</h2>
{% endif %}
<div class="landing-page-links-inner">
<div class="landing-page-links-items">
{% for item in items %}
<div class="landing-page-links-item">
<a href="{{ item.href }}" class="landing-page-links-item-a">
<img src="{{ item.path | path }}" alt="{{ item.alt }}" class="landing-page-links-item-img">
<div class="landing-page-links-item-details">
<div class="landing-page-links-item-title h3">{{ item.title }}</div>
<div class="landing-page-links-item-text">
<p>{{ item.text }}</p>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
<div class="landing-page-links-pattern-background"></div>
</div>
</section>
{
"heading": "This is the heading",
"pattern": "weave",
"items": [
{
"title": "Applying",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398,w_600.jpg",
"width": 600
}
]
},
{
"title": "Joint honours",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/_56A0980.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/_56A0980,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/_56A0980,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/_56A0980,w_600.jpg",
"width": 600
}
]
},
{
"title": "Example of a long title that wraps",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142,w_600.jpg",
"width": 600
}
]
},
{
"title": "Fees and finance",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292,w_600.jpg",
"width": 600
}
]
},
{
"title": "Course search",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390,w_600.jpg",
"width": 600
}
]
},
{
"title": "Applying",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-398,w_600.jpg",
"width": 600
}
]
},
{
"title": "Joint honours",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/_56A0980.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/_56A0980,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/_56A0980,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/_56A0980,w_600.jpg",
"width": 600
}
]
},
{
"title": "Example of a long title that wraps",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-142,w_600.jpg",
"width": 600
}
]
},
{
"title": "Fees and finance",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-292,w_600.jpg",
"width": 600
}
]
},
{
"title": "Course search",
"href": "#",
"text": "Use our university course finder to get details of foundation, undergraduate, postgraduate, professional, masters, joint honours and research courses.",
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390.jpg",
"alt": null,
"srcset": [
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390,w_320.jpg",
"width": 320
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390,w_400.jpg",
"width": 400
},
{
"path": "/images/landing-page-links-demo/UG19Prosp-Keyvis-390,w_600.jpg",
"width": 600
}
]
}
]
}
.landing-page-links {
lost-column: 8/8 0;
// start: set default intra-component spacing (units are responsive and based on em values)
@include margin-medium;
@include for-tablet-portrait-up {
@include margin-large;
}
// end: set default intra-component spacing (units are responsive and based on em values)
&-heading {
@include for-largerthan-ipad-portrait {
lost-offset: 1/16;
lost-column: 14/16;
}
@include for-desktop-up {
lost-offset: 3/16;
lost-column: 11/16;
}
}
&-inner {
lost-column: 8/8 0;
position: relative;
}
&-zigzag {
.landing-page-links-pattern-background {
@include pattern-zigzag($light-grey);
}
}
&-diagonal {
.landing-page-links-pattern-background {
@include pattern-diagonal($light-grey);
}
}
&-weave {
.landing-page-links-pattern-background {
@include pattern-weave($light-grey);
}
}
&-pattern-background {
@include full-bleed;
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
@include for-largerthan-ipad-portrait {
margin-left: 0;
margin-right: 0;
}
}
&-items {
display: flex;
flex-wrap: wrap;
lost-utility: clearfix;
position: relative;
z-index: 1;
&:before{
width: 0; //fixes bug in safari at certain browser widths
}
@include for-largerthan-ipad-portrait {
lost-column: 15/16;
}
@include for-desktop-up {
lost-offset: 2/16;
lost-column: 12/16;
}
}
&-item {
lost-column: 4/8 2;
margin-bottom: 10px;
position: relative;
@include for-desktop-up {
&:hover {
.landing-page-links-item-text {
max-height: 220px;
}
}
}
@include for-largerthan-ipad-portrait {
lost-column: 1/3 3;
}
&-a {
display: block;
@include disable-underlines;
}
&-img {
max-width: calc( 100% - 10px );
display: block;
}
&-details {
position: absolute;
bottom: 10px;
right: 0;
left: 10px;
background: $primary-blue;
@include responsive('padding-top', 10px, 14px, $mobile-portrait, $desktop);
@include responsive('padding-bottom', 10px, 14px, $mobile-portrait, $desktop);
@include responsive('padding-left', 10px, 20px, $mobile-portrait, $desktop);
padding-right: 10px;
}
&-title {
color: $white;
margin: 0;
position: relative;
font-size: responsive 16px 24px;
font-range: $mobile-portrait $tablet-portrait;
@include responsive('padding-right', 24px, 28px, $mobile-portrait, $tablet-portrait);
&:after {
@extend %uod-icons;
position: absolute;
right: 0;
bottom: 0;
transform: rotate(-90deg) translateY(-3px) translateX(-3px);
content: $uod-icons-down-arrow;
transform-origin: center center;
}
}
&-text {
overflow: hidden;
max-height: 0;
color: $white;
transition: max-height 0.3s $default-animation-curve;
padding-right: 10px;
> p {
padding-top: 10px;
}
}
}
}
This component provides a way of visually displaying links on landing pages so that website visitors know where they need to go next.