@startinblox/orbit-styling-framework v1.9.17

Orbit's CSS Framework

Documentation to install and to use the CSS framework in an application using Startin'blox.

How to install it in your app?

First, you need NPM and Sass installed. Then, go into your app's main folder and install the framework:

cd <my-app>
npm i @startinblox/orbit-styling-framework

How to update the framework's version in your app?

Go into your app's main folder:

cd <my-app>
npm i @startinblox/orbit-styling-framework --save

How to see visual examples/watch changes if you want to update the framework?

Go into your app's main folder:

cd <my-app>

Then watch files with:

npm run watch

go to the server specified in the console.

How to use?

We have set our framework to one breakpoint. Below 768 px, you are on a small screen. Above 768.01px is the default value.

Tags

You can create by adding the tag class. By default, it will have the primary colour.

Other colors

Add those utilities to tag to change the colors:

  <span class="tag">HTML</span>
  <span class="tag color-secondary">CSS</span>
  <span class="tag color-third">JS</span>

Reversed color

Reverse the colour of the tag element by adding reversed to tag.

  <span class="tag reversed">HTML</span>
  <span class="tag reversed color-secondary">CSS</span>
  <span class="tag reversed color-third">JS</span>

Hover

Add hover to tag to see its colors swipe when it is hover.

  <span class="tag hover">HTML</span>
  <span class="tag color-secondary hover">CSS</span>
  <span class="tag color-third hover">JS</span>

  <span class="tag reversed hover">HTML</span>
  <span class="tag reversed color-secondary hover">CSS</span>
  <span class="tag reversed color-third hover">JS</span>

Tags into a solid-multiple

Use children-tag to have all your elements stylised as tags.

<solid-multiple class="children-tag">
  <solid-display>
    <div>
      <solid-display>
        <div>
          <solid-display-value>Web services</solid-display-value>
        </div>
      </solid-display> >
    </div>
  </solid-display>
</solid-multiple>

Table

Add table-wrapper to the container of your table. Add table to your table. Add table-header to the header row of your table Add segment and the .table-cell to the cells inside the .table-header. Add table-body to the body of your table Add segment and the .table-cell to the cells inside the .table-body. Use the segment's widths to define the width of your cells. Add ellipsis on elements inside your table cells to ellipsis the text.

Classic table with 3 columns:

<div class="segment table-wrapper">
  <div class="table">
    <div class="table-header">
      <div class="segment table-cell table-cell third">
        Name
      </div>
      <div class="segment table-cell table-cell third">
        Firstname
      </div>
      <div class="segment table-cell table-cell third">
        Action
      </div>
    </div>
    <solid-display class="table-body">
      <div>
        <solid-display>
          <div>
            <solid-set-default class="segment table-cell third">
            </solid-set-default>
            <solid-set-default class="segment table-cell third">
            </solid-set-default>
            <solid-set-default class="segment table-cell third">
            </solid-set-default>
          </div>
        </solid-display>
      </div>
    </solid-display>
  </div>
</div>

Table with third color background and heading color column titles. 2 columns:

<div class="segment table-wrapper">
  <div class="table">
    <div class="table-header bg-color-third text-color-heading">
      <div class="segment table-cell table-cell half">
        Name
      </div>
      <div class="segment table-cell table-cell half">
        Action
      </div>
    </div>
    <solid-display class="table-body">
      <div>
        <solid-display>
          <div>
            <solid-set-default class="segment table-cell half">
            </solid-set-default>
            <solid-set-default class="segment table-cell half">
            </solid-set-default>
          </div>
        </solid-display>
      </div>
    </solid-display>
  </div>
</div>

Segment

A segment is used to help you format the content. Add segment class or segment children if you want to add the style to the children of your element and you can’t add classes. This class will make your element to display as inline-block and white-space sets to nowrap. Your element can be a block element by adding block. You can set white-space to normal by adding whitespace-normal or sm-whitespace-normal.

Width

Utilities for setting the width of an element. Use it with segment.

<div class="segment full whitespace-normal">
  <p>I measure 100% of the total space</p>
  <p class="segment two-third">I measure 66,666% of the total space.</p>
  <p class="segment quarter">I measure 25% of the total space.</p>
  <p class="segment third">I measure 33,333% of the total space.</p>
  <p class="segment half">I measure 50% of the total space.</p>
  <p class="segment auto">I take the space that I want.</p>
