Heading

<main class="main-wrapper">
    <article class="article-container">
        <h2 class="heading2">Normal</h2>
        <h1 class="heading1">ページタイトル (Heading 1)</h1>
        <h2 class="heading2">大見出し (Heading 2)</h2>
        <h3 class="heading3">中見出し (Heading 3)</h3>
        <h4 class="heading4">小見出し (Heading 4)</h4>
        <div class="divider my32" role="separator"></div>
        <h2 class="heading2">Decorated</h2>
        <h1 class="heading2 -decorated-underline">大見出し (Heading 2)</h2>
            <h2 class="heading2 -decorated-frame">大見出し (Heading 2)</h2>
            <h2 class="heading2 -decorated-sideline">大見出し (Heading 2)</h2>
            <h2 class="heading2 -decorated-bg">大見出し (Heading 2)</h2>
            <h2 class="heading2 -decorated-original01">大見出し (Heading 2)</h2>
    </article>
</main>
<main class="main-wrapper">
  <article class="article-container">
    <h2 class="heading2">Normal</h2>
    <h1 class="heading1">ページタイトル (Heading 1)</h1>
    <h2 class="heading2">大見出し (Heading 2)</h2>
    <h3 class="heading3">中見出し (Heading 3)</h3>
    <h4 class="heading4">小見出し (Heading 4)</h4>
    <div class="divider my32" role="separator"></div>
    <h2 class="heading2">Decorated</h2>
    <h1 class="heading2 -decorated-underline">大見出し (Heading 2)</h2>
    <h2 class="heading2 -decorated-frame">大見出し (Heading 2)</h2>
    <h2 class="heading2 -decorated-sideline">大見出し (Heading 2)</h2>
    <h2 class="heading2 -decorated-bg">大見出し (Heading 2)</h2>
    <h2 class="heading2 -decorated-original01">大見出し (Heading 2)</h2>
  </article>
</main>
/* No context defined. */
  • Content:
    .heading1 {
      margin-block-end: 1rem;
      line-height: 2;
      font-size: calc(var(--font-size-h));
      font-weight: 700;
    }
    
    .heading2 {
      margin-block-end: 1rem;
      line-height: 1.8;
      font-size: calc(var(--font-size-l2));
      font-weight: 700;
    }
    
    .heading3 {
      margin-block-end: 1rem;
      line-height: 1.75;
      font-size: calc(var(--font-size-l1));
      font-weight: 700;
    }
    
    .heading4 {
      margin-block-end: 1rem;
      line-height: 1.5;
      font-size: calc(var(--font-size-m2));
      font-weight: 700;
    }
    
    .heading2.-decorated-underline {
      margin-block-end: 2rem;
    }
    .heading2.-decorated-underline:after {
      content: "";
      display: block;
      border-bottom: .2rem solid var(--black);
      font-size: 0;
    }
    
    .heading2.-decorated-frame {
      margin-block-end: 2rem;
      padding: .5rem 1rem;
      border: .2rem solid #333;
    }
    
    .heading2.-decorated-sideline {
      position: relative;
      margin-block-end: 2rem;
      padding-inline-start: 1rem;
    }
    .heading2.-decorated-sideline:before {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 2rem;
      height: 2.5rem;
      border-left: .5rem solid #333;
    }
    
    .heading2.-decorated-bg {
      margin-block-end: 2rem;
      padding: .5rem 1rem;
      background-color: #eef1f2;
    }
    
    .heading2.-decorated-original01 {
      display: inline-block;
      position: relative;
      margin-block-end: 2rem;
      padding-inline-start: 1rem;
    }
    .heading2.-decorated-original01:before {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -.15rem;
      left: 0;
      width: 2rem;
      height: 2.5rem;
      border-left: .375rem solid #0e51aa;
    }
    .heading2.-decorated-original01:after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -.15rem;
      left: 0;
      width: 100%;
      height: .125rem;
      background: linear-gradient(90deg, #0e51aa, var(--white));
    }
  • URL: /components/raw/heading/style.css
  • Filesystem Path: src/components/7-typography/heading/style.css
  • Size: 1.8 KB

No notes defined.