Profile box
A profile box is a single component containing a profile image details and optionally a biography. The biography can be in bullet format or in textual format.
Variations
Lorem ipsum
Lorem ipsum dolor sit amet
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
-
YYYY
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum dolor sit amet
-
YYYY
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum dolor sit amet
-
YYYY
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum
Lorem ipsum dolor sit amet
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum
Lorem ipsum dolor sit amet
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
- Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur adipiscing
Component used in
Page template
Details
Usage
The profile box component is used to display a card containing a picture and person's metadata (e.g., a description).
Guidelines
- Depending on the images available, you might want to change the image container resolution
- Use
-portraitclass to change resolution
- Use
HTML structure
Overall HTML view of a profile box component:
div.profile-box
div.upper
div[data-image]div.content-box
h3h4 (optional)dl
dt (one or more)dd (one or more)
pdiv.lower (optional)
div.content-box
h3dl
div
dt (one or more)dd (one or more)
spanpPresets
Profile box presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Basic | Preset with the minimum requirements of the component. |
Presets are ready to use HTML structures.
Variations
Profile box variations:
| Variation | Description |
|---|---|
| Default | This snippet is composed of two boxes. The first box features the basic details, the second box highlights additional information. |
| Basic | This snippet gets rid of the lower box, reducing the layout to the minimum requirements. |
Modifiers
Profile box classes:
| Class | Description |
|---|---|
-top-arrow | Adds an arrow on top of the component. |
-portrait-img | Changes the image resolution to portrait mode. |
-no-space-below | Removes component margin bottom. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The profile box component cannot be embedded inside other component.
main (HTML file)
div.profile-boxNesting
The profile box component cannot be used as a container of other components and/or elements.
main (HTML file)
div.profile-box