</div>

Prefix the width with children- to add the width on the children elements. It works with all lengths listed above.

<div class="segment full children children-third">
  <div>
    <solid-display>I measure 33.33% of the total space.</solid-display>
    <solid-display>I measure 33.33% of the total space.</solid-display>
    <solid-display>I measure 33.33% of the total space.</solid-display>
  </div>
</div>

Prefix with "sm-" to add the same styles on small screens. Ex:

<p class="segment sm-full"></p>
<div class="segment children sm-children-quarter"></div>

You can hide your element and their children, on large or small screens, with:

Spacing

Padding

Utilities for controlling an element's padding. Add the "-sm" prefix to use those utilities on small screens.

Ex: Same element on large screen and on small screen.

<div class="padding-small sm-padding-none"></div>

Padding to children

Utilities for controlling an element children's padding. Add the "-sm" prefix to use those utilities on small screens.

Ex: Same element on large screen and on small screen.

<div class="segment children children-padding-medium sm-children-padding-xxsmall">
  <div>
    <solid-display></solid-display>
  </div>
</div>

Add padding to a single side

Control the padding on one side of an element using "-top", "-right", "-bottom" and "-left". Ex: Same element on large screen and on small screen.

<div class="padding-top-xlarge padding-left-small sm-padding-left-xlarge sm-padding-bottom-large"></div>

<div class="segment children children-padding-top-medium sm-children-padding-bottom-medium">
  <div>
    <solid-display></solid-display>
  </div>
</div>

Margin

Utilities for controlling an element's padding. Add the "-sm" prefix to use those utilities on small screens.

Ex: Like you use padding. You just need to replace padding with margin.

Margin to children

Utilities for controlling an element children's padding. Add the "-sm" prefix to use those utilities on small screens.

Ex: Like you use padding on children elements. You just need to replace padding with margin.

Add margin to a single side

Control the margin on one side of an element using "-top", "-right", "-bottom" and "-left".

Ex: Like you use padding to a single side. You just need to replace padding with margin.

Pagination

Add pagination where you want this style applied (i.e: pagination widget).

<div class="pagination"></div>

Link

Add backlink to have your link preceded by an icon and coloured in grey.

<solid-link class="backlink">Back</solid-link>

Add link to have your link colored in blue.

<solid-link class="link">My link</solid-link>

Icon

With icon you can add icons in different places and in different styles. Currently we use 3 libraries to display icons : Material Design Icons, Simple Line Icons and a custom libraries with icons specially created for the application. If you want to use icons from Material Design Icons, use mdi-<icon-name>. If you want to use icons from Simple Line Icons, use icon-<icon-name>. if you want tu use our custom icons, use ci-<icon-name>. (I know I need to improve this part of the framework. Still in progress but you can find all icons and their classes in this document).

Rounded

Your icon can be surrounded by a circle, use icon rounded. You can change its size and color with these utilities. you can vary the size of the icon.

<span class="icon icon-envelope icon-secondary icon-small rounded rounded-small rounded-primary"></span>
<span class="icon icon-envelope icon-secondary icon-xlarge rounded rounded-large rounded-primary"></span>
<span class="icon icon-envelope icon-secondary icon-xsmall rounded rounded-small rounded-secondary"></span>
<span class="icon icon-envelope icon-secondary icon-large rounded rounded-large rounded-heading"></span>
<span class="icon icon-envelope icon-secondary icon-medium rounded rounded-small rounded-third"></span>

Bold

Make your icons thicker with icon bold.

Icon normal

<span class="icon icon-briefcase icon-grey icon-xlarge"></span>

Icon bold

<span class="icon bold icon-briefcase icon-grey icon-xlarge"></span>

Sizes

You can vary the size of your icon. By default it will be 18px.

<span class="icon icon-briefcase icon-grey icon-xsmall"></span>
<span class="icon icon-briefcase icon-grey icon-small"></span>
<span class="icon icon-briefcase icon-grey icon-large"></span>
<span class="icon icon-briefcase icon-grey icon-xlarge"></span>

Positioning

You can center your icon or add a small space to te right of your icon.

<p><span class="icon icon-globe icon-grey icon-large centered">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-xxsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-xsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-small">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-right-medium">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-xxsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-xsmall">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-small">Your head is not an artifact!</span></p>
<p><span class="icon icon-globe icon-grey icon-large icon-margin-left-medium">Your head is not an artifact!</span></p>

