MIUN - Design Library

Hero CTA

Error rendering component

Could not render component '@link_block--2-columns' - component not found.

<!-- Error rendering component:  -->
 
<div class="hero">
    <figure class="hero-image-container" style="background-image: url({{this.heroImageUrl}});">
        <img src="{{this.heroImageUrl}}" alt="" class="hero-image sr-only">
    </figure>
    <div class="hero-content-container">
        <div class="container">
            <div class="hero-content">
                <div class="hero-toolbar">
                    <a rel="nofollow" href="{{this.heroToolUrl}}" class="small-font" accesskey="L"
                        title="Lyssna på sidans text med ReadSpeaker" role="button"><span
                            class="fas fa-volume-up small-font"></span>Lyssna</a>
                </div>
                <h1 class="heading-level-1 hero-title">{{this.heroTitle}}</h1>
                <p class="hero-text">{{this.heroText}}</p>
                <div class="hero-cta"><a href="{{this.heroCTAUrl}}" class="button-default">{{this.heroCTAText}}</a>
                </div>
            </div>
            {{render '@link_block--2-columns'}}
        </div>
    </div>
</div>
 
{
  "heroImageUrl": "https://picsum.photos/1440/800",
  "heroToolUrl": "#",
  "heroTitle": "Politiker eller poolskötare?",
  "heroText": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat voluptatum velit ullam nisi, cumque eum deleniti corporis iste quas dolores facere dolore at voluptatibus? Ipsum delectus autem quo iusto eaque?",
  "heroCTALink": "#",
  "heroCTAText": "Tema: Digitalisering"
}
  • Content: 
    .hero {
    background-color: $bg-grey;
    padding-bottom: 50px;

    .hero-image-container {
        height: 200px;
        width: 100%;
        margin: 0;
        background-size: cover;
        background-position: center center;

        @include media-breakpoint-up(sm) {
            height: 300px;
        }

        @include media-breakpoint-up(md) {
            height: 400px;
        }

        @include media-breakpoint-up(lg) {
            height: 600px;
        }
    }

    .hero-content-container {

        .hero-content {
            margin-top: -50px;
            padding-right: 50px;
            padding-bottom: 50px;
            padding-left: 50px;
            background-color: #fff;
            box-shadow: $box-shadow;

            .hero-toolbar {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 50px;

                .fa,
                .fas {
                    margin-right: 10px;
                }

                a {
                    color: $dark-grey;
                }
            }

            .hero-title {
                text-align: center;
                margin-bottom: $sm-space;
            }

            .hero-text {
                margin-bottom: $md-space;
            }

            .hero-cta {
                text-align: center;
            }
        }
    }

    .link-block {
        margin-top: $md-space;
        margin-bottom: 0;
    }
}
  • URL: /components/raw/hero_cta/hero_cta.scss
  • Filesystem Path: src\components\01-global_components\hero_cta\hero_cta.scss
  • Size: 1.6 KB

There are no notes for this item.