The React documentation for this component can be read from Storybook (link here)
Profile
Use to provide a visual representation of a person or an object with associated information.
Description
Display a picture element (typically of someone's face), alongside two text elements that sit on top of each other. Example usage of the text is that one line features a phone number, and the other line features a prompt to call for help.
If using a phone number, make sure you change the phone number in the href attribute too, so that it dials the correct number when clicked.
Variants
Default
The default layout is "horizontal" with the picture sitting on the same row as the text. It is responsive and moves to the "vertical" layout (detailed below) if there isn't enough space.
Vertical
This makes the picture always sit on the row above the text. It is not responsive and always uses this format.
Team
This makes the picture sit on the row above the text, and centers the content. It is used in the grid of the Meet the Team component.
Activate Sass component
In order to have the styling of this component available, you need to include it in your project. After including the
Radius library in your main
./index.scss file, add this snippet:
@include radius-component-profile;Usage
Usage example
Need help? Give us a call.
Need help? Give us a call.
Managing Director, International
Code example
<section class="profile">
<div class="profile__picture">
<img src="/m2dm-public/img/profile/face.png">
</div>
<div class="profile__text">
<a class="profile__text-heading" href="tel:0800 048 2467">0800 048 2467</a>
<p class="profile__text-copy">Need help? Give us a call.</p>
</div>
</section>
<br><br>
<section class="profile profile--vertical">
<div class="profile__picture">
<img src="/m2dm-public/img/profile/face.png">
</div>
<div class="profile__text">
<a class="profile__text-heading" href="tel:0800 048 2467">0800 048 2467</a>
<p class="profile__text-copy">Need help? Give us a call.</p>
</div>
</section>
<br><br>
<section class="profile profile--team">
<div class="profile__picture">
<img src="/m2dm-public/img/profile/face.png">
</div>
<div class="profile__text">
<a href="#" class="cta-link profile__text-team-member-name">Panni Morshedi</a>
<p class="profile__text-copy">Managing Director, International</p>
</div>
</section>