247 lines
17 KiB
PHP
247 lines
17 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Typography';
|
|
$subTitle = 'Components / Typography';
|
|
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
|
|
<h6 class="text-lg fw-semibold mb-0">Heading</h6>
|
|
<h6 class="text-lg fw-semibold mb-0">Font Size</h6>
|
|
</div>
|
|
<div class="card-body py-16 px-24">
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h1>Heading 1</h1>
|
|
<span class="text-md text-secondary-light fw-normal">60px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h2>Heading 2</h2>
|
|
<span class="text-md text-secondary-light fw-normal">48px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h3>Heading 3</h3>
|
|
<span class="text-md text-secondary-light fw-normal">36px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h4>Heading 4</h4>
|
|
<span class="text-md text-secondary-light fw-normal">30px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h5>Heading 5</h5>
|
|
<span class="text-md text-secondary-light fw-normal">24px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<h6>Heading 6</h6>
|
|
<span class="text-md text-secondary-light fw-normal">20px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
|
|
<h6 class="text-lg fw-semibold mb-0">Display Heading</h6>
|
|
<h6 class="text-lg fw-semibold mb-0">Font Size</h6>
|
|
</div>
|
|
<div class="card-body py-16 px-24">
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h1>Display 1</h1>
|
|
<span class="text-md text-secondary-light fw-normal">60px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h2>Display 2</h2>
|
|
<span class="text-md text-secondary-light fw-normal">48px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h3>Display 3</h3>
|
|
<span class="text-md text-secondary-light fw-normal">36px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h4>Display 4</h4>
|
|
<span class="text-md text-secondary-light fw-normal">30px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<h5>Display 5</h5>
|
|
<span class="text-md text-secondary-light fw-normal">24px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<h6>Display 6</h6>
|
|
<span class="text-md text-secondary-light fw-normal">20px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Heading Colors</h6>
|
|
</div>
|
|
<div class="card-body py-16 px-24">
|
|
<h1 class="text-primary-600 mb-16">Heading 1</h1>
|
|
<h2 class="text-success-main mb-16">Heading 2</h2>
|
|
<h3 class="text-warning-main mb-16">Heading 3</h3>
|
|
<h4 class="text-danger-main mb-16">Heading 4</h4>
|
|
<h5 class="text-info-main mb-16">Heading 5</h5>
|
|
<h6 class="text-secondary-light">Heading 6</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Inine Text Elements</h6>
|
|
</div>
|
|
<div class="card-body py-16 px-24">
|
|
<p class="mb-16 text-secondary-light fw-normal">You can use the mark tag to <span class="text-warning-main bg-warning-focus px-4">highlight</span> text</p>
|
|
<p class="mb-16 text-secondary-light fw-normal text-decoration-line-through">This is a paragraph. it stands out from regular Delete text </p>
|
|
<p class="mb-16 text-secondary-light fw-normal text-decoration-line-through">This line of text is meant to be treated as no longer accurate.</p>
|
|
<p class="mb-16 text-secondary-light fw-normal text-decoration-underline">This line of text will render as underlined</p>
|
|
<p class="mb-16 text-secondary-light fw-normal text-decoration-underline">This line of text is meant to be treated as an addition to the document.</p>
|
|
<p class="mb-16 text-secondary-light fw-normal">This is a paragraph. it stands out from regular text.</p>
|
|
<p class="mb-16 text-secondary-light fw-semibold">This line rendered as bold text.</p>
|
|
<p class="mb-16 text-secondary-light fst-italic">This line rendered as italicized text.</p>
|
|
<p class="text-secondary-light fst-italic">This line rendered as italicized text.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
|
|
<h6 class="text-lg fw-semibold mb-0">Text</h6>
|
|
<h6 class="text-lg fw-semibold mb-0">Font Size</h6>
|
|
</div>
|
|
<div class="card-body py-16 px-24">
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<p class="text-lg text-secondary-light">This is text</p>
|
|
<span class="text-sm text-secondary-light fw-normal">18px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<p class="text-md text-secondary-light">This is text</p>
|
|
<span class="text-sm text-secondary-light fw-normal">16px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between mb-16">
|
|
<p class="text-sm text-secondary-light">This is text</p>
|
|
<span class="text-sm text-secondary-light fw-normal">14px</span>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<p class="text-xs text-secondary-light">This is text</p>
|
|
<span class="text-sm text-secondary-light fw-normal">12px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Text Decoration</h6>
|
|
</div>
|
|
<div class="card-body py-16 px-24">
|
|
<p class="mb-16 text-secondary-light fw-normal">Use text-decoration-underline, text-decoration-line-through, or text-decoration-none class to decorate text in components respectively.</p>
|
|
<p class="mb-16 text-primary-light fw-normal text-decoration-underline">This text has a line underneath it.</p>
|
|
<p class="mb-16 text-primary-light fw-normal text-decoration-line-through">This text has a line going through it.</p>
|
|
<p class="text-secondary-light fw-normal">This link has its text decoration removed</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-12">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Blockquote Background Color Text</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-info-50 radius-8 border-start-width-3-px border-info border-top-0 border-end-0 border-bottom-0">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-info mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-success-50 radius-8 border-start-width-3-px border-success-main border-top-0 border-end-0 border-bottom-0">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-success mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-info-50 radius-8 border-start-width-3-px border-info-main border-top-0 border-end-0 border-bottom-0">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-info-main mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-danger-50 radius-8 border-start-width-3-px border-danger-main border-top-0 border-end-0 border-bottom-0">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-danger-main mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-warning-50 radius-8 border-start-width-3-px border-warning-main border-top-0 border-end-0 border-bottom-0">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-warning-main mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-neutral-50 radius-8 border-start-width-3-px border-neutral-600 border-top-0 border-end-0 border-bottom-0">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-primary-light mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-12">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Blockquote Border Color</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-transparent radius-8 border border-start-width-3-px border-cyan">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-cyan mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-transparent radius-8 border border-start-width-3-px border-success-main">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-success mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-transparent radius-8 border border-start-width-3-px border-info-main">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-info-main mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-transparent radius-8 border border-start-width-3-px border-danger-main">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-danger-main mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-transparent radius-8 border border-start-width-3-px border-warning-main">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-warning-main mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="p-16 bg-transparent radius-8 border border-start-width-3-px border-neutral-600">
|
|
<h6 class="text-primary-light text-md mb-8">Custom Blockquote Primary Example</h6>
|
|
<span class="text-primary-light mb-0">- WowDash</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |