<div id="" class="LinkBlock flex items-center ba b--neutral-200 hover-b--primary-dark br500 pa400 " style="">
<a class="u-text-weight-semibold" href="https://sproutsocial.com">
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet.
</a>
<span class="icon _before _arrow mt0 c--neutral-1000 f600 pl200"></span>
</div>
<{{#if href}}a href="{{href}}"{{else}}div{{/if}}
id="{{id}}"
class="LinkBlock flex items-center ba b--neutral-200 hover-b--primary-dark br500 pa400 {{modifier}}"
style="{{style}}"
>
{{> @children}}
<span class="icon _before _arrow mt0 c--neutral-1000 f600 pl200"></span>
</{{#if href}}a{{else}}div{{/if}}>
{
"id": null,
"modifier": null,
"style": null,
"href": null,
"children": [
{
"component": "link",
"context": {
"href": "https://sproutsocial.com",
"modifier": "u-text-weight-semibold",
"text": "Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet."
}
}
]
}
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
const LinkBlock = (props) => {
return(
<{props.href ? `a href="${props.href}"` : 'div'}
id={props.id}
className={cx(['LinkBlock', 'flex', 'items-center', 'ba' ,'b--neutral-200', 'hover-b--primary-dark' ,'br500', 'pa400', props.modifier])}
>
{props.children}
<span class="icon _before _arrow mt0 c--neutral-1000 f600 pl200"></span>
</{props.href ? 'a' : 'div'}>
);
};
LinkBlock.propTypes = {
id: PropTypes.string,
modifier: PropTypes.string,
href: PropTypes.string,
children: PropTypes.object
};
export default LinkBlock;
.LinkBlock {
> *:not(.icon) {
flex: 1 1 auto;
}
& + & {
margin-top: Space(400);
}
}
LinkBlock is a component that can act as a link or a wrapper depending on how you would like to use it. It is a presentational component that contains a border a right pointing arrow and contains padding. It also transitions its border color on hover and focus.
href attribute, otherwise its just a styled div.