Alerts

An alert is like a digital tap on the shoulder, providing timely notifications or warnings to users. It's the digital equivalent of a gentle nudge, ensuring important information doesn't slip through the cracks. With an alert, users are kept informed and engaged, without feeling overwhelmed by a barrage of notifications.

Default alert

<div class="alert" role="alert">
    <div>
      <svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 17V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="currentColor"/>
        <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
      </svg>
    </div>
    <div>
        <h4>
            Heads up!
        </h4>
        <p>
            You can add components to your app using the cli.
        </p>
    </div>
    <div>
        <a href="#" class="btn link">
          <svg width="18" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" data-astro-cid-w3eo3aef=""><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" data-astro-cid-w3eo3aef=""></path></svg>
        </a>
    </div>
</div>

@use 'sass:map';
@use '~/styles/app.scss' as app;

// Load default button component
@use '@nulllogic/scssleon/scss/components/button' with (
  $config: app.$config,
  $theme: app.$theme
);

// Load alert component
@include app.generate-component(
  map.deep-merge(app.get-theme(app.$theme, 'components.alert'), (
    _subclasses : (
      '> div:nth-child(1)' : (
        align-self: start
      )
    )
  )),
  'alert',
  app.$config,
  app.$theme
);

<div class="alert" role="alert" style="--xii-alert-grid-template-columns: 1fr;">
    <div class="center">
        <div>
            <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16"
                 width="16" height="16" fill="currentColor"
                 style="display: inline-block; vertical-align: text-bottom; overflow: visible;">
                <path
                    d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
            </svg>
            To understand admin access, teams, issue assignments, and redirects after a repository is
            transferred, see <a data-inline="true"
                                href="#"
                                class="">Transferring a repository</a> in
            GitHub Help.
        </div>
    </div>
</div>

@use '~/styles/app.scss' as app;

$alert: app.get-theme(app.$theme, 'components.alert');

@include app.generate-component(
  $alert,
  'alert',
  app.$config,
  app.$theme
);