Icon colors

You can change the color of your icon with icon-<color-name> and the color when you hover it with icon-<color-name> hover.

| icon-secondary | icon-secondary hover | | icon-third| | icon-third hover | | icon-heading| | icon-heading hover | | icon-white| | icon-grey|

<span class="icon icon-bag icon-primary icon-xlarge"></span>
<span class="icon icon-camera icon-secondary icon-xlarge"></span>
<span class="icon mdi-atom icon-third icon-xlarge"></span>
<span class="icon ci-code icon-heading icon-xlarge"></span>
<span class="bg-color-heading"><span class="icon mdi-check icon-white icon-xlarge"></span></span>
<span class="icon ci-hat icon-grey icon-xlarge"></span>

Form

Use form to make form elements easy to override with the following utilities. We have added basic form styles for the :

form element types:

• inputtype='email'
• inputtype='text'
• inputtype='url'
• inputtype='password'
• textarea
• inputtype='email':required, inputtype='text':required, inputtype='url':required, inputtype='password':required, textarea:required
• inputtype='email':invalid, inputtype='text':invalid, inputtype='url':invalid, inputtype='password':invalid, textarea:invalid
• label's input

  <div class="form">
    <input type="email" name="" id="">
  </div>
  or
  <div class="form">
    <input type="text" name="" id="">
  </div>
  or
  <div class="form">
    <input type="url" name="" id="">
  </div>
  or
  <div class="form">
    <input type="password" name="" id="">
  </div>

  <div class="form">
    <input type="email" required name="" id="">
  </div>
  or
  <div class="form">
    <input type="text" required name="" id="">
  </div>
  or
  <div class="form">
    <input type="url" required name="" id="">
  </div>
  or
  <div class="form">
    <input type="password" required name="" id="">
  </div>

  <div class="form">
    <input type="email" invalid name="" id="">
  </div>
  or
  <div class="form">
    <input type="text" invalid name="" id="">
  </div>
  or
  <div class="form">
    <input type="url" invalid name="" id="">
  </div>
  or
  <div class="form">
    <input type="password" invalid name="" id="">
  </div>

<div class="form">
  <textarea name="" id=""></textarea>
</div>

<div class="form">
  <textarea required name="" id=""></textarea>
</div>

Orbit's widgets:

• orbit-status

• solid-form-date-label

• solid-form-dropdown-autocompletion-label and solid-form-dropdown-autocompletion

• solid-form-multipleselect-autocompletion-label and solid-form-multipleselect-autocompletion

• solid-form-placeholder-dropdown

• solid-form-richtext-label

Search field

You can add a magnify icon inside the input field by adding icon icon-magnify to the Orbit's widget.

<solid-form-placeholder-text class="icon icon-magnify"></solid-form-placeholder-text>

Adding a user

Works with solid-form-dropdown-autocompletion-label and solid-form-dropdown-autocompletion. Use add-member when you want the select field to take up half the space and the button to add members is right next to it.

<solid-form-dropdown-autocompletion class="add-member"></solid-form-dropdown-autocompletion>

Background

You can add a white background to a field. Use input-bg-white to style an input. Use select-bg-white to style a select.

<solid-form-placeholder-text class="input-bg-white icon icon-magnify"></solid-form-placeholder-text>

Shadow

You can add a shadow to a field. Use input-shadow to style an input. Use select-shadow to style a select.

<solid-form-placeholder-text class="input-shadow input-bg-white icon icon-magnify"></solid-form-placeholder-text>

Typography

Font Size

Utilities for controlling the font size of an element. The basic font size is 14px and the basic line-height is 16px.

  <p class="text-xsmall">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-small">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-medium">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-large">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-xlarge">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-xxlarge">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>

Font Weight

Utilities for controlling the font weight of an element.

  <p class="text-normal">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-semibold">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-bold">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>

Alignment

Utilities for controlling the horizontal and vertical alignment of text.

  <p class="text-letter-spacing-large">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-letter-spacing-larger">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-left">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <span>
    we are but simple travelers who seek the enchanter who lives beyond these wood <span class="text-top">1</span>
  </p>
  <span>
    we are but simple travelers who seek the enchanter who lives beyond these wood <span class="text-sub">2</span>
  </p>
  <span>
    we are but simple travelers who seek the enchanter who lives beyond these wood <span class="text-top-align">3</span>
  </p>

