<mr-a>

The <mr-a>embeds a hyperlink in the UI of an <mr-panel>.

Example


                    
                        
                        
                            This is a link
                            This is a big purple link
                            This is not a link


                    mr-panel {
                        display: flex;
                        flex-flow: column nowrap;
                        align-items: center;
                        justify-content: center;
                        padding: 10vw;
                        gap: 10px;
                        width: 100vw;
                        height: 100vh;
                        border-radius: unset;
                    }
                    .big-link {
                        font-size: 150%;
                        color: rebeccaPurple;
                    }

Definition and Usage

The <mr-a> tag has two required attribute:

href: the hyperlink destination

Image links

Like it’s HTML equivalent, <mr-a> can be used to wrap other elements, making them clickable links


                    mr-panel {
                      display: flex;
                      flex-flow: column nowrap;
                      align-items: center;
                      justify-content: center;
                      width: 100vw;
                      height: 100vh;
                    }
                    mr-a {
                      height:100vh;
                      width:100vh;
                    }
                    mr-img {
                      max-width: 300px;
                      height:100%;
                      border-radius: 30px;
                    }
                    mr-img.hover {
                      border-radius: 20px;
                    }