Edit element

sa-byline

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes HTML CSS

.sa-byline{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 0;
  border-top:1px solid #E5E9ED;
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  box-sizing:border-box;
}
.sa-byline *{box-sizing:border-box;}
.sa-byline__avatar{
  flex:0 0 auto;
  display:block;
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #D97706;          /* Foundry orange ring */
  padding:2px;
  background:#fff;
  line-height:0;
}
.sa-byline__avatar img{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
.sa-byline__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.sa-byline__name{
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.25;
  color:#0B212D;                     /* SA navy */
}
.sa-byline__name a{
  color:#0B212D;
  text-decoration:none;
}
.sa-byline__name a:hover,
.sa-byline__name a:focus-visible{
  color:#D97706;
  text-decoration:underline;
}
.sa-byline__date{
  margin:0;
  font-size:14px;
  font-weight:400;
  line-height:1.3;
  color:#6B7785;                     /* muted gray */
}
@media (max-width:480px){
  .sa-byline{gap:12px;padding:14px 0;}
  .sa-byline__avatar{width:48px;height:48px;}
  .sa-byline__name{font-size:16px;}
  .sa-byline__date{font-size:13px;}
}

Cancel