CSS: byline

.instui-byline — A media object: a hero figure beside a title and description.

Source: byline.css

Usage

@import "@pantoken/components/components.css";
@import "@pantoken/components/byline.css";

Examples

<div class="instui-byline -size-md">
  <span class="instui-icon -icon-megaphone"></span>
  <div>
    <div class="title">What's new</div>
    <div class="description">The figure can be any leading visual — an icon, an avatar, or an image.</div>
  </div>
</div>

What's new

The figure can be any leading visual — an icon, an avatar, or an image.

Structure

.instui-byline
  [class*="-icon-"] (0..1)
  div
    .title
    .description

flowchart TD n0[".instui-byline"]:::cssdoc-root n1("[class*="-icon-"]"):::cssdoc-part n2("div"):::cssdoc-part n3(".title"):::cssdoc-part n4(".description"):::cssdoc-part n0 -.->|0..1| n1 n2 --> n3 n2 --> n4 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers

Modifier	Description
.-align-content-center	Vertically centre the text beside the hero.
.-align-content-top	Align the text to the top of the hero.
.-icon-*	Render a leading glyph icon before the text block.
.-size-large	Large. Long-form alias of -size-lg.
.-size-lg	Large.
.-size-md	Medium.
.-size-medium	Medium. Long-form alias of -size-md.
.-size-sm	Small.
.-size-small	Small. Long-form alias of -size-sm.

Parts

Part	Description
.description	The supporting body text.
.title	The heading text.

Tokens consumed

Token	Type	Value
--instui-component-byline-background	<color>	#00000000
--instui-component-byline-color	<color>	light-dark(#273540, #ffffff)LightDark
--instui-component-byline-description-font-size	<length>	1rem
--instui-component-byline-description-font-weight	<integer>	400
--instui-component-byline-description-line-height	<percentage>	125%
--instui-component-byline-figure-margin	<length>	0.75rem
--instui-component-byline-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-byline-large	<length>	62em
--instui-component-byline-medium	<length>	48em
--instui-component-byline-small	<length>	30em
--instui-component-byline-title-font-size	<length>	1.375rem
--instui-component-byline-title-font-weight	<integer>	600
--instui-component-byline-title-line-height	<length>	1.25rem
--instui-component-byline-title-margin	<length>	0 0 0.5rem 0

Browser support

• Contains its element styles with the CSS @scope at-rule; needs a recent Chromium, Firefox, or Safari.