No Time Dad

A blog about web development written by a busy dad

Recreating the Gmail Contact Card Using Flexbox

I’m a little surprised I hadn’t noticed it before, but the contact card gmail uses in its iOS app is really nicely designed. I know they use Material for most of their interfaces, but the card doesn’t look much like the standard Material layouts I’ve seen.

The contact card features multiple sections, including a header, action buttons, details, and an interactions section where they list recent emails from the given contact. It also has subtle borders that break up each section.

It seems pretty well thought out for the most part. The contact’s email address in a large font at the top. Their picture is shown if it’s available, or a generic user icon otherwise. After seeing their email address, the next thing you might want to do is send them an email, schedule a meeting, chat with them, or call them. So, all of those actions are represented as buttons in the next row.

After that, there’s a “Contact details” section that seems a little out of place to me. Which is why I said the contact card was well thought out “for the most part”. I’m just not sure what it adds to the card since the email is already listed in the header. Maybe sometimes the header doesn’t have an email address and instead has a full name or compoant name, so this secondary section is needed to be sure you can it. Or maybe this section is just to fill in some extra space. I’m not entirely sure.

Lastly, the contact card has a listing of recent interactions with the given contact. Another subtle border is surrounding this section that contains a list of recent emails with the given contact.

I count 5 different sections for this contact card. The section at the very top with the left arrow and more icons, the header section with the contact avatar and email, the actions section, the contact details section, and the interactions section. Each section is either center aligned or left aligned.

What I like most about the contact card is what it doesn’t have. There aren’t any animations, transitions, fancy scrolling effects, or sparkly elements. It just displays the relevant information in a structured and easily digestible manor. It does it’s job and it does it well. Below is a screenshot of the contact card itself from my phone.

gmail_contact_card

Building the contact card

So, how would I go about recreating this contact card? I’d start with a container div for the card itself then work my way down through each section. I think building from the top down, one section at a time is a good approach for most projects. This one is going to require a lot of flexbox for alignment.

I’m going to use a slightly different color palette for my version of the contact card, but I’ll try to keep most of the elements and sections of the card the same. The color palette I chose was randomly generated from coolors.co. I was looking for a palette that had grays and blues, dark to light.

Contact card container

My phone is an iPhone 8 plus, which has a width of around 414px according to Chrome’s device viewer, so that’s the width I’ll use for the card container. As far as the height goes, I’m going to let the content determine it. Looking at the screenshot above, I can see that the border around the More text at the bottom is slightly cut off which means I can scroll. If I can scroll, then the height probably isn’t set. Maybe there is a max-height, but I only have the screenshot to go off of.

So, I’ll create a div with a class called Contact__Card that will be the container element for the contact card. I’ll use the darkest blue in my palette for the background. It looks like the contact card has a small amount of padding, except on the action icons sections. I’ll have to do something special for that section to remove the padding.

<div class="Contact__Card">...</div>
.Contact__Card {
  /* Custom color palette */
  --lavender-web: #eae8ffff;
  --light-gray: #d8d5dbff;
  --silver-metallic: #adacb5ff;
  --space-cadet: #2d3142ff;
  --baby-blue-eyes: #b0d7ffff;
  /* iPhone 8 plus width */
  width: 414px;
  max-width: 414px;
  padding: 0.5rem;
  background-color: var(--space-cadet);
}
Top icons section

The icons section is going to be my first usage of flexbox. I can use justify-content: space-between; to easily put the left chevron icon to the left and ellipsis menu icon to the right. Something I noticed is that aside from the avatar user icon, most of the icons are the same size. This is great because I can create a generic selector called Icon and add modifiers to it as needed.

Inside the parent Contact__Card div I created previously, I’ll create add a new div with the a selector called Top__Actions to hold the navigation and menu icons. In the new div I’ll init a flexbox container and space out the icons. The icons I’m using throughout this card are from heroicons.

<div class="Contact__Card">
  <div class="Top__Actions">
    <a href="#back" class="Icon__Link">
      <svg class="Icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </a>
    <a href="#more" class="Icon__Link">
      <svg class="Icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
      </svg>
    </a>
  </div>
