CSS: byline

.instui-byline — Egy médiaobjektum: egy főszereplő ábra a cím és a leírás mellett.

Forrás: byline.css

Használat

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

Példák

<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.

Felépítés

.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;

Módosítók

Módosító	Leírás
.-align-content-center	Függőlegesen középre helyezze a szöveget a főszereplő mellett.
.-align-content-top	Igazítsa a szöveget a főszereplő tetejéhez.
.-icon-*	Rendereljen egy vezető glifa ikont a szövegblokk előtt.
.-size-large	Nagy. Hosszú forma alias a -size-lg.
.-size-lg	Nagy.
.-size-md	Közepes.
.-size-medium	Közepes. A -size-md hosszú formájú aliasa.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias a -size-sm.

Részek

Rész	Leírás
.description	A támogató szövegtörzs.
.title	A címke szövege.

Felhasznált tokenek

Token	Típus	Érték
--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

Böngészőtámogatás

• Tartalmazza az elem stílusait a CSS @scope szabállyal; szükséges egy friss Chromium, Firefox, vagy Safari.