Skip to main content

Hyperlink group

Hyperlink group is used to bundle together related hyperlinks under a single category which appears as the title. Hyperlink groups are best used within other modules such as mosaic or content placement.

Example

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 2 - Title

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 3 - Title

Pattern 7 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 4 - Title

Pattern 7 Item 4 - Subtitle

Hyperlink group with mosaic pattern 7 on a default theme

Best practices

Use the hyperlink group module to show a list of hyperlinks which can be bucketed under a title. The background can be set to follow an accent color as defined by the brand.

Do

  • Restrict each hyperlink to a maximum of 2-3 words. Longer text might cause other links to be pushed off especially in smaller viewports.
  • Follow the color palette of your brand. Use of colors should follow MWF guidelines. Remember, all text is subject to accessibility requirements.
  • Plan for localization. Certain strings may expand in length when translated to other languages.

Don’t

Try to squeeze in more hyperlinks than the list can accommodate.
Use custom colored backgrounds in hyperlink group.

Also known as

Link list
Hyperlink cluster

Related

Hyperlink
Mosaic
Content placement

Development

  • Schema definition: The hyperlink-group schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Hyperlink group in mosaic pattern seven

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 3 - Title

Pattern 7 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 7 Item 4 - Title

Pattern 7 Item 4 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <div data-grid="col-12" class="m-hyperlink-group">
                        <div>
                            <h3 class="c-heading">Navigation Label</h3>
                            <ul class="c-list f-bare">
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 2 - Title</h3>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 7 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 7 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 7 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

Hyperlink group in mosaic pattern nine

Placeholder with grey background and dimension watermark without any imagery

Pattern 9 Item 2 - Title

Pattern 9 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 9 Item 3 - Title

Pattern 9 Item 3 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <div data-grid="col-12" class="m-hyperlink-group">
                        <div>
                            <h3 class="c-heading">Navigation Label</h3>
                            <ul class="c-list f-bare">
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 9 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 9 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
            <section class="c-mosaic-placement f-background-neutral-75">
                <picture>
                    <source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
                    <source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
                    <source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
                    <source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
                    <source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
                    <source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
                    <img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                </picture>
                <div>
                    <h3 class="c-heading">Pattern 9 Item 3 - Title</h3>
                    <p class="c-subheading">Pattern 9 Item 3 - Subtitle</p>
                    <div>
                        <a href="#" class="c-call-to-action c-glyph">
                            <span>CALL TO ACTION</span>
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Hyperlink group in mosaic pattern ten

Placeholder with grey background and dimension watermark without any imagery

Pattern 10 Item 2 - Title

Pattern 10 Item 2 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 10 Item 3 - Title

Pattern 10 Item 3 - Subtitle

Placeholder with grey background and dimension watermark without any imagery

Pattern 10 Item 4 - Title

Pattern 10 Item 4 - Subtitle

<div class="m-mosaic">
    <div class="c-mosaic">
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <div data-grid="col-12" class="m-hyperlink-group">
                        <div>
                            <h3 class="c-heading">Navigation Label</h3>
                            <ul class="c-list f-bare">
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                                <li>
                                    <a href="#" class="c-hyperlink">Hyperlink</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-80">
                    <picture>
                        <source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 10 Item 2 - Title</h3>
                        <p class="c-subheading">Pattern 10 Item 2 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div data-f-mosaic="f-vp1-whole f-vp4-half">
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-75">
                    <picture>
                        <source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 10 Item 3 - Title</h3>
                        <p class="c-subheading">Pattern 10 Item 3 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
            <div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
                <section class="c-mosaic-placement f-background-neutral-65">
                    <picture>
                        <source srcset="http://placehold.it/425x425/5E5E5E" media="(min-width:1779px)">
                        <source srcset="http://placehold.it/400x400/5E5E5E" media="(min-width:1400px)">
                        <source srcset="http://placehold.it/350x400/5E5E5E" media="(min-width:1084px)">
                        <source srcset="http://placehold.it/542x400/5E5E5E" media="(min-width:768px)">
                        <source srcset="http://placehold.it/384x400/5E5E5E" media="(min-width:540px)">
                        <source srcset="http://placehold.it/540x300/5E5E5E" media="(min-width:0)">
                        <img srcset="http://placehold.it/540x300/5E5E5E" src="http://placehold.it/540x300/5E5E5E" alt="Placeholder with grey background and dimension watermark without any imagery">
                    </picture>
                    <div>
                        <h3 class="c-heading">Pattern 10 Item 4 - Title</h3>
                        <p class="c-subheading">Pattern 10 Item 4 - Subtitle</p>
                        <div>
                            <a href="#" class="c-call-to-action c-glyph">
                                <span>CALL TO ACTION</span>
                            </a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>