</div>
...
.Top__Actions {
  /* Init flexbox container */
  display: flex;
  align-items: center;
  /* Push icons to left and right (since there are only two) */
  justify-content: space-between;
}

.Icon__Link {
  text-decoration: none;
}

.Icon {
  width: 36px;
  height: 36px;
  color: var(--lavender-web)
}
Header section

The header section is comprised of an avatar icon and the name or email address of the contact. Both of these elements are stacked on top of each other and centered. Anytime I see “stacked and centered” I instantly think of flexbox. It makes centering and aligning elements mostly painless.

I’ll add a modifier to the avatar icon to make it larger. How large, I am not exactly sure since I can’t inspect it, but I think it should be pretty big. As far as the color of the icon goes, when looking through the various contact cards in my gmail app I noticed that the colors were random and sometimes just gray. I don’t really want to spend time changing the fill colors of the svg, so I’ll leave it as gray for this example.

<div class="Contact__Card">
  <div class="Top__Actions">...</div>
  <div class="Header">
    <svg class="Icon Avatar__Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
    </svg>
    <div class="Contact__Name">
      noreply@github.com
    </div>
  </div>
</div>
...
.Header {
  /* Init flexbox */
  display: flex;
  /* Stack the items in a column */
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
}

.Avatar__Icon {
  /* Modifier to Icon selector to make avatar large */
  width: 8rem;
  height: 8rem;
}

.Contact__Name {
  font-size: 24px;
  font-weight: 700;
  padding-top: 1rem;
}
noreply@github.com
Action icons section

Similar to the previous sections, I’ll use flexbox for the action items. Actually, I’ll be using one parent flexbox container to hold all of the icons and text, and one flexbox container for each icon and text. The parent flexbox container will be a row, and the icon and text flexbox will be a column since the icon is stacked on the text.

The next tricky part is the top and bottom borders for this section. I need them to extend past the padding to the edges. For me, the quickest way to do this was to use negative margins. It felt wrong, but maybe since there isn’t a lot of dynamic data on the contact card it’s not too bad. I’m still on the fence about this one.

noreply@github.com
Email
Schedule
Chat
Call
<div class="Contact__Card">
  <div class="Top__Actions">...</div>
  <div class="Header">...</div>
  <div class="Actions">
    <div class="Icon_Text__Container">
      <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
      </svg>
      <div class="Action__Text">Email</div>
    </div>
    <div class="Icon_Text__Container">
      <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
      <div class="Action__Text">Schedule</div>
    </div>
    <div class="Icon_Text__Container">
      <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
      </svg>
      <div class="Action__Text">Chat</div>
    </div>
    <div class="Icon_Text__Container Icon_Text__Disabled">
      <svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 20 20" fill="currentColor">
        <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
      </svg>
      <div class="Action__Text">Call</div>
    </div>
  </div>
</div>
.Actions {
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  /* Init flexbox */
  display: flex;
  /* Use the padding to help with spacing */
  justify-content: space-evenly;
  /* Force the borders to the edge of the parent container */
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  /* Add extra space */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-right: 3.5rem;
  padding-left: 3.5rem;
  color: var(--baby-blue-eyes);
}

.Action__Icon {
  color: var(--baby-blue-eyes);
}

.Action__Text {
  font-weight: 600;
}

.Icon_Text__Container {
  /* Init flexbox column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Icon_Text__Disabled {
  opacity: 0.5;
}
Contact details section

The next section is less complicated. It does use flexbox twice, but the fanciest part of this section is the border. The one issue I struggled with was getting the border section to span the entire width of the parent container. I tried a few versions of flex: 1; and similar, but nothing seemed to work for me aside from adding width: 100%;. I feel like I’m missing something obvious here, but the width property did work even if it felt a little wrong.

<div class="Contact__Card">
  <div class="Top__Actions">...</div>
  <div class="Header">...</div>
  <div class="Actions">...</div>
  <div class="Contact__Details">
    <div class="Details__Header">Contact details</div>
    <div class="Email__Detail">
      <div class="Icon_Text__Disabled">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
        </svg>
      </div>
      <div class="Email__Text">noreply@github.com</div>
    </div>
  </div>
</div>
...
.Contact__Details {
  /* Init flexbox to help with centering items */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.Details__Header {
  /* I could probably make better use of flexbox here */
  padding-bottom: 0.5rem;
}

.Email__Detail {
  display: flex;
  align-items: center;
  padding: 1rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--light-gray);
}

