*/ private array $macros = []; public function __construct(Environment $env) { parent::__construct($env); $this->source = $this->getSourceContext(); $this->parent = false; $this->blocks = [ ]; } protected function doDisplay(array $context, array $blocks = []): iterable { $macros = $this->macros; $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"]; $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/ui-placeholders.html.twig")); $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"]; $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/ui-placeholders.html.twig")); // line 1 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/main.html.twig"); yield " "; // line 5 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/title-meta.html.twig", ["title" => "Placeholders"]); yield " "; // line 7 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/head-css.html.twig"); yield "
"; // line 16 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/menu.html.twig"); yield "
"; // line 26 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/page-title.html.twig", ["pagetitle" => "Base UI", "title" => "Placeholders"]); yield "

Default Placeholder

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”.

\"card
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
\"card 

<!-- Base Examples -->
<div class="card">
    <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="card img">
    
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card" aria-hidden="true">
    <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="card dummy img">
    <div class="card-body">
      <h5 class="card-title placeholder-glow">
        <span class="placeholder col-6"></span>
      </h5>
      <p class="card-text placeholder-glow">
        <span class="placeholder col-7"></span>
        <span class="placeholder col-4"></span>
        <span class="placeholder col-4"></span>
        <span class="placeholder col-6"></span>
      </p>
      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
    </div>
</div>

Width

Use w-25,w-50,w-75 or w-100 class to placeholder class to set different widths to the placeholder.

<!-- Width Sizing-->
<div class="live-preview">
    <span class="placeholder col-6"></span>
    <span class="placeholder w-75"></span>
    <span class="placeholder" style="width: 25%;"></span>
</div>

Sizing

Use placeholder-lg, placeholder-sm, or placeholder-xs class to placeholder class to set different size placeholder.

<!-- Sizing -->
<span class="placeholder col-12 placeholder-lg"></span>

<span class="placeholder col-12"></span>

<span class="placeholder col-12 placeholder-sm"></span>

<span class="placeholder col-12 placeholder-xs"></span>

Color

Use bg- class with the below-mentioned color variation to set a custom color.

<!-- Color -->
<span class="placeholder col-12 mb-3"></span>

<span class="placeholder col-12 mb-3 bg-primary"></span>

<span class="placeholder col-12 mb-3 bg-secondary"></span>

<span class="placeholder col-12 mb-3 bg-success"></span>

<span class="placeholder col-12 mb-3 bg-danger"></span>

<span class="placeholder col-12 mb-3 bg-warning"></span>

<span class="placeholder col-12 mb-3 bg-info"></span>

<span class="placeholder col-12 mb-3 bg-light"></span>

<span class="placeholder col-12 mb-3 bg-dark"></span>
"; // line 284 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/footer.html.twig"); yield "
"; // line 293 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/customizer.html.twig"); yield " "; // line 295 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/vendor-scripts.html.twig"); yield " "; $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof); $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof); yield from []; } /** * @codeCoverageIgnore */ public function getTemplateName(): string { return "theme/ui-placeholders.html.twig"; } /** * @codeCoverageIgnore */ public function isTraitable(): bool { return false; } /** * @codeCoverageIgnore */ public function getDebugInfo(): array { return array ( 363 => 295, 358 => 293, 346 => 284, 85 => 26, 72 => 16, 60 => 7, 55 => 5, 48 => 1,); } public function getSourceContext(): Source { return new Source("{{ include('theme/partials/main.html.twig') }} {{ include('theme/partials/title-meta.html.twig', {title: 'Placeholders'}) }} {{ include('theme/partials/head-css.html.twig') }}
{{ include('theme/partials/menu.html.twig') }}
{{ include('theme/partials/page-title.html.twig', {pagetitle: 'Base UI', title: 'Placeholders'}) }}

Default Placeholder

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”.

\"card
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
\"card 

<!-- Base Examples -->
<div class="card">
    <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="card img">
    
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card" aria-hidden="true">
    <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="card dummy img">
    <div class="card-body">
      <h5 class="card-title placeholder-glow">
        <span class="placeholder col-6"></span>
      </h5>
      <p class="card-text placeholder-glow">
        <span class="placeholder col-7"></span>
        <span class="placeholder col-4"></span>
        <span class="placeholder col-4"></span>
        <span class="placeholder col-6"></span>
      </p>
      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
    </div>
</div>

Width

Use w-25,w-50,w-75 or w-100 class to placeholder class to set different widths to the placeholder.

<!-- Width Sizing-->
<div class="live-preview">
    <span class="placeholder col-6"></span>
    <span class="placeholder w-75"></span>
    <span class="placeholder" style="width: 25%;"></span>
</div>

Sizing

Use placeholder-lg, placeholder-sm, or placeholder-xs class to placeholder class to set different size placeholder.

<!-- Sizing -->
<span class="placeholder col-12 placeholder-lg"></span>

<span class="placeholder col-12"></span>

<span class="placeholder col-12 placeholder-sm"></span>

<span class="placeholder col-12 placeholder-xs"></span>

Color

Use bg- class with the below-mentioned color variation to set a custom color.

<!-- Color -->
<span class="placeholder col-12 mb-3"></span>

<span class="placeholder col-12 mb-3 bg-primary"></span>

<span class="placeholder col-12 mb-3 bg-secondary"></span>

<span class="placeholder col-12 mb-3 bg-success"></span>

<span class="placeholder col-12 mb-3 bg-danger"></span>

<span class="placeholder col-12 mb-3 bg-warning"></span>

<span class="placeholder col-12 mb-3 bg-info"></span>

<span class="placeholder col-12 mb-3 bg-light"></span>

<span class="placeholder col-12 mb-3 bg-dark"></span>
{{ include('theme/partials/footer.html.twig') }}
{{ include('theme/partials/customizer.html.twig') }} {{ include('theme/partials/vendor-scripts.html.twig') }} ", "theme/ui-placeholders.html.twig", "/var/www/cds/app/templates/theme/ui-placeholders.html.twig"); } }