@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