.Email__Text {
  /* Icon and text weren't exactly aligned for some reason, so move the text slightly to help */
  margin-bottom: 3px;
  padding-left: 1rem;
}
noreply@github.com
Email
Schedule
Chat
Call
Contact details
Interactions section

The last section is the interactions section. This is where previous interactions with the given contact are listed. It’s similar to the previous section, but features a list of emails and a “More” link for pagination. Each item in the interactions list will use a flexbox container, as well as the subject line and date. Flexbox everywhere.

<div class="Contact__Card">
  <div class="Top__Actions">...</div>
  <div class="Header">...</div>
  <div class="Actions">...</div>
  <div class="Contact__Details">...</div>
  <div class="Interactions">
    <div class="Interactions__Text">
      You & noreply@github.com
    </div>
    <div class="Interactions__List">
      <span class="List__Header">Interactions</span>
      <ul>
        <li class="Subject">
          <InboxIcon />
          <div class="Subject__Text">
            <span class="Text__Main">Github Explore Apr 27 - May 4</span>
            <span class="Text__Sub">Tue 9:25am</span>
          </div>
        </li>
        <li class="Subject">
          <InboxIcon />
          <div class="Subject__Text">
            <span class="Text__Main">Github Explore Apr 20 - Apr 27</span>
            <span class="Text__Sub">Apr 27</span>
          </div>
        </li>
        <li class="Subject">
          <InboxIcon />
          <div class="Subject__Text">
            <span class="Text__Main">Github Explore Apr 13 - Apr 20</span>
            <span class="Text__Sub">Apr 20</span>
          </div>
        </li>
      </ul>
      <div class="Interactions__More">
        More
        <svg xmlns="http://www.w3.org/2000/svg" class="More__Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
  </div>
</div>
...
.Interactions {
  display: flex;
  flex-direction: column;
}

.Interactions__Text {
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 1rem;
}

.Interactions__List {
  border: 1px solid var(--light-gray);
  border-radius: 0.5rem;
  padding: 1rem;
}

.List__Header {
  font-weight: 700;
}

.Subject {
  display: flex;
  align-items: center;
}

.Subject__Text {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
}

.Text__Main {
  font-weight: 700;
}

.Text__Sub {
  opacity: 0.7;
}

.Interactions__More {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid var(--light-gray);
  /* Negative margins to force full width top-border */
  margin-left: -1rem;
  margin-right: -1rem;
  color: var(--baby-blue-eyes);
  font-weight: 700;
}

.More__Icon {
  width: 22px;
  height: 22px;
  margin-left: 0.5rem;
}
noreply@github.com
Email
Schedule
Chat
Call
Contact details
You & noreply@github.com
Interactions
  • Github Explore Apr 27 - May 4Tue 9:25am
  • Github Explore Apr 20 - Apr 27Apr 27
  • Github Explore Apr 13 - Apr 20Apr 20
More

Conclusion & final code

The interactions section turned out to be the most complicated. It used flexbox all over the place in several different ways. Honestly, I probably overused flexbox in a few places. Anytime I’m using flex-direction: column; I really question whether it’s needed since the page is naturally a column. I’m still figuring out when and when not to use it.

Overall, I’m happy with how it turned out. I can see using this card in an actual production site somewhere in some shape.