Letter spacing

Utilities for controlling the spacing of the text. You can increase the space between letters.

  <p class="text-letter-spacing-large">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-letter-spacing-larger">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>

Effects

With these utilities you can add some effects to your texts.

  <p class="line-xlarge">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-underline">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>

Line height

Utilities to increase the line height of your text.

<p class="line-xlarge">
  Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.
</p>

Word spacing

Utilities to add space to the left or right of your text.

  <p>
    Sam<span class="word-spacing-left word-spacing-right">-</span>Sam is admin
  </p>
  <p>
    Sam<span>-</span>Sam is admin
  </p>

Text select

You can control whether the user can select text.

  <p>
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p class="text-disable-selection">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>

Shadows

Utilities to add a shadow to an element.

  <div class="shadow"></div>
  <div class="shadow-small"></div>
  <div class="shadow-large"></div>

Loaders

Use loader to stylize a loader. Add loader-top if you want to position it 30px higher. Add loader-menu if you need a smaller version, like in a menu.

  <div class="loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="loader loader-menu">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

Colors

Selection color

You can change the background color of the pseudo-element '::selection' by adding selection-background. It will use the color defined in the "--color-third" variable.

  <p class="selection-background">
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>
  <p>
    we are but simple travelers who seek the enchanter who lives beyond these woods.
  </p>

Background colors

Utilities to change the background color of an element. Use bg-color-<color-name>. You can change the background color when this element is active or hover. Use bg-color-<color-name> active or bg-color-<color-name> hover. You can reverse the color too. Use bg-color-<color-name> reverse. Those additional colors will depend of the chosen basis color.

  <div class="bg-color-primary"></div>
  <div class="bg-color-primary reverse"></div>

  <div class="bg-color-secondary"></div>
  <div class="bg-color-secondary reverse"></div>

  <div class="bg-color-third"></div>
  <div class="bg-color-third reverse"></div>

  <div class="bg-color-heading"></div>
  <div class="bg-color-heading reverse"></div>

  <div background-color: gray;"><div class="bg-color-white"></div></div>
  <div class="bg-color-grey"></div>

Text colors

Utilities to change the text color. Use text-color-<color-name>. You can change the color when this element is active. Use text-color-<color-name> active. You can reverse the color too. Use text-color-<color-name> reverse. Those additional colors will depend of the chosen basis color. And you can change the text color when you hover it with a fixed color. Use text-hover.

  <p class="text-color-primary">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-primary active" active>A text with the attribute :active</p>
  <p class="text-color-primary reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>

  <p class="text-color-secondary">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-secondary active" active>A text with the attribute :active</p>
  <p class="text-color-secondary reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>

  <p class="text-color-third">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-third active" active>A text with the attribute :active</p>
  <p class="text-color-third reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>

  <p class="text-color-heading">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-heading active" active>A text with the attribute :active</p>
  <p class="text-color-heading reverse">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>

  <p class="text-color-white">I'm normally not a praying man, but if you're up there, please save me, Superman.</p>
  <p class="text-color-white heading-active" active>A text with the attribute :active</p>

  <p class="text-hover">A text hovered over</p>

Borders

Utilities for controlling an element's borders.

Widths and styles

Border colors

  <div class="border-all-sides border-color-primary">
    <p>All-sides border with primary color</p>
  </div>

  <div class="border-left border-color-secondary">
    <p>Left-side border with secondary color</p>
  </div>

  <div class="border-bottom border-color-third">
    <p>Bottom-side border with third color</p>
  </div>

  <div class="border-right border-color-heading">
    <p>Right-side border with heading color</p>
  </div>

  <div class="border-all-sides border-color-grey">
    <p>All-sides border with gray color</p>
  </div>

  <div class="border-all-sides border-color-secondary border-rounded-xxsmall">
    <p>All-sides border with secondary color and slightly rounded edges</p>
  </div>

Cursors

Utility for controlling the cursor style when hovering over an element.

  <div class="border-all-sides border-color-secondary cursor-pointer">
    <p>All-sides border with secondary color</p>
  </div>

Hidding element

Utility to hide an element.

  <div class="hidden">
    <p>Hidden element</p>
  </div>

Buttons

Add button to style an element. You can round a button with button rounded. You can add and stylize and icon with button icon.

Texts

Utilities to stylize a text inside a button.

Button colors

With these utilities you can set the background color to white and add a border and set the text color accordingly. Add reversed if you want a colored background and white border and text.

<button class="button color-primary bordered text-uppercase text-bold">Join the project</button>

<button class="button reversed color-third bordered">Quit the project</button>

<solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered"></solid-link>

Disabled button

Utilities to prevent users from clicking on an element. They give visual indications. The colors will reverse as you hover over this element.

<button class="button color-disabled bordered">Join the project</button>

<button class="button color-disabled bordered reversed">Join the project</button>

Children elements

Utilities for adding styles to an element within another. Simply replace button with children-link-button to add the basis styles. With children-link-rounded you can round this element. With children-link-icon you can add and stylize an icon.

<solid-action label="" class="children-link-rounded children-icon-speech children-link-reversed color-secondary bordered">
  <solid-link></solid-link>
</solid-action>

<div class="segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small">
  <button type="submit">GO</button>
</div>

Badges

Utilities to style an element as a badge. Use badge on the parent element and counter on the child element. Its basis text color is set by var(--color-heading) and background color by var(--color-third). You can change colors with :

<div class="badge">
  <div class="counter">1</div>
</div>
<div class="badge">
  <div class="counter color-primary">1</div>
</div>
<div class="badge">
  <div class="counter color-secondary">1</div>
</div>
<div class="badge">
  <div class="counter color-third">1</div>
</div>
<div class="badge">
  <div class="counter color-heading">1</div>
</div>

<div class="badge">
  <div class="counter">1</div>
</div>
<div class="badge">
  <div class="counter color-primary reversed">1</div>
</div>
<div class="badge">
  <div class="counter color-secondary reversed">8</div>
</div>
<div class="badge">
  <div class="counter color-third reversed">2</div>
</div>
<div class="badge">
  <div class="counter color-heading reversed">7</div>
</div>

Avatars

Utilities to style an element like a rounded avatar. Use avatar. Its basis dimensions are height: 50px; and width: 50px;. You can change the dimensions with thoses utilities:

  <div class="segment">
    <div class="avatar xsmall">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar small">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar large">
      <img src="/images/alien.png">
    </div>
  </div>
  <div class="segment">
    <div class="avatar xlarge">
      <img src="/images/alien.png">
    </div>
  </div>

Labelled avatars

Use labelled-avatar. If you element has two lines, use labelled-avatar two-lines. Add segment to the first children (Beware that your two lines must have fieldsets named [name='line1'] and [name='line2'] respectively).

You can change the height according to the avatar's height.

If you want to display the communities, don't forget to name your fieldset communities.

<div class="labelled-avatar">
  <div class='segment'>
    <div class="avatar"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
  </div>
</div>

<div class="labelled-avatar small">
  <div class='segment'>
    <div class="avatar small"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
  </div>
</div>

<div class="labelled-avatar xsmall">
  <div class='segment margin-right-xsmall'>
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
  </div>
</div>

<div class="labelled-avatar two-lines">
  <div class='segment'>
    <div class="avatar"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
    <div>Thief</div>
  </div>
</div>

<div class="labelled-avatar two-lines small">
  <div class='segment'>
    <div class="avatar small"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
    <div>Thief</div>
  </div>
</div>

<div class="labelled-avatar two-lines xsmall">
  <div class='segment margin-right-xsmall'>
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div>Dougal Keane</div>
    <div>Thief</div>
  </div>
</div>

<div class="labelled-avatar two-lines xsmall">
  <div class="segment">
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class="segment">
    <div class="text-small text-semibold text-color-heading">Dougal Keane</div>
    <div class="block text-xsmall">@dkeane</div>
  </div>
  <div class="segment">
    <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
    <div>&nbsp;</div>
  </div>
</div>

<div class="labelled-avatar xsmall">
  <div class='segment'>
    <div class="avatar xsmall"><img src="/images/alien.png"></div>
  </div>
  <div class='segment'>
    <div class="text-small text-semibold text-color-heading">Dougal Keane</div>
  </div>
  <div class="segment">
    <solid-link class="icon icon-speech icon-small icon-secondary hover"></solid-link>
  </div>
</div>