Final code & Demo
<div class="Contact__Card">
  <div class="Top__Actions">
    <a href="#back" class="Icon__Link">
      <svg class="Icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </a>
    <a href="#more" class="Icon__Link">
      <svg class="Icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
      </svg>
    </a>
  </div>
  <div class="Header">
    <svg class="Icon Avatar__Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
    </svg>
    <div class="Contact__Name">
      noreply@github.com
    </div>
  </div>
  <div class="Actions">
    <div class="Icon_Text__Container">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
        </svg>
        <div class="Action__Text">Email</div>
      </div>
      <div class="Icon_Text__Container">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <div class="Action__Text">Schedule</div>
      </div>
      <div class="Icon_Text__Container">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        <div class="Action__Text">Chat</div>
      </div>
      <div class="Icon_Text__Container Icon_Text__Disabled">
        <svg xmlns="http://www.w3.org/2000/svg" class="Icon" viewBox="0 0 20 20" fill="currentColor">
          <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
        </svg>
        <div class="Action__Text">Call</div>
      </div>
    </div>
  </div>
  <div class="Contact__Details">
    <div class="Details__Header">Contact details</div>
      <div class="Email__Detail">
        <div class="Icon_Text__Disabled">
          <svg xmlns="http://www.w3.org/2000/svg" class="Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
        </div>
        <div class="Email__Text">noreply@github.com</div>
      </div>
    </div>
  </div>
  <div class="Interactions">
    <div class="Interactions__Text">
      You & noreply@github.com
    </div>
    <div class="Interactions__List">
      <span class="List__Header">Interactions</span>
      <ul>
        <li class="Subject">
          <InboxIcon />
          <div class="Subject__Text">
            <span class="Text__Main">Github Explore Apr 27 - May 4</span>
            <span class="Text__Sub">Tue 9:25am</span>
          </div>
        </li>
        <li class="Subject">
          <InboxIcon />
          <div class="Subject__Text">
            <span class="Text__Main">Github Explore Apr 20 - Apr 27</span>
            <span class="Text__Sub">Apr 27</span>
          </div>
        </li>
        <li class="Subject">
          <InboxIcon />
          <div class="Subject__Text">
            <span class="Text__Main">Github Explore Apr 13 - Apr 20</span>
            <span class="Text__Sub">Apr 20</span>
          </div>
        </li>
      </ul>
      <div class="Interactions__More">
        More
        <svg xmlns="http://www.w3.org/2000/svg" class="More__Icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
  </div>
</div>
.Top__Actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Icon__Link {
  text-decoration: none;
}

.Icon {
  width: 36px;
  height: 36px;
  color: var(--lavender-web)
}

.Header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
}

.Avatar__Icon {
  width: 8rem;
  height: 8rem;
}

.Contact__Name {
  font-size: 24px;
  font-weight: 700;
  padding-top: 1rem;
}

.Actions {
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  justify-content: space-evenly;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-right: 3.5rem;
  padding-left: 3.5rem;
  color: var(--baby-blue-eyes);
}

.Action__Icon {
  color: var(--baby-blue-eyes);
}

.Action__Text {
  font-weight: 600;
}

.Icon_Text__Container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Icon_Text__Disabled {
  opacity: 0.5;
}

.Contact__Details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.Details__Header {
  padding-bottom: 0.5rem;
}

.Email__Detail {
  display: flex;
  align-items: center;
  padding: 1rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--light-gray);
}

.Email__Text {
  margin-bottom: 3px;
  padding-left: 1rem;
}

.Interactions {
  display: flex;
  flex-direction: column;
}

.Interactions__Text {
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 1rem;
}

.Interactions__List {
  border: 1px solid var(--light-gray);
  border-radius: 0.5rem;
  padding: 1rem;
}

.List__Header {
  font-weight: 700;
}

.Subject {
  display: flex;
  align-items: center;
}

.Subject__Text {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
}

.Text__Main {
  font-weight: 700;
}

.Text__Sub {
  opacity: 0.7;
}

.Interactions__More {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid var(--light-gray);
  margin-left: -1rem;
  margin-right: -1rem;
  color: var(--baby-blue-eyes);
  font-weight: 700;
}

.More__Icon {
  width: 22px;
  height: 22px;
  margin-left: 0.5rem;
}
noreply@github.com
Email
Schedule
Chat
Call
Contact details
You & noreply@github.com
Interactions
  • Github Explore Apr 27 - May 4Tue 9:25am
  • Github Explore Apr 20 - Apr 27Apr 27
  • Github Explore Apr 13 - Apr 20Apr 20
More